Introduction to Flexbox

WordCamp Pittsburgh 2016

Beth Soderberg | @bethsoderberg

What is Flexbox?

Flexbox is a CSS layout model that allows for webpage elements to resize predictably when a page is resized or viewed on different sized viewports.

A layout model?

CSS Layout Models

  • block layout
  • inline layout
  • positioned layout
  • table layout
  • flexible box layout
  • grid layout (coming soon!)

Flexbox

  • enables elements to grow or shrink based on available space
  • is direction-agnostic
  • allows for shifts in orientation and size based on available space
  • is best used as a component of a larger layout

Flexbox Requires New Terminology

Some CSS Properties are Flexbox Inflexible

  • column and it's related column-* properties
  • clear
  • float
  • vertical-align

Defining a Flexible Box


display: flex;
                    

display: inline-flex;

* Vendor prefixing for this property is added to the flex property itself, not the display attribute. For example: display: -webkit-flex.

Our Example



  
    
content

    
content

    
content



                    

p { 
    border: 5px solid #ffffff; 
    margin-bottom: 0; 
    box-sizing: border-box;
}

“That which yields is not always weak.”
― Jacqueline Carey

“Agile does not mean laissez-faire, flexibility and freedom are based on the well-defined principles.”
― Pearl Zhu

“The measure of intelligence is the ability to change.”
― Albert Einstein

Make Flex Container


div { display: flex; }

“That which yields is not always weak.”
― Jacqueline Carey

“Agile does not mean laissez-faire, flexibility and freedom are based on the well-defined principles.”
― Pearl Zhu

“The measure of intelligence is the ability to change.”
― Albert Einstein

* The default flex-direction is row.

Reverse Row Direction


div { flex-direction: row-reverse; }

“That which yields is not always weak.”
― Jacqueline Carey

“Agile does not mean laissez-faire, flexibility and freedom are based on the well-defined principles.”
― Pearl Zhu

“The measure of intelligence is the ability to change.”
― Albert Einstein

Establish Vertical Main Axis


div { flex-direction: column; }

“That which yields is not always weak.”
― Jacqueline Carey

“Agile does not mean laissez-faire, flexibility and freedom are based on the well-defined principles.”
― Pearl Zhu

“The measure of intelligence is the ability to change.”
― Albert Einstein

You Can Reverse Direction on the Vertical Axis Too


div { flex-direction: column-reverse; }

“That which yields is not always weak.”
― Jacqueline Carey

“Agile does not mean laissez-faire, flexibility and freedom are based on the well-defined principles.”
― Pearl Zhu

“The measure of intelligence is the ability to change.”
― Albert Einstein

But What About Pearl?


p:first-child {
  order: 3;
}

p:nth-child(2) {
  order: 1;
} 
p:nth-child(2) {
  order: 2;
}}

“That which yields is not always weak.”
― Jacqueline Carey

“Agile does not mean laissez-faire, flexibility and freedom are based on the well-defined principles.”
― Pearl Zhu

“The measure of intelligence is the ability to change.”
― Albert Einstein

You can Use Percentages for Flex Children!


p { width: 33.333%; }

“That which yields is not always weak.”
― Jacqueline Carey

“Agile does not mean laissez-faire, flexibility and freedom are based on the well-defined principles.”
― Pearl Zhu

“The measure of intelligence is the ability to change.”
― Albert Einstein


p { width: 50%; }

“That which yields is not always weak.”
― Jacqueline Carey

“Agile does not mean laissez-faire, flexibility and freedom are based on the well-defined principles.”
― Pearl Zhu

“The measure of intelligence is the ability to change.”
― Albert Einstein

Your Content Can Go to Multiple Lines


div { flex-wrap: wrap; }
p { width: 50%; }

“That which yields is not always weak.”
― Jacqueline Carey

“Agile does not mean laissez-faire, flexibility and freedom are based on the well-defined principles.”
― Pearl Zhu

“The measure of intelligence is the ability to change.”
― Albert Einstein

And in Reverse!


div { flex-wrap: wrap-reverse; }
p { width: 50%; }

“That which yields is not always weak.”
― Jacqueline Carey

“Agile does not mean laissez-faire, flexibility and freedom are based on the well-defined principles.”
― Pearl Zhu

“The measure of intelligence is the ability to change.”
― Albert Einstein

Flex Flow


div { flex-flow: wrap; }
p { width: 50%; }

“That which yields is not always weak.”
― Jacqueline Carey

“Agile does not mean laissez-faire, flexibility and freedom are based on the well-defined principles.”
― Pearl Zhu

“The measure of intelligence is the ability to change.”
― Albert Einstein

* flex-flow is a shorthand property for flex-direction and flex-wrap. Detailed information on its syntax is available from the Mozilla Developer Network.

Flex for Equal Spacing


p { flex: 1; }

“That which yields is not always weak.”
― Jacqueline Carey

“Agile does not mean laissez-faire, flexibility and freedom are based on the well-defined principles.”
― Pearl Zhu

“The measure of intelligence is the ability to change.”
― Albert Einstein

* flex is a shorthand property for flex: flex-grow flex-shrink flex-basis;.

Flex Basis


p { flex-basis: 0; }

1

2

3


p { flex-basis: 150px; }

1

2

3


p { flex-basis: 33.33333%; }

1

2

3

Flex Grow


p { flex-grow: 0; flex-basis: 150px; }

1

2

3


p { flex-grow: 1; flex-basis: 150px;}

1

2

3


p { flex-basis: 150px; }
p:first-child { flex-grow: 1; }
p:nth-child(2) { flex-grow: 3; } 
p:nth-child(3) { flex-grow: 2; }

1

2

3


p { flex-basis: 0; }
p:first-child { flex-grow: 1; }
p:nth-child(2) { flex-grow: 3; } 
p:nth-child(3) { flex-grow: 2; }

1

2

3

Flex Shrink


p { 
    flex-grow: 1; 
    flex-shrink: 1; 
    flex-basis: 150px; 
}

1

2

3


div { width: 600px; }
p { flex-grow: 1; flex-shrink: 1; flex-basis: 150px; }
p:first-child { flex-shrink: 2; }

1

2

3


div { width: 300px; }
p { flex-grow: 1; flex-shrink: 1; flex-basis: 150px; }
p:first-child { flex-shrink: 2; }

1

2

3

Flex


                        flex: 1;

is the same as


                        flex: 1 1 0;
  • flex-grow: defaults to 1 when omitted
  • flex-shrink: defaults to 1 when omitted
  • flex-basis: defaults to 0 when omitted

* Detailed information on the syntax of the flex shorthand property is available from the Mozilla Developer Network.

What if a Flex Container's Items Don't Fill the Row?

1

2

3

Justify Content


div { justify-content: center; }

1

2

3


div { justify-content: space-between; }

1

2

3


div { justify-content: space-around; }

1

2

3


p { justify-content: flex-start; }

1

2

3


p { justify-content: flex-end; }

1

2

3

We also Need to Justify on the Cross-Axis

Base example code:


div { flex-wrap: wrap; }
p { width: 50%; }

Two
Lines

One Line

Three
Lines
Three

Four
Lines
Four
Lines

Align Items


div { align-items: center; }

Two
Lines

One Line

Three
Lines
Three

Four
Lines
Four
Lines

Align Items


div { align-items: flex-end; }

Two
Lines

One Line

Three
Lines
Three

Four
Lines
Four
Lines

* For all possible align-items values reference the Mozilla Developer Network documentation.

If One Needs to be Different


div { align-items: flex-end; }
p:nth-child(3) {
    align-self: flex-start;
}

Two
Lines

One Line

Three
Lines
Three

Four
Lines
Four
Lines

* For all possible align-self values reference the Mozilla Developer Network documentation.

If Everything Needs to Align to the Cross-Axis

Base example code:


div { height: 300px; background: #982733; }
p { height: 70px; }

1

2

3

4

Align Content


div { align-content: center; }

1

2

3

4


div { align-content: space-between; }

1

2

3

4

Browser Support!

Flexbox is supported in

  • Chrome
  • Edge
  • Firefox
  • Internet Explorer 11...mostly
  • Opera
  • Safari

And needs -webkit- and kinda needs -moz- vendor prefixes.

Still... test ALL THE THINGS!

Example: Vertically and Horizontally Centered Element


div { align-items: center; justify-content: center; }

Look, I'm centered!

Example: Full Width Navigation with Equal-Sized Buttons


ul { display: flex; }

ul li { flex: 1; }

ul.navlist li a { width: 100%; display: block; }

Example: Reordering Content for Accessibility




    
Post Title

    9/17
    
Blurb about post here.

Post Title

9/17

Blurb about post here.


.post { 
    display: flex; 
    flex-direction: column; 
}
h2 { order: 3; }
span.date { order: 1; }
p { order: 4; }
ul.tags { order: 2; }

Post Title

9/17

Blurb about post here.

Example: Equal Height Columns With Variable Length Content


div { justify-content: space-between; }
p { width: 30%; }

“That which yields is not always weak.”
― Jacqueline Carey

“Agile does not mean laissez-faire, flexibility and freedom are based on the well-defined principles.”
― Pearl Zhu

“The measure of intelligence is the ability to change.”
― Albert Einstein

Example: Sticky Footer


< body>
    
...

    
...

    
...

< /body>
                        

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1;
}

header content

main content

footer content

header content

main content

footer content

  • Headline

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt aliquam nisl, eget ullamcorper enim auctor non.

  • Headline

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt aliquam nisl, eget ullamcorper enim auctor non.

  • Headline

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt aliquam nisl, eget ullamcorper enim auctor non.

  • Headline

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt aliquam nisl, eget ullamcorper enim auctor non.

  • Headline

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt aliquam nisl, eget ullamcorper enim auctor non.

  • Headline

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt aliquam nisl, eget ullamcorper enim auctor non.



    
    
  • 
        
    headline
    
        
    content
    
        
    
    • 


                    

ul {
  display: flex;
  flex-flow: wrap;
  list-style: none;
  justify-content: space-between;
}

ul li {
  width: 30%;
  display: flex;
  flex-direction: column;
}

ul p {
  flex-grow: 1;
}

  • The Real Headline

    Lorem ipsum dolor sit amet.

  • Short Headline

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt aliquam nisl, eget ullamcorper enim auctor non.

  • Another Totally Variable Width Headline

    Suspendisse tincidunt aliquam nisl, eget ullamcorper enim auctor non.

  • There’s More!

    Lorem ipsum dolor sit amet, consectetur tincidunt adipiscing elit. Suspendisse tincidunt aliquam tincidunt nisl, eget ullamcorper enim auctor non.

  • Headlines Everywhere!

    Lorem ipsum tincidunt aliquam nisl, eget ullamcorper enim auctor non.

  • Even More Headlines

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt aliquam nisl, eget ullamcorper enim auctor non.

Where to Learn More

Documentation

General Tutorials

Browser Support Troubleshooting

Articles on When to Use Flexbox

Thank you!

@bethsoderberg

bethsoderberg.com

http://bethsoderberg.com/slides/2016/wordcamp-pittsburgh/index.html#/