Introducing CSSFlexbox Layout
Introducing CSSFlexbox Layout
PRESENTED BY
h1
div
Block
p
img
Inline
SIDE-BY-SIDE LAYOUT TRADITIONALLY SOLVED BY…
• 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
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
100%
PAST BREAKPOINT
100%
100%
INTRODUCING CSS FLEXBOX
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
UA Europe speakers at
www.uaconference.eu/speakers.html
FLEXIBLE LAYOUT FOR WEBSITE COMPONENTS
A B C
D
BASIC SPECIFICATIONS THAT WE CAN SPECIFY
USING CSS
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
display: 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.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: 1 1 auto
COMMON VALUES
Shorthand Equivalent to
• If you need to support older browsers, check out caniuse to see what your
options are
ISSUES WORKING WITH FLEXBOX IN FLARE
• 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
matthew@uaeurope.com
matthew@uaeurope.com