CSS Flexbox
CSS Flexbox is a layout module from CSS3 to improve alignment, direction and order of the items (dynamic or even unknown size) present in a container.
.container { display: flex; }We already have floats to use for layouts. Lets look at float’s issues:
- We have to give clear: both.
- Equal heights issue
- Responsive issues for flexible width. May it be % or ems or px etc.
- Padding, margin, long text, somehow gets messy. And hence Flexbox.
Getting Started:
.container { display: flex; }You can check the browser support from
http://caniuse.com/#search=flexbox
In case of old browsers, you might have to add the prefix to work.
.container { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ }By giving the container a “display: flex” property, we make the element’s child follow flex properties.
Aligning Content along Main Axis (justify-content)
For Flex-direction: row,justify-content has the following values:
- flex-start
- flex-end
- center
- space-around
- space-between
CSS Flexbox justify-content Row
CSS Flexbox justify-content Column
Arrange content along cross axis (align-items)
For Flex-direction: row,align-items has the following values: flex-start / flex-end / center / stretch / baseline.
Align items in Flexbox, flex-direction: row
Notes:Stretch : The default value of align-itemBaseline: All items would be aligned the base-line, i.e. Lower end of the max height element.
Align items in Flexbox, flex-direction: column
Arrange content along cross axis (flex-basis)
Flex-basis = width / height along the axis the content flows. So if the flex-direction is “row”, you can give flex-basis for width and for flex-direction “column”, the flex-basis would be height. This can be interesting,
Flex Wrap
Flex Grow
