CSS Flexbox (flexible box layout)

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

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

“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;

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

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

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

Core Concepts
Nested Flex Lines
Each flexbox layout (box) can contain another set that is
on their own line.
Nested flexboxes

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
}

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 */
}

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

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;
}

1
Let’s look at some Code
To the text-editor!

Some other examples (that I didn’t have time to build)
▪ https://dl.dropboxusercontent.com/u/444684/flexbox/flexbox1.html

Browser Adoption
Can I Use? - caniuse.com

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)

● 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

CSS Flexbox (flexible box layout)

More Related Content

What's hot (20)

Similar to CSS Flexbox (flexible box layout) (20)

Recently uploaded (20)

CSS Flexbox (flexible box layout)