#CSS #Layout : display: flex

Oscar Brito


The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
"Flexbox is a whole module and not a single property"

Said that, to write flexbox you must know that it is composed of a container and child items. 
The following vocabulary must be known:



CSS properties of flex container:

display: other values | flex | inline-flex;
flex-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content: flex-start | flex-end | center | space-between | space-around
align-items: flex-start | flex-end | center | baseline | stretch
align-content: flex-start | flex-end | center | space-between | space-around | stretch

CSS properties of flex items:

order: <integer>
flex-grow: <number> (default 0)
flex-shrink: <number> (default 1)
flex-basis: <length> | auto (default auto)
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch


A two columns layout without float and tables, vertically aligned Hurray!!!:


LINK:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
http://css-tricks.com/snippets/css/a-guide-to-flexbox/



Visit www.divhide.com for more informations, contacts and news about Web Development.
See other blog posts at blog.divhide.com.



Divhide purpose is to follow the HTML5 movement and contribute with applications which prove the quality of technology.


Feel free to contact divhide.