Flex Layout Example - Basics

# Flex Layout Example - Basics

You can use F12 developer tools to inspect elements and styles, or open CodePen to edit the code online.

<html>
  <div class="box">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
  </div>
</html>
<style>
/* Define flex box model on the parent element, called “container” */
.box{
  width: 350px;
  height: 300px;
  background: #eee;
  /* Basic concepts: .box is the container, spans inside .box are items; x-axis is the main axis, y-axis is the cross axis */
  /* flex defines the flexible box model */
  display: flex;
  /* flex-direction arrangement direction: row (default) | row-reverse | column | column-reverse */
  flex-direction: row;
  /* flex-wrap whether to wrap: nowrap (default, may compress item widths) | wrap | wrap-reverse, first row at the bottom */
  flex-wrap: wrap;
  /* flex-flow shorthand for direction and wrap: default row nowrap */
  flex-flow: row wrap;
  /* justify-content alignment on the main axis: flex-start left-align (default) | flex-end right-align | center | space-between justify | space-around equal spacing on both sides of items */
  justify-content: space-around;
  /* align-items alignment on the cross axis: stretch (default) if items have no height or auto, fill the container height |
  flex-start align to cross axis start | flex-end align to cross axis end | center align to cross axis center | baseline align to first line of text baseline */
  align-items: center
  /* align-content alignment of multiple axis lines (one row of items = one axis line, no effect with only one line):
  stretch (default) lines fill the entire cross axis | flex-start align to top | flex-end align to bottom | center align to middle |
  space-between align to both ends with equal spacing | space-around equal spacing on both sides of each line */
  align-content: flex-start
}
/* Child elements are called “items” */
.box span{
  display:block;width: 50px;height: 50px;background: mediumspringgreen;margin: 10px;text-align: center;line-height: 50px;
  /* flex-grow item growth ratio, default 0, meaning no growth even with remaining space;
  if all are 1, they equally share remaining space (if any).
  if one item is 2 and others are 1, the one with 2 takes twice the remaining space.
  */
  flex-grow: 0; /* grow: enlarge */
  /* flex-shrink defines item shrink ratio, default 1, meaning the item shrinks if space is insufficient.
  if all items are 1, they shrink proportionally when space is insufficient.
  if one item is 0 and others are 1, the one with 0 does not shrink */
  flex-shrink: 1; /* shrink: reduce */
  /* flex-basis defines the main axis space an item occupies before distributing extra space.
  the browser uses this to calculate whether the main axis has extra space. Default is auto (item's original size).
  can be set like width or height (e.g. 50px), then the item occupies fixed space */
  flex-basis: auto; /* basis: base */
  /* flex is shorthand for flex-grow, flex-shrink and flex-basis, default 0 1 auto. Last two are optional.
  two shortcut values: auto (1 1 auto) for grow, and none (0 0 auto) for no grow/shrink.
  recommended to use this shorthand instead of three separate properties, as the browser will calculate related values. */
  flex:0 1 auto; /* flex: 0=grow 1=shrink auto=original-width */
}
.box span:nth-child(2){
  /* order defines item order. Smaller values come first, default 0; values: positive/negative integers. */
  order: -1;
  background: red;
}
.box span:nth-child(7){
  /* align-self allows a single item to have a different alignment than others, overriding align-items.
  default auto, inherits parent's align-items; if no parent, equals stretch.
  values: auto (default) | flex-start | flex-end | center | baseline | stretch.
  */
  align-self: flex-end;
  background: blue;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

Reference: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html (opens new window)

Edit

Last Updated: 2026/03/21, 12:14:36

← Flex Layout Syntax Flex Layout Example - Dice→

Recent Updates

01
How I Discovered Disposable Email — A True Story 06-12

02
Animations in Grid Layout 09-15

03
Renaming a Git Branch 08-11

More Articles >