Axis 303

Flexbox Worspace

The following cards show <ul> flex containers holding <li> flex items.

CSS Flexbox: block

1/inum

Control Sample: Default <ul>, <li> structural behavior. No Flexbox implementation.

<ul> <li>1</li><li>2</li><li>3</li>
</ul>
ul { display: block; }

ul Container: block

  • 1
  • 2
  • 3

CSS Flexbox: flex

2/inum

<ul>: Flex Container

<li>: Flex Items

Note: ul flex container's block behavior, items run horizontally.

<ul> <li>1</li><li>2</li><li>3</li>
</ul>
ul { display: flex; }

ul Container: flex

  • 1
  • 2
  • 3

CSS Flexbox: inline-flex

3/inum

Note: ul flex container's inline behavior, items run horizontally.

<ul> <li>1</li><li>2</li><li>3</li>
</ul>
ul { display: inline-flex; }

ul Container: inline-flex

  • 1
  • 2
  • 3

CSS Flexbox: Cross Fill

4/inum

flex

Note: li flex items fill along cross-axis, in this case from top to bottom.

<ul> <li>1</li><li>2</li><li>3</li>
</ul>
ul { display: flex; 
     height: 75px; }

ul Container: flex

  • 1
  • 2
  • 3

CSS Flexbox: Cross Fill

5/inum

inline-flex

Note: li flex items fill along cross-axis, in this case from top to bottom.

<ul> <li>1</li><li>2</li><li>3</li>
</ul>
ul { display: inline-flex; 
     height: 75px; }

ul Container: inline-flex

  • 1
  • 2
  • 3

CSS Flexbox: Direction

6/inum

row-reverse

Note: Default value is row.

<ul> <li>1</li><li>2</li><li>3</li>
</ul>

ul Container, flex:

  • 1
  • 2
  • 3
ul { display: flex; 
     flex-direction: row-reverse; }

ul Container, inline-flex:

  • 1
  • 2
  • 3
ul { display: inline-flex; 
     flex-direction: row-reverse; }

CSS Flexbox: Direction

7/inum

column (flex, "tall")

Note: Default value is row.

<ul> <li>1</li><li>2</li><li>3</li>
</ul>

ul Container:

  • 1
  • 2
  • 3
ul { display: flex; 
     flex-direction: column;
     height: 75px;

CSS Flexbox: Direction

8/inum

column (inline-flex, "tall")

Note: Default value is row.

<ul> <li>1</li><li>2</li><li>3</li>
</ul>

ul Container:

  • 1
  • 2
  • 3
ul { display: inline-flex; 
     flex-direction: column;
     height: 75px;

CSS Flexbox: Direction

9/inum

flex-direction: column

<ul> <li>1</li><li>2</li><li>3</li>
</ul>

ul Container: flex

  • 1
  • 2
  • 3
ul { display: flex; 
     flex-direction: column; }

ul Container: inline-flex

  • 1
  • 2
  • 3
ul { display: inline-flex; 
     flex-direction: column; }

CSS Flexbox: Direction

10/inum

flex-direction: column-reverse

(flex, "tall")

<ul> <li>1</li><li>2</li><li>3</li>
</ul>

ul Container:

  • 1
  • 2
  • 3
ul { display: flex; 
     flex-direction: column-reverse; 
     height: 75px; }

CSS Flexbox: Direction

11/inum

flex-direction: column-reverse

(inline-flex, "tall")

<ul> <li>1</li><li>2</li><li>3</li>
</ul>

ul Container:

  • 1
  • 2
  • 3
ul { display: inline-flex; 
     flex-direction: column-reverse; 
     height: 75px; }

CSS Flexbox: Direction

12/inum

flex-direction: column-reverse

<ul> <li>1</li><li>2</li><li>3</li>
</ul>

ul Container: flex

  • 1
  • 2
  • 3
ul { display: flex; 
     flex-direction: column-reverse; }

ul Container: inline-flex

  • 1
  • 2
  • 3
ul { display: inline-flex; 
     flex-direction: column-reverse; }

CSS Flexbox: Flex-Wrap

13/inum

Item Overflow. flex-wrap not set.

<ul> <li>1</li> … <li>D..</li> </ul>
ul { display: (flex|inline-flex); }

ul Container:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • A
  • B
  • C
  • D..

CSS Flexbox: Flex-Wrap

14/inum

flex-wrap: wrap

<ul> <li>1</li> … <li>F</li> </ul>
ul { display: (flex|inline-flex); 
     flex-wrap: wrap; }

ul Container:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • A
  • B
  • C
  • D
  • E
  • F

CSS Flexbox: Flex-Wrap

15/inum

flex-flow: column wrap

(flex, "tall")

Shorthand property combining flex-direction, and flex-wrap.

<ul> <li>1</li> … <li>E</li> </ul>
ul { display: flex; 
     flex-flow: column wrap;
     height: 75px; }

ul Container:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • A
  • B
  • C
  • D
  • E

CSS Flexbox: Flex-Wrap

16/inum

flex-flow: column wrap

(inline-flex, "tall")

All browsers bugged for a fixed-height inline-flex container. (2022)

<ul> <li>1</li> … <li>E</li> </ul>
ul { display: inline-flex; 
     flex-flow: column wrap;
     height: 75px; }

ul Container:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • A
  • B
  • C
  • D
  • E

CSS Flexbox: Flex-Wrap

17/inum

flex-flow: column wrap

(inline-flex, "tall")

Workaround:

<ul> <li>1</li> … <li>E</li> </ul>
ul { display: inline-flex; 
     flex-flow: row wrap;
     writing-mode: vertical-lr;
     height: 75px; }
li { writing-mode: initial; }

ul Container:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • A
  • B
  • C
  • D
  • E

Attribution: domenic. bugs.chromium.org, Bug ID: 507397, Comment 21.

CSS Flexbox: Justify-Content

18

justify-content: flex-end

default: flex-start

<ul> <li>1</li> … <li>5</li> </ul>
ul { display: flex; 
     flex-flow: row wrap;
     justify-content: flex-end; }

ul Container:

  • 1
  • 2
  • 3
  • 4
  • 5

CSS Flexbox: Justify-Content

19

justify-content: center

<ul> <li>1</li> … <li>5</li> </ul>
ul { display: flex; 
     flex-flow: row wrap;
     justify-content: center; }

ul Container:

  • 1
  • 2
  • 3
  • 4
  • 5

CSS Flexbox: Justify-Content

20

justify-content: space-between

<ul> <li>1</li> … <li>5</li> </ul>
ul { display: flex; 
     flex-flow: row wrap;
     justify-content: space-between; }

ul Container:

  • 1
  • 2
  • 3
  • 4
  • 5

CSS Flexbox: Justify-Content

20

justify-content: space-around

<ul> <li>1</li> … <li>5</li> </ul>
ul { display: flex; 
     flex-flow: row wrap;
     justify-content: space-around; }

ul Container:

  • 1
  • 2
  • 3
  • 4
  • 5

CSS Flexbox: Margin

21

<ul style="display: flex;">
   <li class="li-1">1</li> … 
.li-1 { margin-right: auto; }
  • 1
  • 2
  • 3
  • 4
  • 5
.li-3 { margin-right: auto;
        margin-left: auto; }
  • 1
  • 2
  • 3
  • 4
  • 5
.li-1 { margin-right: auto; }
.li-5 { margin-left: auto; }
  • 1
  • 2
  • 3
  • 4
  • 5
.li-5 { margin-left: auto; }
  • 1
  • 2
  • 3
  • 4
  • 5

CSS Flexbox: Order

22

  • Rearrange flex items with CSS only.
  • Default Value: 0; Datatype: Integers.
  • Most negative @ start; positive, end.
  • Use Case: "Featured" element @ start for mobile, elsewhere on desktop.
<ul> <li class="li-1">Item One</li> …
     <li class="li-5">Item Five</li> </ul>
ul    { display: flex;
        flex-direction: column; }
.li-3 { order: -2; }
.li-2 { order: -1; }
.li-4 { order: 1; }

ul Container:

  • Item One: order: 0
  • Item Two: order: -1
  • Item Three: order: -2
  • Item Four: order: 1
  • Item Five: order: 0

Flexbox: flex-grow

23

  • flex-grow.dfn: flex-item's relative amount of growth, however, content-fit takes precedence for "large" content
  • .for: flex-item .default: 0
  • .desc: 0: shrink to fit content. 1: grow by sharing unused space. 2: grows by twice as much as 1.
  • .data-type: int
<ul> <li class="f-i li-1">1</li> …
     <li class="f-i li-5">5</li> </ul>
ul    { display: flex; }
.f-i  { flex-grow: 1; }
  • 1
  • 2
  • 3
  • 4
  • 5
.li-4 { flex-grow: 1; }
.li-5 { flex-grow: 2; }
  • 1
  • 2
  • 3
  • 4
  • 5

Flexbox: flex-shrink

24

  • flex-shrink .dfn: flex-item's relative shrink factor for wide content
  • .default: 1 .for: flex-item .used-with: fixed-width container, nowrap .datatype: +int
  • .desc: 0: no shrinking; fit content
  • wi = Wi - FSi * (Wt-wt) / FSt; wi: ith flex-item width, Wi: urestricted width of ith item, FSi: ith flex-shrink value, Wt: urestricted width of all items, wt: space available for items, FSt sum of all flex-shrink values
<ul> <li class="f-i li-0"> … </li> …
ul   { display: flex; }
f-i  { word-wrap: break-word; overflow-wrap:
       break-word; min-width: 0; }
li-0 { flex-shrink: 0; } … 1, 3, 7 …
  • { flex-shrink: 0; }
  • { flex-shrink: 1; }
  • { flex-shrink: 3; }
  • { flex-shrink: 7; }

Flexbox: flex-basis

25

  • flex-basis .dfn: create inline items of equal-width; wrap when width of edge-item would be less than basis
  • .default: auto .for: flex-item .used-with: wrap container, "grow" items .datatype: size
<ul> <li class="f-i">1…</li> …
     <li class="f-i">5…</li> </ul>
ul { display: flex;
     flex-wrap: wrap; }
.f-i  { flex-grow: 1; 
        flex-basis: 100px; }
  • 1: Lorem ipsum
  • 2: Lorem
  • 3: flex-basis: 100px; creates a 100px min-width before wrapping.
  • 4: Lorem ipsum dolor sit amet con
  • 5: Lorem ipsum

Flexbox: flex shorthand (1/4)

26

  • .short-for: flex-grow, -shrink, and -basis properties .for: flex-item.
  • datatype: +int +int size
<ul> <li class="f-i li-1">1…</li> …
     <li class="f-i li-5">5…</li> </ul>
ul { display: flex; flex-wrap: wrap; }
.f-i  { flex: 0; }
  • 1: Lorem ipsum
  • 2: Lorem
  • 3: Lorem
  • 4: Lorem ipsum dolor sit amet con
  • 5: Lorem ipsum
.f-i  { flex: 1; }
  • 1: Lorem ipsum
  • 2: Lorem
  • 3: Lorem
  • 4: Lorem ipsum dolor sit amet con
  • 5: Lorem ipsum

Flexbox: flex shorthand (2/4)

27

ul    { flex-wrap: nowrap; }
.li-1 { flex: 3 1 auto; }
.li-2 { flex: 3 1 auto; }
.li-3 { flex: 2 2 auto; }
.li-4 { flex: 1 3 auto; }

Content overflow; shrink values active

  • 1: Lorem ipsum dolor
  • 2: Lorem ipsum dolor
  • 3: Lorem ipsum dolor
  • 4: Lorem ipsum dolor

Content underflow; grow values active

  • 1
  • 2
  • 3
  • 4

Flexbox: flex shorthand (3/4)

28

ul    { flex-wrap: nowrap; }
.li-1 { flex: 3 1 auto; }
.li-2 { flex: 3 1 auto; }
.li-3 { flex: 2 2 auto; }
.li-4 { flex: 1 3 auto; }

Content overflow; shrink values active

  • 1: Lorem ipsum dolor
  • 2: Lorem ipsum dolor
  • 3: Lorem ipsum dolor
  • 4: Lorem ipsum dolor

Content underflow; grow values active

  • 1
  • 2
  • 3
  • 4

Flexbox: flex shorthand (4/4)

29

ul    { flex-wrap: wrap; }
.li-1 { flex: 3 1 100px; }
.li-2 { flex: 3 1 100px; }
.li-3 { flex: 2 2 100px; }
.li-4 { flex: 1 4 100px; }
  • 1: Lorem ipsum dolor
  • 2: Lorem ipsum dolor
  • 3: Lorem ipsum dolor
  • 4: Lorem ipsum
ul    { flex-wrap: nowrap; }
.li-1 { flex: 3 1 30px; }
.li-2 { flex: 3 1 30px; }
.li-3 { flex: 2 2 30px; }
.li-4 { flex: 1 4 30px; }
  • 1: Lorem ipsum dolor
  • 2: Lorem ipsum dolor
  • 3: Lorem ipsum dolor
  • 4: Lorem ipsum dolor

Flexbox: align-items, -self

30

  • align-items .for: flex-container .dfn: aligns contained flex-items along cross-axis (by default: vertical)
  • .default: stretch .used-with: fixed-height .datatype: keyword (kw)
  • noteable-kw: stretch, center, flex-start, and flex-end
  • align-self .for: flex-item .dfn: aligns individual flex-item along cross-axis (by default: vertical). Overrides align-items.
<ul> <li class="li1">1</li> …
ul { display: flex; height: 50px;
     align-items: flex-start; }
.li3      { align-self: center; }
.li4, li5 { align-self: flex-end; }
  • 1
  • 2
  • 3
  • 4
  • 5

Flexbox: Centering

31

<ul> <li>Center</li> </ul>
ul { display: flex; 
     justify-content: center;
     align-items: center; }
  • Center
ul { display: flex; 
     justify-content: center; }
li { align-self: center; }
  • Center
ul { display: flex; }
li { margin: auto; }
  • Center

Flexbox: XXalign-contentXX

xx

  • align-content .for: flex-container .dfn: determines spacing between lines of wrapping flex-items
  • .default: stretch .used-with: fixed-height .datatype: keyword (kw)
  • noteable-kw: stretch, center, flex-start, and flex-end
  • align-self .for: flex-item .dfn: aligns individual flex-item along cross-axis (by default: vertical). Overrides align-items.
<ul> <li class="li1">1</li> …
ul { display: flex; height: 50px;
     align-items: flex-start; }
.li3      { align-self: center; }
.li4, li5 { align-self: flex-end; }
  • 1
  • 2
  • 3
  • 4
  • 5