CSS: Flexbox

Problem we're trying to solve

Flex Box

Browser support

V1: display: box;

  • Chrome
  • Firefox 2
  • Safari 3+
  • Android
  • Blackberry v7+
  • prefix for all

V2: display: flexbox;

  • IE 10
  • -ms- for IE 10

Final: display: flex;

  • Chrome
  • Safari 6+
  • Firefox
  • Opera
  • IE 11
  • Android 4.4
  • Blackberry 10+
  • Prefix for BB and Safari

Flexible Box Model: V1

Used to position horizontal and vertical stacks.

.box {
  display: box;
  box-orient:;
}
.box .one, .box .two {
  box-flex: 1;
}
.box .three {
  box-flex: 3;
}
Box one
Box two
Box three
  • Chrome
  • Firefox 2
  • Safari 3+
  • Android
  • Blackberry v7+
  • prefix for all. UC Browser for Android 9

Flexible Box Model: V1

.box {
  display: box;
  box-pack: ;
  box-align: ;
}

Flexible Box Model: V1

display: box ;
box-orient:  horizontal | vertical | inherit;

box-pack: start | end | center | justify;

box-align: start | end | center | baseline | stretch;

box-flex: integer | 0;

box-flex-group

box-ordinal-group

box-direction: normal | reverse | inherit;

box-lines:

Flexible Box Model: V2

display: flexbox | inline-flexbox;
flex-direction: lr | rl | tb | bt | inline |
    inline-reverse | block | block-reverse

flex-order: integer | 1;

flex-pack: start | end | center | justify;

flex-align: auto | baseline;
  • Chrome
  • Safari
  • Firefox
  • Opera
  • IE 10 ONLY, with prefix

v2 = 2012. The spec syntax changed drastically.

Actual Flex Box

CSS Flexible Box Layout Module

dev.w3.org/csswg/css-flexbox/

So simple...

Remember?

Components of Flexbox

  1. Direction: flex-flow row | row-reverse | column | column-reverse
  2. Alignment: justify-content, align-items, align-self, align-content
  3. Ordering: order
  4. Flexibility: flex

Flexible Box Model: Final

Related properties:

display
Values include flex and inline-flex. Used on parent to create the flex container.
align-content
align-items
align-self
flex
Shorthand for [flex-basis flex-grow, and flex-shrink, or none
flex-basis
default = auto
flex-direction
Set the containers axis for its children with row, row-reverse, column or columns-reverse on the parent
flex-flow
Shorthand for flex-direction and flex-wrap properties.
flex-grow
Positive number determines how much flex item will grow relative to other flex items in flex container when positive free space is distributed. default is 1 for container. 0 for children. Positive only
flex-shrink
Positive number determines how much flex item will shrink relative to other flex items in flex container when negative free space is distributed. default is 1
flex-wrap
To determine whether the boxes are single line or wrap, and the direction, use nowrap, wrap or wrap-reverse
justify-content
min-height
min-width
order
Integer. Controls order of flex item within flex container

Steps

  1. Add display: flex; to the parent of the elements to be flexed.
  2. Set flex-direction to horizontal or vertical
  3. Set flex-wrap to control wrap direction

display property

inline | block | list-item | inline-list-item | inline-block | table | inline-table | table-cell | table-caption | flex | inline-flex | grid | inline-grid

display: flex;

block-level flex container box

display: inline-flex;

inline-level flex container box

Is Flexbox supported in your browser?

Visit Site

display property

flex-direction property

row | row-reverse | column | column-reverse

flex-driection: ...

flex-wrap property

nowrap | wrap | wrap-reverse

Purpose: is the whole shebang on one line, or can it wrap if necessary

flex-wrap: ...

flex-flow property

Shorthand for flex-direction and flex-wrap

flex-flow: ...

"But wait, there's more!"

--Ed Valenti

order property

div:nth-of-type(3n) {
   order: -1;
}

The default value is 0. Anything lower will come before those without set values. Anything above will come after.

order: ...

flex shorthand

flex-grow: How to divide the extra space. Non-negative number. default: 1.

flex-shrink: How to shrink if there's not enough room. Non-negative number. default: 1.

flex-basis: the starting size before free space is distributed. length value, content or auto . If set to auto, sets to flex item’s main size property.

flex shorthand property

flex gotcha!

justify-content property

flex-start | flex-end | center | space-between | space-around

aligns flex items

justify-content property

align-items, align-content properties

flex-start | flex-end | center | baseline | stretch

align-items property

Remember This?

  • 1
  • 1
  • 2
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 4
ul {
  display: flex;
}
li {
  flex: 1;
}

Flex Box

CSS calc() function

calc()

width: calc(50% - 40px);
background: linear-gradient(
  black calc(50% - 2px),
  white calc(50% - 2px),
  white calc(50% + 2px),
  black calc(50% + 2px));

calc()

calc()

calc()

width of objects:

figure > :not(figcaption) {
  width: calc(100% - 40px);
}

also consider

figure  {
  box-sizing: border-box;
}

box-sizing

box-sizing: content-box | border-box
content-box
border-box
div {
width: 200px;
height:100px;
padding: 20px;
margin:20px;
border-width: 5px;
}
border-box

border-box replicates the old IE box model

CSS Future Functions

min()

width: min(100px, 100%);
width: min(90px + 50px, 30%);

max()

width: max(100px, 100%);
width: max(90px + 50px, 30%)

toggle()

em {
  font-style: toggle(normal, italic);
}