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 LineIn 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 LinesEach 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-shrinkDefines 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;

}

1Let’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

▪ https://dl.dropboxusercontent.com/u/444684/flexbox/flexbox2.html

▪ https://dl.dropboxusercontent.com/u/444684/flexbox/flexbox3.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