CSS Flexbox - The Most Powerful Way to Layout Elements Without a Grid Module

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:

  1. We have to give clear: both.
  2. Equal heights issue
  3. Responsive issues for flexible width. May it be % or ems or px etc.
  4. 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- Content

CSS Flexbox justify-content Column

CSS Flexbox

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

Flex-Directions

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

Align Items in FlexBox

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 Wrap

Flex Grow

Flex grew

 

 

 

 

comments
0