Flexbox Layout

Programming 1 Web

Basic concepts of flexbox

© 2017
 Agenda
1. Flex layout algorithm
2. Container properties
3. Element properties: location
4. Element properties: responsive
5. Case study: page design

https://gitlab.com/kdg-ti/programming-1.1/web/examples/m5-flex-examples

2
Flex layout
algorithm
Inner and outer display values
• block, inline and inline-block are outer display
values: the element indicates how it wants to be
positioned in the flow layout of the outer element
(container, parent)
• In CSS3 inner display values have been added: they
modify the layout algorithm in the containing element
– they determine how the direct children of the element
are positioned and sized
– they replace the default flow layout algorithm

4
flex display values

flex block-level flex container.

inline-flex inline flex container.

• If display is set to one of these values the container will

layout its children using the flex algorithm
• flex: container that is itself layed out as a block by its
parent
• inline-flex: container that is itself layed out as an
inline element by its parent
5
flex CSS properties

● Flexbox layout provides a simple, yet powerful, alternative to some

CSS settings we have used before with the default flow layout
● You add layout directives for flex, using additional CSS properties,
all starting with flex-some-property
● Some of these properties apply to the container, others to the items
inside the container
● CSS-tricks is a good flex resource (in addition to MDN)

6
Flex container
properties
Container direction: flex-direction

value in bold is the default value

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

row row-reverse column column-reverse

8
Container direction: flex-direction
• A flexbox container arranges its children along one axis
– this axis is called main
– When there is no more room on the main axis, a new row or
column is started. It is added in the direction perpendicular to
main. That other axis is called cross
Flexbox axes

10
Flex-direction 1/2 nesting/flex-direction.css

.container { display: flex; } All elements with cl s ontainer will u e

.wrapper {
border: thick solid black; flex to layout their hildren
} This is an example of a stacked
.pillar {
flex-direction: column; layout, where multiple flexbox
border: thick solid blue; layouts are nested
}
.pillar-rev {
flex-direction: column-reverse;
border: thick solid blue;
}
.line {
flex-direction: row;
border: thick solid brown;
}
.line-rev {
flex-direction: row-reverse;
border: thick solid brown;
} HTML for this example on next slide. 11
Flex-direction 2/2 nesting/index.html

<div class="wrapper">
<div class="container pillar">
<div class="container line">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="container line-rev">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</div>
<div class="container pillar">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="container pillar-rev">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
12
</div>
Examine using browser development tools!

13
Container wrapping: Flex-wrap
.container { flex-wrap:
nowrap | wrap
| wrap-reverse;
}

14
direction + wrap shorthand: flex-flow

• Usage: flex-flow: <direction> <wrap>

• Example: flex-flow: row-reverse wrap-reverse
=> display left to right, bottom to top
– Try it out:

15
Container align on main: justify-content
.container { justify-content:
flex-start | flex-end |
center | space-between
space-around | space-evenly;
}
https://flexboxfroggy.com
do level 1-4

16
Container align on cross: align-items
.container { align-items:
flex-start| flex-end
| center | baseline
| stretch;
}

level 5-13

17
Container spacing (cross) : align-content
.container { align-content:
flex-start | flex-end
| center | space-between
| space-around | stretch;
}

18
Element
properties:
location
Element align on cross: align-self

• individual item overrules

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

20
Element (child) order: order
.item {order: <integer>;}

default = 0

Elements with equal

order are shown in the
order they appear in
HTML

21
Element margin
• In contrast with display:block no collapsed margins
(adjacent margins are both applied)
margin: auto;
– centers horizontally (similar to display:block; margin:auto;)
and vertically (impossible with display:block
margin:auto;)
• flex also uses (max/min) width, height and padding

remaining levels

22
Element
properties:
responsive
Element size: flex-grow
.item {flex-grow: <number>;} default = 0 (never grow)
Not negative
Excess space is allocated to elements using a factor
element's flex-grow/sum of all flex-grow's

24
Element size: flex-shrink
Defau =1
.item {flex-shrink: <number>;} Cannot be neg tive

How do elements shrink if there is not enough space?

Lacking space is deallocated from elements using a factor
element's flex-shrink/sum of all flex-shrink's

25
Element size: flex-basis
Base size before grow/shrink along main axis
item width (row)
.item {flex-basis:
or height (column)
<size specification>|auto|content;
} size number with unit size of contents
(px,%...)

26
Element size: flex combined property

• This is the recommended notation

flex: flex-grow flex-shrink flex-basis
– flex-grow and flex-shrink are numbers that default to 1
if not using flex property,
flex-grow property default = 0
– flex-basis defaults to auto
– flex takes 1-3 values.

27
Element size: flex combined property

• flex short form examples

flex: flex-grow flex-basis => flex: flex-grow 1 flex-basis
flex: number => flex: flex-grow-number 1 auto
flex: sizeWithUnit => flex: 1 1 flex-basis-sizeWithUnit
flex: auto => 1 1 auto (grow and shrink)
flex: none => 0 0 auto (fixed size)

28
Case study:
page design
 page/index.html
Starter page
<div class="container" >
<header>
<h1>Flexbox layout</ h1>
<p>A small flexbox demo</ p>
</header>
<main>
<h2>Main article</ h2>
<p>Lorem ...</ p>
</main>
<div class="promo1"><h3>Aside</h3></div>
<div class="promo2"><h3>Besides</ h3></div>
<footer><p>Legal disclaimer</ p></footer>
</div>

30
Use flex layout to obtain this layout/1

31
Use flex layout to obtain this layout/1

css/asides-on-row.css
.container {
display: flex;
flex-wrap: wrap;
}
header, main, footer {
flex: 100%;
ta e entire row
}
.promo1, .promo2 {
flex: 1;
grow t e u l wei ht
}
== 1 1 auto

32
Use flex layout to obtain this layout/2

33
Use flex layout to obtain this layout/2
page/main aside-on-row.html
css/main-aside-on-row.css
.container { main should be remove
display: flex;
but is overrid en b next rule anyw
flex-wrap: wrap;
}
header, main, footer,
.promo2 {
flex: 100%;
}
main {
flex: 2;
}
.promo1 {
flex: 1;
} grows twice a much as .promo1
both h ve fle -ba e: auto 34
Use flex layout to obtain this layout/3

35
Use flex layout to obtain this layout/3

css/main-asides-on-row.css
.container {
display: flex;
flex-wrap: wrap;
}
header, main, footer, .promo2
{
flex: 100%;
}
main {
flex: 3;
}
.promo1,.promo2 {
flex: 1;
}
36
Use flex layout to obtain this layout/4

37
Use flex layout to obtain this layout/4
css/main-middle.css
.container {
display: flex;
flex-wrap : wrap;
}
header, main, footer,.promo2 {
flex: 100%;
}
main {
flex: 3;
}
header{

promo1 before everything,

order: -2;
}
.promo1 { except header
flex: 2;
order: -1;
}
.promo2 {
flex: 1;
}
Complete assignments Web M4 02-05
38
Responsive CSS page design: Grid
• Although you can layout a page with flex, it is a one
dimensional strategy, better suited for parts of a page.
• For more complex flexbox layouts you need a stacked layout
where multiple flexboxes are nested
• For a responsive overall page layout there are 2-dimensional
strategies that are better suited:
– grid layout
– bootstrap framework

39
 Summary
1. Flex layout algorithm
2. Container properties
3. Element properties: location
4. Element properties: responsive
5. Case study: page design

40