Flexbox

Question 1

Make a container use flexbox

Answer 1

display: flex

Question 2

What does the flex-grow property do in a nutshell?

Answer 2

If the container is 500px wide
3 elements are 100 px wide
The flex properties decide what to do with the remaining space.

Question 3

What do flex-basis, grow and shrink do?

Answer 3

Flex basis sets the original size of the box

auto makes it the size of the content

Flex grow defines the proportion (as a ratio) much of the remaining EMPTY space an item should take up

Flex shrink defines the proportion (as a ratio) of the remaining EXTRA space that should be cut from each item to make them fit within the window

Question 4

What happens when you don’t define a flex on an item in a flex container?

Answer 4

flex: 0 1 auto;

The container is as wide as the content

Question 5

Whats the flex grow number represent (first number)

Answer 5

The amount of the remaining space the element should take up. If set to 1 it will take up the rest of the space. If a decimal, a proportion of it.

If multiple all above the total remaining space, it’s the relative proportion of the remaining space between flex grow numbers.
if all containers are 1 or 2 or 3 etc. they will all take up the same amount of space.
But 1, 2, 3 means the first takes up 1/6, then next 2/6, and the last 3/6 of the total width.
0 means it’s got a width of 0 all the time

Question 6

How do flex shrink and grow interact with the width property?

Answer 6

It depends on the basis
between 0% and 100% they take the percent of the width as the percent of the frame.
at auto it flex-basis tells the item to check for a width declaration

If some are auto and some are %

Question 7

what does flex basis do?

Answer 7

The flex-basis is what defines the size of that item in terms of the space it leaves as available space
The initial value of this property is auto — in this case the browser looks to see if the items have a size. In the example above (three 100 pixel-wide items in a container which is 500 pixels wide), all of the items have a width of 100 pixels and so this is used as the flex-basis.

Question 8

Define

flex-grow (number)
flex-shrink (number)
flex-basis (percent)
in one line

Answer 8

flex: 1 1 0%

Question 9

Whats the flex shrink number represent (second number)

Answer 9

when the flex container shrinks beyond some limit, it sets the rate at which they shrink
0 means it doesn’t shrink

Question 10

Which direction (x or y) is the main axis and which the cross axis?

Answer 10

It depends on flex-direction
row, x is main
column, y is main

Question 11

What happens if you change the height of 1 flexbox on a row?

Answer 11

they all change height

Question 12

What happens when the flex basis are larger or smaller than 100%?

Answer 12

Depends on the flex grow and shrink

Question 13

Control the order of flex items

Answer 13

order: 1
numbers can be negative and decimals
The lower number goes to the left (by default)

Question 14

Set a flex container direction

Answer 14

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

Question 15

Set the wrapping of a flex container

Answer 15

flex-wrap: nowrap
wrap
reverse-wrap

Question 16

shorthand for wrapping and direction

Answer 16

flex-flow: row wrap

Question 17

In a column flex-container, what does flex-basis refer to?

In a row flex container?

Answer 17

when we changed the flex-direction to column, flex-basis refers to height instead of width

Question 18

Is a flex container 1d or 2d?

Answer 18

1d
Even when it wraps
You should consider each wrapped line it’s own flex container (in terms of the way it behaves, not necessarily how you apply styles to the “container”)

Question 19

What are the values of

flex: auto
flex: 1

flex: 3
flex: initial
flex: none

Answer 19

1 1 auto
1 1 0%

3 1 0%

0 1 auto

0 0 auto

Question 20

Align the content on the main axis

Align the content on the cross axis

Align the content on the cross axis within their own bit of cross space

Answer 20

justify-content

align-content

align-items

Question 21

What happens if the width is defined and when not? (assuming row)

what is the difference between the following for the justify or align content and which is the default:

flex-start

flex-end

center

space-around

space-between

space-evenly

What happens with height defined and when not (assuming row)

And these for the align-items and which is the default:

stretch

flex-start

flex-end

center

Answer 21

without width set, they are the width of the item.

flex-start- packs them all together at the start (the default).

flex-end- packs them all together at the end

center- packs all the items together in the middle

space-between- packs the first and last item at the beginning and end. The rest evenly spaced in between.

space-around- centers with even spacing around each. Edges are half the space between items. As if each item has an invisible border

space-evenly- centers with even spacing around each. Edges are the same space as between items.

Without height set, they are the height of the item

There isn’t REALLY a cross where things can be justified. Flex works on a 1 line basis. If things wrap it’s basically a new container. So first and foremost, if items wrap, the space is split evenly to make room for each line.

Without height set, they are the height of the item. They WILL push the “even” split vertical lines to give themselves space.

stretch, the default. Makes items stretch to the top and bottom of the contain. If a height is defined, they are flex-start.

flex-start, items are pushed to the start. multiple lines do not mush all together but go to the start of their respective cross space.

flex-end, items are pushed to the end of their cross space

center, items are pushed to the center of their cross space

Question 22

what does gap do?

also column-gap

and row-gap

Answer 22

gap: 8px

with center will create gap of 8 px in between all the items

with space-between, it will set the minimum gap in between the items. If the gap is already greater than ‘gap’, it will not appear to change

Question 23

Set the alignment of a single flexbox item only

Answer 23

align-self:

Question 24

With no justify-content set, what is the width of the items? (assuming row)

With no align-items set, what is the height of the items? (assuming row)

Answer 24

Each the width of the content

All the heights of the tallest content