Flexbox

Question 1

flex-wrap

Answer 1

The container property that dictates if a set of elements will be forced to share the same line, or if they can wrap into multiple lines

Question 2

flex-wrap values

Answer 2

nowrap, wrap, or wrap-reverse

ex.
container {
flex-wrap: wrap;
}

“nowrap” is the default

Question 3

flex-direction

Answer 3

Property that defines the direction and origin of the main axis.

Question 4

{display: flex;}

Answer 4

Property assigned in a container to make it a flex container

Question 5

justify-content

Answer 5

Container property that aligns the items in a flex container, there are many values that assign given space differently. (space-around, space-between, etc)

<p>Aligns along the <i>main axis</i>. </p>

Tip: When you see or use “justify-content” think about the main axis and where it is in your code.

Question 6

justify-content values

Answer 6

flex-start, flex-end
center 
space-between
space-around 
space-evenly
(initial 
inherit) 

ex.
container {
justify-content: center;
}

Question 7

align-content

Answer 7

This container property modifies the behavior of the flex-wrap property - but instead of aligning the flex items, it aligns the flex lines.

Meaning it controls the white space in lines of flex items.

Aligns along the cross axis.

Note: There must be multiple lines of items for this to take effect.

Question 8

flex-direction values

Answer 8

row, row-reverse
column, column-reverse
initial
inherit

Question 9

The flexbox module nests ___ elements deep

Answer 9

One

Question 10

What property and value must be assigned to an element to make it a flex container?

Answer 10

display: flex;

Question 11

Any element nested one level deep in a flex container is considered a what?

Answer 11

Flex item

Question 12

What are the two main directions of flex-direction?

Answer 12

Row and column.

Row is the default.

Question 13

What CSS property is shorthand for flex-direction and flex-wrap?

Answer 13

Flex-flow: DIRECTION-VALUE WRAP-VALUE;

Example

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

The above code will run the children elements in a default row, and wrap them to multiple lines

Question 14

align-items

Answer 14

Container property that controls the alignments of the items or elements inside of a flex container.

Tip: When you see align-items or align-content, be mindful of where the cross axis exists in your code.

Question 15

align-content values

Answer 15

stretch
flex-start, flex-end
space-around
space-between
center

Question 16

align-items values

Answer 16

stretch
flext-start, flex-end
center
baseline

Question 17

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

What is the basic effect the above code will have in the container class?

Answer 17

Content inside the elements should be centered along both the main axis and cross axis - so it will appear in the center-middle of the box.

Question 18

See ‘justify’ think: ____-axis

Answer 18

main-axis

Question 19

See ‘align’ think: ____-axis

Answer 19

cross-axis

Question 20

space-between

Answer 20

<p>This value assigns an even amount of space <strong><u>between</u></strong> elements. </p>

The elements sitting on the beginning and end of the row or column will run alongside the beginning of the row with no margin on the left and right respectively.

Question 21

space-around

Answer 21

<p>Assigns equal value <strong><u>around</u></strong> every element, including the elements at the beginning of the row or column, all will have <i>equal space on all sides.</i></p>

Question 22

Flex item properties control what?

Answer 22

Item properties control the flex items themselves, and how content will look in each individual flex item.

Question 23

<p>Name some flex <strong><i>item</i></strong> properties:</p>

Answer 23

order
flex-grow
flex-shrink
flex-basis 
align-self

Question 24

Name some flex CONTAINER properties

Answer 24

flex-direction
justify-content
flex-wrap
align-items 
align-content

Question 25

What does the item property “order” allow devs to do?

Answer 25

It allows them to target individual items (child elements in a flex container) and change their order specifically, regardless of where they ‘live’ in the HTML.

The default order given is 0, so anything less than 0 (-1, -2) will come first (or second, third, etc, depending on the number you assign each item).

Assign a number to every element to avoid using negatives if you prefer.

Question 26

What is the {flex-grow: ;} property, and how is it used?

Answer 26

This property allows for flex items to take different amounts of available space depending on their importance, or the size of their content.

Example: For a blog you may want the sidebar to be half the size of the main content box, while still sharing the same line.

A number will be assigned to each child.

For example

sidebar {
flex-grow: 1;
}

main-content {
flex-grow: 8;
}

The main-content will take 8x as much of the white space as the sidebar.

Note: Flex-grow uses ratios to assign value

Question 27

What is the {align-self: ;} property?

Answer 27

<p>Item property targeting <strong><u>one</u></strong> item inside of a flex container. </p>

Changing an items code to {align-self:flex-end;}, for example, will align the item at the end of the row, even if it comes first in the HTML.

Question 28

What is the {flex-shrink: ;} property?

Answer 28

Much like flex-grow, this item property lets a developer assign which elements will shrink more or less than others when screen space (viewport height or width) is limited.

Default value is 1, so negative numbers cannot be used. An element with a flex-shrink of 2 will shrink TWICE AS MUCH as element with a value of 1.

Tip: This property uses ratios to establish value.

Question 29

Why might a developer use the {order: ;} property in flexbox to change the visual order of elements on a page?

Answer 29

To improve screen-reader accessibility.

For example, on a blog we would want the screen-reader to convey the main content of the blog before reading the sidebar content.

Question 30

flew-grow grows items along the ___-axis.

Answer 30

<p>Flex-grow grows elements by ratios along the <strong><u>main-axis</u></strong></p>

.

Question 31

<p><i>True</i> or <i>False</i>: Flex-grow must be applied to the items themselves?</p>

Answer 31

True

Flex-grow only takes place when assigned to the elements inside of a flex container, and it is given value using ratios.

Question 32

Describe what the {object-fit: ;} property does and why it is useful?

Answer 32

Object-fit allows for sizing images to fit a container using ratios, which is useful because it preserves the image’s ratios for prettier, non-squished images on the page!

Question 33

Give an example of an {object-fit: ;} value

Answer 33

fill
contain
cover
scale-down 
none