Download as PDF, PPTX
Introduction to css flexbox
- 1. Introduction to CSSFlexbox
- 2. Background ● Initial draftwas proposed as early as 2009 ● First Candidate Recommendation was in 2012 ● Currently a W3C (World Wide Web Consortium) Candidate Recommendation (Stable working draft) as of 2016 ● The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to layout, align and distribute space among items in a container, even when their size is unknown and/or dynamic.
- 3. Browser Support ● AllModern browsers support Flexbox ● IE 11 supports Flexbox but there are some bugs in how the flex works ● http://caniuse.com/#search=flex
- 4. Basics ● Flexbox iswhole module not a single property. ● Properties are related to container (Flex Container) and the children (flex items) Image Source: W3C
- 5. Flex Container Properties ●display ● flex-direction ● flex-wrap ● flex-flow ● justify-content ● align-items ● align-content
- 6. display:flex & display:inline-flex ● Applies to the flex container ● display: inline-flex works similar to inline-block (white space issue of inline-block exists here as well)
- 7. flex-direction ● Possible Values ●flex-direction: row | row-reverse | column | column-reverse; ● Default value is ‘row’
- 8. flex-wrap ● Default valueof flex-wrap is no-wrap. i.e, All child elements are aligned in single line ● Possible values ● flex-wrap: nowrap | wrap | wrap-reverse; ● NOTE: Assigning flex-wrap will result in child elements wrapping Left to Right or Right to Left based on the flex direction
- 9. flex-flow ● This isa shorthand flex-direction and flex-wrap properties, which together define the flex container's main and cross axes. Default is row nowrap. ● flex-flow: <‘flex-direction’> || <‘flex-wrap’>
- 10. justify-content ● Used toalign the flex items ● Default value is flex-start Possible values ● justify-content: flex-start | flex-end | center | space-between | space-around;
- 11. align-content ● Used toalign the child elements similar to justify-content ● Applicable in multi-line child items ● Default value is stretch Possible values ● align-content: flex-start | flex-end | center | space-between | space-around | stretch;
- 12.
- 13. Flex items properties ●order ● flex-grow ● flex-shrink ● flex-basis ● flex ● align-self
- 14. order ● Accepts anyinteger value ● Default is zero ● To Change the order in which the elements are displayed
- 15. flex-grow ● Accepts anypositive integer value, negative values are invalid ● Default is zero ● If all flex items have same value for flex-grow than all items have same size in the container ● Determines how much the flex item will grow relative to the rest of the flex items in the flex container
- 16. flex-shrink ● Applies tothe child ● Accepts any positive integer value, negative values are invalid ● Default is 1 ● If all flex items have same value for flex-shrink than all items have same size in the container ● Determines how much the flex item will shrink relative to the rest of the flex items in the flex container
- 17. flex-basis ● Applies tothe child ● Accepts any length (%, em, pt, etc..) or auto keyword ● Default is auto ● Sets the size of the flex item before remaining space is distributed (min width of the flex item)
- 18. flex ● This isa shorthand flex-grow, flex-shrink and flex-basis properties. ● Second and third (flex-shrink and flex-basis) are optional ● Default value is 0 1 auto ● flex-flow: <‘flex-grow’> <‘flex-shrink’> <flex-basis>
- 19. align-self ● Applies tothe child ● To override default alignment for specific flex item ● Possible values ● align-self: auto | flex-start | flex-end | center | baseline | stretch; ● Default value is auto
- 20.
- 21. Flex box bugs ●https://github.com/philipwalton/flexbugs
- 22. Other Resources ● https://www.w3.org/TR/css-flexbox-1/ ●https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_ Flexible_Box_Layout/Using_CSS_flexible_boxes ● flexboxfroggy.com ● https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox -playground/demos/ ● https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- 23.