FlexBox

Question 1

How do you initiate flexbox?

Answer 1

Display: flex

Question 2

Make containers within main container into columns or rows?

Answer 2

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

Question 3

Describe the flex-box axes.

Answer 3

Main = x
Cross = y

Question 4

What does justify content do?

Answer 4

Distributes content across main axis. Imagine boxes distributed horizontally
|■ ■ ■ ■|

Question 5

Default justify content distribution?

Answer 5

justify-content: flex-start

|■ ■ ■ |

Question 6

Name 6 justify-content properties

Answer 6

justify-content:

a) flex-start
b) flex-end
c) center
d) space-between
e) space-around
f) space-evenly

Question 7

Describe this justify content:

|■ ■ ■ |

Answer 7

justify-content: flex-start

Question 8

Describe this justify content:

| ■ ■ ■|

Answer 8

justify-content: flex-end

Question 9

Describe this justify content:

| ■ ■ ■ |

Answer 9

justify-content: center

Question 10

Describe this justify content:

|■ ■ ■|

Answer 10

justify-content: space-between

Question 11

Describe this justify content:

| ■ ■ ■ |

Answer 11

justify-content: space-around

left & right only have half as much space

Question 12

Describe this justify content:

| ■ ■ ■ |

Answer 12

justify-content: space-evenly

Question 13

What are the first 3 flexbox properties to initialize your design?

Answer 13

1. Display: flex;
2. flex-direction: row;
3. Set size of child elements and parent elements
4. justify-content: space-evenly,

Question 14

What does flex-wrap do?

Answer 14

Determines if elements will wrap along main axis onto a new line (if horizontal) or new column (if vertical)

Question 15

What is the default flex-wrap property value

Answer 15

flex-wrap: nowrap

Question 16

Describe

flex-wrap: nowrap

Answer 16

_
■
■
■
■
■
_

Question 17

Describe
flex-wrap: wrap

from:
_
■
■
■
■
■
_

Answer 17

_
■ ■ ■
■ ■
_

Question 18

Describe

flex-wrap: wrap-reverse

Answer 18

If you had a column of containers, it’ll make it so that the containers fill on the right side first, then remaining columns wrap to the middle.

If you had a row of containers, it’ll make it so that the containers fill on the bottom and then wrap to the middle

Question 19

Name the first 4 flex properties

Answer 19

1. Display: flex
2. Flex-direction: row, row-reverse, column, column-reverse
3. Set size of child elements and parent element
4. Justify content: flex-start, flex-end, center, space-between, space-around, space-evenly - SET DISTRIBUTION OF YOUR WRAP
5. flex-wrap: nowrap (decide if you want contents to wrap)

Question 20

Describe Align-Items

Answer 20

Align items for distributing content along the cross axis [y]. Similar to justify-content which is to distribute along main axis [x].

Question 21

Name different align-item property values

Answer 21

1. flex-start (top if row, side if column)
2. flex-end
3. center
4. baseline (aligns bottom of content)

Question 22

Describe align-content

Answer 22

distribute space along cross axis [y] but only when we have multiple rows or columns

align-content: flex-start:

__________
■ ■ ■
■ ■
__________

Question 23

Name align-content property values

Answer 23

flex-start
space-between
flex-end
flex-center

Question 24

Describe align-self

Answer 24

Changing the alignment of one container in a set of containers
■ ■ ■ ■ ■
■

Question 25

Describe flex-basis

Answer 25

This sets the initial size of an element before it is placed in the flex container.

Question 26

Describe flex-grow

Answer 26

If there is space left in the flex-container, we can determine how the boxes fill up the remaining space (proportions). One box could have flex-grow: 1, another could have flex-grow: 5, etc and they would all grow in that proportion. Set a min-width property on each box so that each box will AT LEAST be that big. So as you shrink you window, each box will only shrink to its min-width. As you grow the window, each window will grow according to its flex-grow proportion.

Determines the rate at which boxes grow as the browser gets bigger. This will override size properties and make your boxes grow to take up available space in the parent container. So you can make 3 squares sitting next to each other take up the entire parent container in various ratios. As you resize the parent container (via changing the window size) the boxes will revert to their size properties

Question 27

Describe flex-shrink

Answer 27

Determines the rate at which the boxes shrink as the browser gets smaller.

So if we start with the wrapper having a width: 100%, max-width: 1000px.

We’d set our 3 boxes to have a width of 333px so each takes up 1/3.

Then we could add a flex-shrink in different proportions so each box will shrink at different rates.

FYI, netninja says he doesn’t really use flex shink

Question 28

What width property goes with flex-grow?

Answer 28

min-width: XXpx;

As page gets smaller, the boxes will revert back to the minimum width specified. As page gets larger, the boxes will grow.

Question 29

What width property goes with flex-shink?

Answer 29

max-width: XXpx;

As page gets larger, boxes will revert back to their max width. As page gets smaller, they will shrink to your specified ratio.

Question 30

What happens if you make the window larger or smaller?

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

.box{
height: 100px
min-width: 200px;
flex-grow: 1;

Answer 30

Larger:

Smaller:

Question 31

How do you use flex-wrap with flex-grow?

Answer 31

Flex container has wrap. Boxes have flex-grow with a minimum width defined. As window shrinks, when boxes can’t shrink anymore (min width constraint), they will wrap to the next line.

Question 32

Describe flex-basis?

Answer 32

Flex-basis is similar to minimum width in that it gives a starting width. But when you apply a grow property of 1, they’ll grow according to their flex-basis ratios. Another difference is that if you shrink a window when your boxes have a min-width, it’ll eventually make you scroll. Flex basis will shrink as normal flex items.

Question 33

How do you combine flex-basis, flex-grow, and flex-shrink?

Answer 33

flex: grow shrink basis

This one will set grow & shrink to 1 but basis to 0
flex: 1

Example:
flex-container{
display: flex;
flex-wrap;
}

.box{
flex: 1 0 200px;
}

Boxes will wrap at 200px

Question 34

Describe how to make a navigation bar using flex

Answer 34

nav ul{
display: flex;
justify-content: flex-start;
}

nav li{
flex: 1 1 0;
}

Question 35

Use flex display on your flex container ul tag so that all of your li tags become flex elements

Answer 35

f