Introducing

CSS Flexbox Layout

PRESENTED BY

Matthew Ellison, UA Europe

MATTHEW ELLISON

• Consultant and trainer for User Assistance

tools and technologies since 1993
• User of MadCap products since 2006
• Certified Flare Instructor
• Based in the UK
WHAT WE’LL COVER THIS AFTERNOON

• The limitations of html’s block model

• Responsive layout with Media Queries
• Introducing Flexbox
• Scenarios where Flexbox is useful
• Flexbox properties:
building a solution from the ground up
• Browser support
• Implementing CSS Flexbox in Flare
THE LIMITATIONS OF HTML’S BLOCK MODEL

h1

div
Block

p
img
Inline
SIDE-BY-SIDE LAYOUT TRADITIONALLY SOLVED BY…

• Tables (deprecated for layout)

• Float property
ELEMENTS RENDERED IN NORMAL FLOW

h1

div

p
FLOAT PROPERTY

h1

p
CSS: div
float: left

p
CSS:
clear: both
FLOAT PROPERTY

h1

p
CSS: div
float: left

p
CSS:
clear: both
EXAMPLE OF FLOAT-BASED LAYOUT

float: right
WHAT ABOUT CSS POSITIONING?

• Introduced in CSS2
• position property:
– static
– relative
– absolute
– fixed
• Not easy to understand or work with
RESPONSIVE LAYOUT WITH MEDIA QUERIES

Heading text heading text heading text

div div
Column 1 text column 1 text Column 2 text column 2 text
column 1 text column 1 text column 2 text column 2 text
16% column 1 text column 1 text 16% column 2 text column 2 text 16%
42% float: left 42%

100%

body

viewport
VIEWPORT LESS WIDE

Heading text heading text heading text

Column 1 text column Column 2 text column

1 text column 1 text 2 text column 2 text
16% column 1 text column 116% column 2 text column 2 16%
text column 1 text text column 2 text

42% float: left 42%

100%
PAST BREAKPOINT

Heading text heading text heading

text

Column 1 text column 1 text column 1

text column 1 text column 1 text
16 column 1 text 16
% %
100% float: none
Column 2 text column 2 text column 2
text column 2 text column 2 text
column 2 text

100%

100%
INTRODUCING CSS FLEXBOX

• Creates intelligent boxes that are stretchable, squeezable and capable of

changing visual order
• Simple solution for layout paradigms that CSS has always struggled with:
– vertical centering
– equal heights
CONTAINER AND ITEMS
Container
• Within a flex container, items typically:
– Arrange themselves in rows or columns item
– expand to fill available free space
or
item
– shrink to prevent overflow

item
• Flex container's margins do NOT collapse
with the margins of its content
item
A Visual Demonstration of Flexbox
principles…
WIDE SCREEN (DESKTOP)

A B C
D E F
G
LESS WIDE

A B C
D E F
G
NARROWER

A B
C D
E F
G
NARROW SCREEN (PHONE)

A
B

F
G
FLEXBOX SCENARIOS

• Vertical centering
• Unknown number of items within a container
(photos, landing page, toolbar/menu items)
• Flexible layout for website components
(header, sidebar, main, footer)
VERTICAL CENTERING

Vertical centering without

flexbox is hopeful at best

Demo by David Walsh at

davidwalsh.name/css-vertical-center-flexbox
CONTINUOUS REARRANGEMENT OF ITEMS WITHIN A CONTAINER
AS SCREEN SIZE CHANGES

UA Europe speakers at
www.uaconference.eu/speakers.html
FLEXIBLE LAYOUT FOR WEBSITE COMPONENTS

Demo by Karen Menezes at

http://codepen.io/imohkay/details/JoYoRE
BASIC SPECIFICATIONS THAT WE CAN SPECIFY
USING CSS

• Arrangement of items (row or column)

• …and whether they are allowed to wrap

A B C
D
BASIC SPECIFICATIONS THAT WE CAN SPECIFY
USING CSS

• Base width of items

(used to calculate how many items can be fitted within each row)

Base width

A B C
D
BASIC SPECIFICATIONS THAT WE CAN SPECIFY
USING CSS

• Whether the width of items is allowed to grow to fill the available space

A B C
D
BASIC SPECIFICATIONS THAT WE CAN SPECIFY
USING CSS

• How items are justified within the container if they are not allowed to grow

flex-start

A B C
D
BASIC SPECIFICATIONS THAT WE CAN SPECIFY
USING CSS

• How items are justified within the container if they are not allowed to grow

center

A B C
D
BASIC SPECIFICATIONS THAT WE CAN SPECIFY
USING CSS

• How items are justified within the container if they are not allowed to grow

space-between

A B C
D
Building the Flexbox CSS Code…
HTML CONTENT

container
<div id="container">
item <div class="item">
Content
</div>
item <div class="item">
Content
</div>
<div class="item">
item Content
</div>
<div class="item">
item Content
</div>
</div>
CSS - CONTAINER PROPERTY: FLEX

div#container
{
container display: flex;
}
item item item item
The only property
div.item that you need to
{ specify
}

Default behavior:
• Arrangement by row
• No wrap
• Justified to start of flex container
• Items shrink to fit within container
• Items do not grow to fill available space
CONTAINER PROPERTY: FLEX-DIRECTION

container
div#container
item {
display: flex;
flex-direction: column;
item }

div.item
item {
}

item
CONTAINER PROPERTY: FLEX-WRAP

div#container
container {
display: flex;
item item flex-direction: row;
flex-wrap: wrap;
}
item item
div.item
{
}
CONTAINER PROPERTY: JUSTIFY-CONTENT

div#container
container {
display: flex;
item item flex-direction: row;
flex-wrap: wrap;
justify-content:
item item space-between;
}

div.item
{
}
ITEM PROPERTY: FLEX-GROW

div#container
container {
display: flex;
item item flex-direction: row;
flex-wrap: wrap;
justify-content:
item item space-between;
} This property
is now
div.item redundant
{
All items within a flex-grow: 1;
row grow by same }
amount to fill the
available space
ITEM PROPERTY: FLEX-BASIS

div#container
container {
display: flex;
item item item flex-direction: row;
flex-wrap: wrap;
justify-content:
item space-between;
}
Items grow
div.item
to fill row
{
flex-grow: 1;
Used to calculate
how many items
flex-basis: 28%;
will fit within a row }
FLEX-SHRINK PROPERTY

• As long as flex-shrink is not 0,

items will shrink if:
– an item is on its own in a row, and
the browser width is less than the
flex-basis property
or
– if flex-wrap has a value of nowrap and the total of
flex-basis properties for all items is greater than the
width of the container
ALL CONTAINER FLEXBOX PROPERTIES

display: flex;

flex-direction: row | column | row-reverse |

column-reverse;

flex-wrap: wrap | nowrap | wrap-reverse;

justify-content: flex-start | flex-end | center |

space-between | space-around;

align-items: stretch | flex-start | flex-end |

center | baseline;

align-content: stretch | flex-start | flex-end |

center | space-between | space-around;
ALL ITEM FLEXBOX PROPERTIES

order: <number>; default is 0

flex-grow: <number>; default is 0 (it will not be allowed to grow)

flex-shrink: <number>; default is 1 (it will be allowed to shrink)

flex-basis: auto | <width/height in px or %>;

(auto means it will be sized automatically

based on its width property)

align-self: auto | flex-start | flex-end | center |

baseline | stretch;
DEMO OF A MORE COMPLETE SOLUTION
ABSOLUTE FLEX

• flex-basis of 0:
– a way of easily controlling relative widths of items
– ALL space within the container is assigned to items according to their relative flex-grow
values
– width property of the items is ignored
ABSOLUTE FLEX

container
item item item item

div#container { display: flex; }

div.item { flex-basis: 0; }

div.item:nth-of-type(odd) { flex-grow: 1; }

div.item:nth-of-type(2) { flex-grow: 2; }

div.item:nth-of-type(4) { flex-grow: 5; }
FLEX SHORTHAND

• W3C encourages authors to use the flex shorthand property for items
• shorthand “correctly resets any unspecified components to accommodate
common uses”

flex: <flex-grow> <flex-shrink> <flex-basis>

• For example:

flex: 1 1 auto
COMMON VALUES

Shorthand Equivalent to

flex: initial flex: 0 1 auto

flex: auto flex: 1 1 auto

flex: none flex: 0 0 auto

flex: <+ve number> flex: <+ve number> 1 0

BROWSER SUPPORT

• Flexbox is supported in all of the latest browsers

• If you need to support older browsers, check out caniuse to see what your
options are
ISSUES WORKING WITH FLEXBOX IN FLARE

• Flex property not recognized

• Layout is not shown correctly in XML Editor

(but is correct in Preview)
REAL LIFE IMPLEMENTATION OF CSS FLEXBOX IN FLARE

Items based on Menu

proxy (generated
automatically on build)
REFERENCES AND FURTHER READING

• https://www.w3.org/TR/css-flexbox/
• https://cvan.io/flexboxin5/ (Great!)
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
• http://caniuse.com/#feat=flexbox
• https://www.smashingmagazine.com/2015/03/harnessing-flexbox-for-todays-
web-apps/
• https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
Thanks for attending!
Final questions?
Matthew Ellison
[email protected]

[email protected]