Intro To Flexbox

Vocab

• Flexbox
• Bootstrap
• display: flex;
• justify-content
• flex-wrap
• flex-direction
• flex-flow

Warm Up

• What strategies have you used so far to position elements on the page?
• How do you feel about positioning in CSS?
• Rate your abilities to position elements on the page

Flexbox

• Introduced as syntax in 2015.
• Flexbox allows us to manipulate the position of tags without all the knowledge of a larger grid system.
• We can use a grid system (Bootstrap, CSS Grid, etc), which works fine but requires more digging into docs and base knowledge about how it works.

Using Flexbox

Setup

• Clone down this repo. Open the index.html file from your command line (For atom, atom open index.html).
• Check out the CSS and HTML files to see what is going on.

Let’s play

• Check out the index.html and custom.css
• Right now, we have two sections, each with 6 boxes (each 100px in width).
• We have not set the width on the .boxes sections so they are taking up the entire width of the page.

Display: flex;

• First things first, we want all of those boxes in the section class="boxes-1 to be in a row, not a column but because of the default properties of a div being block, each one of these boxes is stacked on top of each other.

.boxes-1 {
  display: flex;
}

• Each child of a flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.

• This tells our boxes-1 to turn into a flex container that we can now play with
• By default, this property aligns elements inline within that container

• What happened?
• Our boxes are set to their width of 100px and now in a row.
• We can also adjust the width and height of the section that is containing the boxes and the boxes themselves.

Flex-wrap

• Let’s change the size of our boxes to 500px and see what happens
• No matter how big the original boxes were, they will all fit into that section unless we change that option!

.boxes {
  display: flex;
  flex-wrap: wrap;
}

Justify-Content

• We can play with where the contents sits within this section!
• We want to center the boxes in this section.

.boxes-1 {
  display: flex;
  justify-content: center;
}

• Other options: space-around, space-between, flex-start(default), flex-end

Flex-direction

• By default, the direction is row but we can use other options such as column and both in reverse, column-reverse and row-reverse

• Let’s reverse our row in boxes-1

    .boxes-1 {
      flex-direction: row-reverse;
    }
  

• A shorthand for both flex-wrap and flex-direction is flex-flow

All Boxes Flex

• What about the other section of boxes?
• Let’s flex .all-boxes and apply the some flexbox rules to it.

.all-boxes {
  display: flex;
}

Back to Dog Party

• With the time left, take another look at Dog Party and see if you can apply Flexbox to your layout.

Wrap Up

• What are the 5 main properties to use with Flexbox which we learned today? (There are many more, check out the resources below)
  • What does each do?
  • What are the possible arguments you can pass each property?

Resources

• A Guide to Flexbox
• Another challenge: flex calendar
• A game to learn Flexbox