Flex Layout

Question 1

What is the Flexbox Layout?

Answer 1

Aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

Question 2

What is the main idea behind the flex layout?

Answer 2

To give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.

Question 3

T or F: Flex lack flexibility to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

Answer 3

True

Question 4

When is flexbox layout most appropriate?

Answer 4

Flexbox layout is most appropriate to the components of an application, and small-scale, while the Grid layout is intended for larger scale layouts.

Question 5

The _____ defines a flex container. It enables a flex context for all its direct children.

Answer 5

display

Question 6

What are the two given values for display:?

Answer 6

flex(block) or inline-flex(inline)

Question 7

This establishes the main-axis, thus defining the direction flex items are placed in the flex container.

Answer 7

flex-direction

Question 8

T or F: Flex is a single-direction layout concept.

Answer 8

True

* Think of flex items as primarily laying out either in horizontal rows or vertical columns.

Question 9

What are the values for flex-direction:?

Answer 9

row, row-reverse, column, and column-reverse

Question 10

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with which property?

Answer 10

flex-wrap

Question 11

What are the values for flex-wrap?

Answer 11

nowrap (default): all flex items will be on one line

wrap: flex items will wrap onto multiple lines, from top to bottom.

wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

Question 12

What is the shorthand for the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes?

Answer 12

flex-flow: ||

Question 13

This property defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

Answer 13

justify-content:

Question 14

What are the values of justify-content: ?

Answer 14

flex-start, flex-end, start, end, left, right, center, space-between, space-around, and space-evenly

Question 15

What are the values safe and unsafe?

Answer 15

Using safe ensures that however you do this type of positioning, you can’t push an element such that it renders off-screen (e.g. off the top) in such a way the content can’t be scrolled too (called “data loss”).

Question 16

This property defines the default behavior for how flex items are laid out along the cross axis on the current line. The justify-content version for the cross-axis.

Answer 16

align-items:

Question 17

What are the values for align-items:?

Answer 17

stretch (default): stretch to fill the container (still respect min-width/max-width)

flex-start / start / self-start: items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules.

flex-end / end / self-end: items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.
center: items are centered in the cross-axis

baseline: items are aligned such as their baselines align

Question 18

This property aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

Answer 18

align-content

Question 19

What are the values of align-content?

Answer 19

flex-start / start: items packed to the start of the container. The (more supported) flex-start honors the flex-direction while start honors the writing-mode direction.

flex-end / end: items packed to the end of the container. The (more support) flex-end honors the flex-direction while end honors the writing-mode direction.
center: items centered in the container

space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end

space-around: items evenly distributed with equal space around each line

space-evenly: items are evenly distributed with equal space around them
stretch (default): lines stretch to take up the remaining space

Question 20

The property that controls the order in which they appear in the flex container

Answer 20

order: ;

Question 21

This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

Answer 21

flex-grow: ;

Question 22

This defines the ability for a flex item to shrink if necessary

Answer 22

flex-shrink: ;

Question 23

This property defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means “look at my width or height property” (which was temporarily done by the main-size keyword until deprecated). The content keyword means “size it based on the item’s content” - this keyword isn’t well supported yet, so it’s hard to test and harder to know what its brethren max-content, min-content, and fit-content do.

.item {

Answer 23

flex-basis: | auto;

Question 24

What is the shorthand for lex-grow, flex-shrink and flex-basis combined?

Answer 24

flex: flex-grow flex-shrink flex-basis;

It is recommended that you use this shorthand property rather than set the individual properties. The shorthand sets the other values intelligently.

Question 25

This property allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

Answer 25

align-self: auto | flex-start | flex-end | center | baseline | stretch;

Note that float, clear and vertical-align have no effect on a flex item.