CSS Flexbox

For Flexbox to work parent element should have display:flex css property in child css flex:1 will take the whole width if there is no siblings If there are siblings, flex:1 in all sibling css will make equal width Example of flexbox resizing based on siblings width and distributed width .main-element{ // has more content flex: 2; } .column1{ //has less content flex:1 } .column2{ //has less content flex:1 } in above snippet, main column will have twice width of other siblings order: {{ a number will arrange element in html display}}// this trick will be useful when using content order for SEO purpose Flexbox will maintain equal height with all siglings. to avoid having equal heights, in parent container, add css property align-items: flex-start. this property will remove equal height in siblings and aligns items to top. align-items: flex-end will align all siblings to bottom align-items: center will align all siblings to center based on max height box. align-items: stretch is default will maintain equal heights adding margin to flex box container add css prop to parent: justify-content: center flex-basis: 30% in child Ordering content for SEO Responsive css handling parent container flex and justification prop in media query will enable responsive layouts For wrapping content items in a flex box in parent container add prop flex-wrap: nowrap //is default value flex-wrap: wrap// will wrap content inside flex box by maintaining its specified width center content vertical and horizontal center add prop parent element display:flex in child element add prop: margin:auto Flex direction is a property to tell child element to share width/height equaly or as specified. default value for flex-direction is row which means all child element will share equal width in flex box container when specifying flex-direction: column, all child elements will share equal height with in the fiex box container http://codepen.io/anon/pen/VKxRoE?editors=1100