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.

CSS Flexbox (flexible box layout)

679 views

Published on

Bi-Weekly Tech Talk for Woodridge Software Employees. Scott Holdeman explores the history, viability and implementation of the CSS3 flexbox (flexible box layout) layout in modern web browsers.

Published in: Software
  • Login to see the comments

  • Be the first to like this

CSS Flexbox (flexible box layout)

  1. 1. Flexbox (Flexible Box Layout)
  2. 2. 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. Mozilla Developer Network
  3. 3. What is Flexbox? Designed to provide a better way to lay out, align, and distribute space among items in a container - even when dynamic. Flexbox is a CSS layout mode designed to ensure that elements behave predictably in different screen sizes and devices. … it creates Intelligent boxes. Easily Defined in CSS and markup (incl. media queries). Directionally agnostic. (block = vertically-based & inline = horizontally-based) Best used for smaller modules over broader layout
  4. 4. “Old” and “New” syntax Oddly, the syntax has changed since initial conception - which has resulted in common references to “old” and “new” versions. Weaving together the two, (and in-betweens) provides decent browser support - especially for order-controlled grids ▪ Chris Coyier (2013) Requires additional code and prefixed code when authoring for best results. … consider a js library (autoprefixer) Examples NEW: display: flex; TWEEN: display; -ms-flexbox; OLD: display: box;
  5. 5. Core Concepts Flexbox consists of: ▪Flex Containers ▪Flex Items Flex Container Declared on an element using the display property display: flex or display: inline-flex Flex Item Flex items are positioned inside of a flex container along a “flex line”. By default 1 flex line per flex container. contaner < items
  6. 6. Core Concepts Flex Line (axis, rope) Flex items are laid out in a single “line” (default) or on several “lines” according to the flex-wrap property. No longer think about top-to-bottom or left-to-right. Abandon rows/columns thinking. direction orientation
  7. 7. Core Concepts Flex Line In addition to Alignment, Orientation and Direction, flex lines can be reordered! This is huge. We can now structure our HTML for semantics, accessibility, and SEO .item { order: <integer>; } order By default, flex items are laid out in source order
  8. 8. Core Concepts Nested Flex Lines Each flexbox layout (box) can contain another set that is on their own line. Nested flexboxes
  9. 9. Core Concepts flex-wrap By default all flex items will try to fit together into one line. This can be changed and direction can be modified using the flex-wrap property. .container { flex-wrap: wrap; nowrap | wrap | wrap reverse }
  10. 10. Core Concepts flex-grow Defines the ability for a flex item to grow if needed. (unitless values serve as proportion) An item set at 2 would be twice as big as an item set at 1. .item { flex-grow: <number>; /* default = 0 */ } flex-shrink Defines the ability for a flex item to shrink if needed. .item { flex-shrink: <number>; /* default = 0 */ }
  11. 11. Core Concepts flex-basis Defines the default size of an element - before remaining space is distributed. Length or keyword values. .item { flex-basis: <number>; } If set to 0, the extra space around it is not factored in. If set to auto (keyword), the extra space is distributed by its flex-grow value
  12. 12. Core Concepts flex (shortcut) Combines flex-grow, flex-shrink (opt) and flex-basis (opt). Default = 0 1 auto RECOMMENDED over individual properties. .item { flex: 1 0 0; }
  13. 13. 1 Let’s look at some Code To the text-editor!
  14. 14. Some other examples (that I didn’t have time to build) ▪ https://dl.dropboxusercontent.com/u/444684/flexbox/flexbox1.html ▪ https://dl.dropboxusercontent.com/u/444684/flexbox/flexbox2.html ▪ https://dl.dropboxusercontent.com/u/444684/flexbox/flexbox3.html
  15. 15. Browser Adoption Can I Use? - caniuse.com
  16. 16. Flexbox is the current new and now way of thinking about CSS layout - but not the end. Historic and current layout practices ▪ Table based layouts ▪ Float based layouts (CSS1) ▪ Positioning (CSS2) ▪ Flexbox “This is real layout. It’s not a hack” - Jeremy Keith ▫ Flexbox (old) ▫ Flexbox (mid/transitional) ▫ Flexbox (standard/final) The future is coming ‘soon’ and will likely build upon the flexbox model and techniques. ▪ Grid Layout (ie10 has adopted an early specification) ▪ Regions and Exclusions (Adobe initiative)
  17. 17. ● https://developer.mozilla.org/en- US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes ● http://www.sitepoint.com/are-we-ready-to-use-flexbox/ ● https://css-tricks.com/using-flexbox/ ● http://caniuse.com/#feat=flexbox ● https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ● https://www.smashingmagazine.com/2013/05/centering-elements-with-flexbox/ ● https://www.smashingmagazine.com/2015/08/flexible-future-for-web-design-with-flexbox/ References

×