css3 flex layout

CSS3 Flexbox

BY - Neha Sharma (nehha255@gmail.com) Follow @ https://twitter.com/nehadesigner

Flexible Layout

AGENDAPart One – Introduction• What is Flex• Why we need Flex

Part Two – Syntax• Flex• Order• align-items• Justify-content• Flex-wrap• Flex-grow• Flex-shrink

Part Three – Examples

We love FloatsIt’s a question not a statement.

Floats and Issues• Weird behaving• Clearfix• Cross- browser issues• Parent container breaking• Content spill over

What you want to change?Flexible parent container, No floats Hack, no clear fix, adjustable child container,

Why Flexbox?

What is Flex?• Flexbox or Flexible box is the css3 property • Flexbox is the layout mode• Improvement over the Floats• It helps in displaying the elements on the page as per

the device size and screen size , available space• It helps in achieving the grid layout

What is Flex?“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.This is the improvement of using floats for achieving the Grid layout and margin/content overlapping issues.”

- Mozilla Development Network

Let’s Meet the Flex

Flex Vocabulary

FlexTo make the any container behave like Flexible layout . You have to declare it flex. By default flex is block level element.

display : <flex | flex-inline>

Flex ItemsElements within in the flex containers are the flex items.

They can be arranged across the main or cross axis

Flex AxisEvery flex model have 2 axes - Main and Cross . Main axis is the horizontal axis and the cross axis is the axis perpendicular to the main.

There are 3 properties with the axis:- Justify-content- Align-items- Align-self

Justify-contentHow the browser distributes space between and around flex items along the main-axis of their container.

Justify-content : <flex-start | flex-end | center | space-around | space-between>

align-itemsAlign the current flex items just like the justify-content but across the cross axis.

Align-items : <flex-start | flex-end | center | baseline | stretch >

align-selfIt will override the current flex items and align itself across the cross axis

Align-items : <flex-start | flex-end | center | baseline | stretch >

flex-directionFlex direction defines the flow of the flex items across the main/cross axis.

Flex-direction: <row | column | row-reverse | column-reverse>

orderDefines the way flex-items will display on the web-page. By default they come as define on the page.

Order takes the integer value .Negatives are not allowed and in ascending order they will come on the page

order: <integer>

order

Flex LinesFlex-items can be appear single line or multiple line along the cross axis .

Flex WrapFlex-wrap property controls how the flex-items will stacked or not stacked

flex-wrap <wrap | no-wrap>

Flex DimensionsFlex-items can be appear single line or multiple line along the cross axis. Flex-wrap property controls how the flex-items will stacked or not stacked

There are 3 properties:- flex-basis- flex-grow- flex-shrink

Flex BasisIt defines the initial flex basis which is the initial size of the flex item

Flex-basis : <width | auto >

Flex GrowIt defines the initial value of the flex item to grow

Flex-grow : <integer | 0 >

Flex ShrinkIt defines the initial value of the flex item to shrink

Flex-shrink : <integer | 1>

ExampleA webpage without Floats http://kodshare.com/codes/66rLBNZBsL

A navigation with flexhttp://kodshare.com/codes/8DGEAcRvg3

Browser SupportIE 10 with prefixes

Chrome 21 with prefixes

Safari 6.1 with prefixes

Firefox 20 +

Questions and Feedbacks

Referenceso https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxeso http://www.w3schools.com/cssref/css3_pr_flex.asp