Skip to main content
CSS Flexbox

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

 

 

 

 

Gourahari Patnaik

Gourahari Patnaik

Gourahari Patnaik works as Software Engineer with Trigent Software. He has 6+ years of experience as a UI Developer/Web Developer, building enterprise web applications. He has strong expertise in HTML5 and CSS3, Bootstrap Responsive Web technologies, JQuery and JavaScript. Gourahari also has experience in W3C Validation and Solving Browser and Device and Mobile compatibility issues along with experience in in SASS framework.

Leave a Reply

Your email address will not be published. Required fields are marked *

+ sixteen = twenty six