Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Understanding the flex layout

A deep overview of the css flex-box model.

  • Login to see the comments

  • Be the first to like this

Understanding the flex layout

  1. 1. Understanding the Flex Layout By Barak Drechsler
  2. 2. Flex Box Model
  3. 3. A module of CSS that defines a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions. CSS Flexible Box Layout
  4. 4. 1.ability to alter its items' width and/or height to best fit in the available space on any display device. 2.flexbox layout algorithm is direction-agnostic as opposed to the block layout, which is vertically-biased, or the inline layout, which is horizontally-biased 3.Flexbox layout is most appropriate for the components of an application, and small-scale layouts, while the (emerging) Grid layout is intended for larger scale layouts. Flex Layout agenda
  5. 5. 1. Flex Container, the parent element, that defines the flex behaviour, defined by display: flex or flex-inline. 2. Flex Item, any child of a Flex container becomes, a flex item. 3. Axes: a. The flex-direction property establishes the main axis. b. The justify-content property defines how flex items are laid out along the main axis on the current line. The Basics (MDN)
  6. 6. 4. order , allows to adjust flex items order. 5.Flex-wrap, flex can be defined either single line or multiline. 6. The flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. The Basics
  7. 7. 1. The flex-basis specifies initial main size of a flex item. (the size to be defined before any other factors apply). 2. The flex-grow - specifies the grow factor of each element, if any space remaining. 3. The flex-shrink - specifies the shrink factor, if there isn’t enough space for all elements to fit. 4. You should use the flex shorthand as best practice. a. One value - flex-grow flex: 1; Flex-basis, flex-grow & flex-shrink
  8. 8. At first the browser calculate each item size, then it check the amount of remaining space. If extra space available each item will receive its flex grow portion, if there isn’t enough space each item will shrink by its flex shrink portion. 1. Calculate the Remaining Space: Container main size - ( sum of size of flex items baisias) 2. If Remaining Space is positive, apply growth factor. 3. If it negative apply shrink factor. 4. Growth: basis size + (remaining space * (flex-grow/ total flexs )) Flex Calculation
  9. 9. Play Time - Flex Flex Playground Flex Calculator
  10. 10. Flex have a wide browser support in newer browsers Although it not perfect: see Github Known Flex Bugs - most are IE 10-11 related, but not only. Browser Support
  11. 11. Dynamic Height Overflows Solved By Flex
  12. 12. 1. In firefox or old chromes, in order for overflow auto to work each flex item must have min- height 0, or min-width: 0 (depends on scrolling direction) 2. Because of some issues with Safari, do not use height 100% of flex: 1 items, keep nesting flex: 1 if needed. Browser Compatibility Gotchas
  13. 13. 1. We use angular material design, use its grid system. Our day to day
  14. 14. Questions?