Notes CSS - Flexbox

CSS Flexbox

The flexible box layout module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.

The flex container

An area of a document that is laid out using flexbox is called a flex container. To create a flex container, set the area's display property to flex. When we do this, the direct children of that container become flex items. You can explicitly control whether the container itself is displayed inline or in block formatting context using inline flex or inline-flex for inline flex containers or block flex or flex for block level flex containers.

/* THE FLEX CONTAINER */ display:flex;

Flex Direction = Row

───── Main Axis - flex-direction: row ────►

Cell One

Cell Two

Cell Three

Cell Four

Flex Direction = Row Reverse

◄───── Main Axis - flex-direction: row-reverse ────

Cell One

Cell Two

Cell Three

Cell Four

Flex Direction = Column

── Main Axis - flex-direction: column ─▼

Cell One

Cell Two

Cell Three

Cell Four

Flex Direction = Column Reverse

▲─ Main Axis - flex-direction: column-reverse ─

Cell One

Cell Two

Cell Three

Cell Four

Flex Direction

This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.

.container { flex-direction: row | row-reverse | column | column-reverse; }

Flex Direction Row

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Flex Direction Row-Reverse

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Flex Direction Column

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Flex Direction Column Reverse

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Flex Wrap

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

.container { flex-wrap: nowrap | wrap | wrap-reverse; }

Flex Wrap

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Flex Wrap Reverse

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Flex Flow

This is a shorthand for the flex-direction and flex-wrap properties, which together define the flex container's main and cross axes. The default value is row nowrap.

.container { flex-flow: row nowrap; } .container { flex-flow: row wrap; } .container { flex-flow: row wrap-reverse; } .container { flex-flow: column nowrap; } .container { flex-flow: column wrap; } .container { flex-flow: column wrap-reverse; }

Flex Flow - Row Wrap

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Flex Flow - Row Wrap-Reverse

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Justify Content

This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

.container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right }

flex-start (default): items are packed toward the start of the flex-direction.
flex-end: items are packed toward the end of the flex-direction.
start: items are packed toward the start of the writing-mode direction.
end: items are packed toward the end of the writing-mode direction.
left: items are packed toward left edge of the container, unless that doesn't make sense with the flex-direction, then it behaves like start.
right: items are packed toward right edge of the container, unless that doesn't make sense with the flex-direction, then it behaves like end.
center: items are centered along the line
space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren't equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.

justify-content:flex-start

Item 1

Item 2

Item 3

Item 4

justify-content:flex-end

Item 1

Item 2

Item 3

Item 4

justify-content:center

Item 1

Item 2

Item 3

Item 4

justify-content:space-between

Item 1

Item 2

Item 3

Item 4

justify-content:space-around

Item 1

Item 2

Item 3

Item 4

justify-content:space-evenly

Item 1

Item 2

Item 3

Item 4

With Columns

Justify-Content does not work with columns

To center columns, you need to use align-items. Use: align-items:center;

Item 1

Item 2

Item 3

Item 4

Align Items

This defines the default behavior for how flex items are laid out along the cross axis on the current line.
Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).

.container { align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end; }

stretch (default): stretch to fill the container (still respect min-width/max-width)
flex-start / start / self-start: items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules.
flex-end / end / self-end: items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.
center: items are centered in the cross-axis
baseline: items are aligned such as their baselines align

<div style="display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;"> <div class="sample_tall_box_1" style="">Item 1</div> <div class="sample_tall_box_3" style="">Item 2</div> <div class="sample_tall_box_4" style="">Item 3</div> <div class="sample_tall_box_2" style="">Item 4</div> </div> <div style="display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-end;"> <div class="sample_tall_box_1" style="">Item 1</div> <div class="sample_tall_box_3" style="">Item 2</div> <div class="sample_tall_box_4" style="">Item 3</div> <div class="sample_tall_box_2" style="">Item 4</div> </div> <div style="display:flex;flex-direction:row;justify-content:flex-start;align-items:center;"> <div class="sample_tall_box_1" style="">Item 1</div> <div class="sample_tall_box_3" style="">Item 2</div> <div class="sample_tall_box_4" style="">Item 3</div> <div class="sample_tall_box_2" style="">Item 4</div> </div> <div style="display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;"> <div class="sample_box_hl1" style=""> Item 1 Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod tempor </div> <div class="sample_box_hl1" style=""> Item 2 Lorem ipsum dolor sit amet, consect adipiscing </div> <div class="sample_box_hl1" style=""> Item 3 Lorem ipsum dolor sit amet, consect adipiscing elit </div> <div class="sample_box_hl1" style=""> Item 4 Lorem ipsum dolor sit amet, consect </div> </div> <div style="display:flex;flex-direction:row;justify-content:flex-start;align-items:baseline;"> <div class="sample_tall_box_1" style="">Item 1</div> <div class="sample_tall_box_3" style="">Item 2</div> <div class="sample_tall_box_4" style="">Item 3</div> <div class="sample_tall_box_2" style="">Item 4</div> </div>

align-items:flex-start

Item 1

Item 2

Item 3

Item 4

align-items:flex-end

Item 1

Item 2

Item 3

Item 4

align-items:center

Item 1

Item 2

Item 3

Item 4

align-items:stretch

Item 1 Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod tempor

Item 2 Lorem ipsum dolor sit amet, consect adipiscing

Item 3 Lorem ipsum dolor sit amet, consect adipiscing elit

Item 4 Lorem ipsum dolor sit amet, consect

align-items:baseline

Item 1

Item 2

Item 3

Item 4

Align Content

This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

This property only takes effect on multi-line flexible containers, where flex-wrap is set to either wrap or wrap-reverse. A single-line flexible container (i.e. where flex-wrap is set to its default value, no-wrap) will not reflect align-content.

.container { align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline; }

normal (default): items are packed in their default position as if no value was set.
flex-start / start: items packed to the start of the container. The (more supported) flex-start honors the flex-direction while start honors the writing-mode direction.
flex-end / end: items packed to the end of the container. The (more support) flex-end honors the flex-direction while end honors the writing-mode direction.
center: items centered in the container
space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end
space-around: items evenly distributed with equal space around each line
space-evenly: items are evenly distributed with equal space around them
stretch: lines stretch to take up the remaining space

align-content:flex-start

Item 1

Item 2

Item 3

Item 4

Item 2

Item 3

align-content:flex-end

Item 1

Item 2

Item 1

Item 3

Item 4

Item 1

align-content:center

Item 1

Item 2

Item 3

Item 1

Item 2

Item 4

Item 1

Item 2

align-content:stretch

Item 1

Item 2

Item 3

Item 4

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

align-content:space-between

Item 1

Item 2

Item 1

Item 2

Item 3

Item 4

Item 3

align-content:space-around

Item 2

Item 3

Item 1

Item 2

Item 3

Item 2

Item 4

Item 3

Gap

The gap property explicitly controls the space between flex items. It applies that spacing only between items not on the outer edges.

The behavior could be thought of as a minimum gutter, as if the gutter is bigger somehow (because of something like justify-content: space-between;) then the gap will only take effect if that space would end up smaller.

It is not exclusively for flexbox, gap works in grid and multi-column layout as well.

.container { display: flex; ... gap: 10px; gap: 10px 20px; /* row-gap column gap */ row-gap: 10px; column-gap: 20px; }

Gap 3rem

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Row Gap 3rem

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Columns Gap 3rem

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Row Gap 3rem, Column Gap 4rem

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Order

By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.

.item { order: 5; /* default is 0 */ }

<div style="display:flex;flex-flow:row wrap;"> <div class="sample_box_2" style="order:1;">Order 1</div> <div class="sample_box_2" style="order:2;">Order 2</div> <div class="sample_box_2" style="order:1;">Order 1</div> <div class="sample_box_2" style="order:3;">Order 3</div> <div class="sample_box_2" style="order:1;">Order 1</div> <div class="sample_box_2" style="order:2;">Order 2</div> </div> <div style="display:flex;flex-flow:row wrap;"> <div class="sample_box_2" style="order:6;">Order 6</div> <div class="sample_box_2" style="order:4;">Order 4</div> <div class="sample_box_2" style="order:3;">Order 3</div> <div class="sample_box_2" style="order:1;">Order 1</div> <div class="sample_box_2" style="order:2;">Order 2</div> <div class="sample_box_2" style="order:1;">Order 1</div> </div> <div style="display:flex;flex-flow:row wrap;"> <div class="sample_box_2" style="order:6;">Order 6</div> <div class="sample_box_2" style="order:5;">Order 5</div> <div class="sample_box_2" style="order:4;">Order 4</div> <div class="sample_box_2" style="order:3;">Order 3</div> <div class="sample_box_2" style="order:2;">Order 2</div> <div class="sample_box_2" style="order:1;">Order 1</div> </div> <div style="display:flex;flex-flow:row wrap;"> <div class="sample_box_2" style="order:1;">Order 1</div> <div class="sample_box_2" style="order:1;">Order 1</div> <div class="sample_box_2" style="order:3;">Order 3</div> <div class="sample_box_2" style="order:1;">Order 1</div> <div class="sample_box_2" style="order:1;">Order 1</div> <div class="sample_box_2" style="order:-1;">Order -1</div> </div> <div style="display:flex;flex-flow:row wrap;"> <div class="sample_box_2" style="order:2;">Order 2</div> <div class="sample_box_2" style="order:1;">Order 1</div> <div class="sample_box_2" style="order:-2;">Order -2</div> <div class="sample_box_2" style="order:1;">Order 1</div> <div class="sample_box_2" style="order:-1;">Order -1</div> <div class="sample_box_2" style="order:1;">Order 1</div> </div>

Order 1

Order 2

Order 1

Order 3

Order 1

Order 2

Order 6

Order 4

Order 3

Order 1

Order 2

Order 1

Order 6

Order 5

Order 4

Order 3

Order 2

Order 1

Order 3

Order 1

Order -1

Order 2

Order 1

Order -2

Order 1

Order -1

Order 1

Flex Grow

This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, that child would take up twice as much of the space either one of the others (or it will try, at least).

.item { flex-grow: 4; /* default 0 */ }

Item 1-1

Item 2-2

Item 3-1

Item 4-2

Flex Shrink

This defines the ability for a flex item to shrink if necessary.

.item { flex-shrink: 3; /* default 1 */ }

Item

Flex Basis

This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means "look at my width or height property" (which was temporarily done by the main-size keyword until deprecated). The content keyword means "size it based on the item's content" - this keyword isn't well supported yet, so it's hard to test and harder to know what its brethren max-content, min-content, and fit-content do.

If set to 0, the extra space around content isn't factored in. If set to auto, the extra space is distributed based on its flex-grow value.

.item { flex-basis: | auto; /* default auto */ }

SVG Graphic showing how flex-basis works.

auto

2rem

auto

1rem

2rem

auto

15rem

auto

10%

auto

30%

auto

Flex Shorthand

This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto, but if you set it with a single number value, like flex: 5;, that changes the flex-basis to 0%, so it's like setting flex-grow: 5; flex-shrink: 1; flex-basis: 0%;.

It is recommended that you use this shorthand property rather than set the individual properties. The shorthand sets the other values intelligently.

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

Item

Align Self

This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

Please see the align-items explanation to understand the available values.

float, clear and vertical-align have no effect on a flex item.

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

Flex Start - Flex End

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Examples

Sliding Italian Flag

.flagItaly { width: 350px;height: 200px;border: 1px solid #555;font: 14px Arial; /* flexbox setup */ display: -webkit-flex; -webkit-flex-direction: row; display: flex; flex-direction: row; } .flagItaly > div { -webkit-flex: 1 1 auto; flex: 1 1 auto; /* Shorthand for items flex-grow flex-shrink || flex-basis */ width: 30px; -webkit-transition: width 0.7s ease-out; transition: width 0.7s ease-out; margin:0px;padding:5px; } /* colors */ .flagItaly > div:nth-child(1){ background : #009246; } .flagItaly > div:nth-child(2){ background : #F1F2F1; } .flagItaly > div:nth-child(3){ background : #CE2B37; } .flagItaly > div:hover {width: 200px;}

uno

due

tre

Three Column Layout

.page_container { display: flex; flex-flow: row; max-width: 1000px; height: 100%; margin: auto; } .pc_main { width: 60%; margin: 20px 0; padding: 7px; background: deepskyblue; } .pc_left { -webkit-flex: 1; flex: 1; } .pc_right { -webkit-flex: 2; flex: 2; } .pc_nav { margin: 20px 15px; padding: 7px; background: tan; }

<div class="page_container"> <nav class="pc_nav pc_left"> Left Nav </nav> <section class="pc_main"> <h5>Three column layout example</h5> <p> Flexbox makes a layout like this trivially easy. No messing about with floats, clearing or precise positioning! </p> </section> <nav class="pc_nav pc_right"> Right Nav </nav> </div>

Three column layout example

Flexbox makes a layout like this trivially easy. No messing about with floats, clearing or precise positioning!

Wrapping List Boxes

.flex_container1 { padding: 0; margin: 0; list-style: none; display: flex; flex-flow: row wrap; justify-content: space-around; } .flex_item1 { background: tomato;padding: 5px;width: 200px;height: 150px; margin-top: 10px; line-height: 150px; color: white; font-weight: bold;font-size: 3em;text-align: center; }

Responsive Navigation Bar

.fb_nav { list-style: none;margin: 0; background: deepskyblue; display: flex; flex-flow: row wrap; justify-content: flex-end; } .fb_nav a {text-decoration: none;display: block;padding: 1em;color: white;} .fb_nav a:hover {background: darken(deepskyblue, 2%);} @media all and (max-width: 1400px) { .fb_nav {justify-content: space-around;} } @media all and (max-width: 1250px) { .fb_nav { flex-flow: column wrap; padding: 0; } .fb_nav a { text-align: center; padding: 10px; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.1); } .fb_nav li:last-of-type a { border-bottom: none; } }

<ul class="fb_nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact</a></li> </ul>

Page Layout

.ex1_wrapper { display: flex; flex-flow: row wrap; font-weight: bold;text-align: center; } .ex1_wrapper > * {padding: 10px;flex: 1 100%;} .ex1_header {background: tomato;} .ex1_footer {background: lightgreen;} .ex1_main {text-align: left;background: deepskyblue;} .ex1_aside-1 {background: gold;} .ex1_aside-2 {background: hotpink;} @media all and (min-width: 600px) {.ex1_aside { flex: 1 auto; }} @media all and (min-width: 800px) { .ex1_main { flex: 3 0px; } .ex1_aside-1 { order: 1; } .ex1_main { order: 2; } .ex1_aside-2 { order: 3; } .ex1_footer { order: 4; } }

<div class="ex1_wrapper"> <header class="ex1_header">Header</header> <article class="ex1_main"> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </p> </article> <aside class="ex1_aside ex1_aside-1">Aside 1</aside> <aside class="ex1_aside ex1_aside-2">Aside 2</aside> <footer class="ex1_footer">Footer</footer> </div>

Header

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Page Layout II

#ex2_main { min-height:800px; margin:0px; padding:0px; display:flex; flex-flow:row; } #ex2_main > article { margin: 4px; padding: 5px; border: 1px solid #cccc33; border-radius: 7pt; background: #dddd88; flex: 3 1 60%; order: 2; } #ex2_main > nav { margin: 4px; padding: 5px; border: 1px solid #8888bb; border-radius: 7pt; background: #ccccff; flex: 1 6 20%; order: 1; } #ex2_main > aside { margin: 4px; padding: 5px; border: 1px solid #8888bb; border-radius: 7pt; background: #ccccff; flex: 1 6 20%; order: 3; } header#ex2_header, footer#ex2_footer { display: block; margin: 4px; padding: 5px; min-height: 100px; border: 1px solid #eebb55; border-radius: 7pt; background: #ffeebb; font-size:1.2rem; font-weight:900; } /* Too narrow to support three columns */ @media all and (max-width: 640px) { #ex2_main, #page { flex-flow: column; flex-direction: column; } #ex2_main > article, #ex2_main > nav, #ex2_main > aside { /* Return them to document order */ order: 0; } #ex2_main > nav, #ex2_main > aside, header#ex2_header, footer#ex2_footer { min-height: 50px; max-height: 50px; } }

<header id="ex2_header">header</header> <div id="ex2_main"> <article>article</article> <nav>nav</nav> <aside>aside</aside> </div> <footer id="ex2_footer">footer</footer>

header

article

Align Different Sized Cells

As A Table

Solfège of C major
Number	1	2	3	4	5	6	7	8
Note	C	D	E	F	G	A	B	C
Solfège	Do	Re	Mi	Fa	Sol	La	Ti	Do
Degree	Tonic	Supertonic	Mediant	Subdominant	Dominant	Submediant	Leading Tone	Tonic (Octave)

As A Flex Structure

Number

Note

Solfège

Sol

Degree

Tonic

Supertonic

Mediant

Subdominant

Dominant

Submediant

Leading Tone

Tonic (Octave)