css3 flex layout
TRANSCRIPT
CSS3 Flexbox
BY - Neha Sharma ([email protected]) 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