Flexbox

Question 1

What is the aim of the flexbox layout?

Answer 1

To provide 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

Is the flexbox layout direction agnostic?

Answer 2

Yes, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based).

Question 3

What is the most appropriate layout for the components of an application and small-scale layouts, Flexbox or Grid?

Answer 3

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

Question 4

What is a “flex container”?

Answer 4

A parent element with flex properties.

Question 5

What is a “flex item”?

Answer 5

A child element with flex properites

Question 6

If “regular” layout is based on both block and inline flow directions, the flex layout is based on ___?

Answer 6

flex-flow directions

Question 7

How do you define a flex container?

Answer 7

.container {
    display: flex; /* or inline-flex */
}

Question 8

What path will flexbox items follow in a layout?

Answer 8

Items will be laid out following either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end).

Question 9

What is the main axis of a flex container?

Answer 9

The main axis of a flex container is the primary axis along which flex items are laid out.

Question 10

Does the main axis follow a horizontal path?

Answer 10

It is not necessarily horizontal; it depends on the flex-direction property.

Question 11

What is the cross axis?

Answer 11

The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction.

Question 12

Is display a property for the parent or the child?

Answer 12

Parent – This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.

Question 13

Is order a property for the parent or the child?

Answer 13

Child – By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.

.item {
    order: 5; /* default is 0 */
}

Question 14

Is flex-direction a property for the parent or the child?

Answer 14

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

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

Question 15

Flexbox is (aside from optional wrapping) a _______-direction layout concept.

Answer 15

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

Question 16

Is flex-grow a property for the parent or the child?

Answer 16

Child – This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion.

.item {
    flex-grow: 4; /* default 0 */ 
}

Question 17

If all items have flex-grow set to __, the remaining space in the container will be distributed equally to all children.

Answer 17

Set to 1.

Question 18

Is flex-wrap a property for the parent or the child?

Answer 18

Parent – 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 this property.

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

Question 19

Is flex-shrink a property for the parent or the child?

Answer 19

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

.item {
    flex-shrink: 3; /* default 1 */
}

Question 20

Is flex-flow a property for the parent or the child?

Answer 20

Parent – This is a shorthand for the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes. The default value is row nowrap.

.container {
    flex-flow: flex-direction; /* or flex-wrap */
}

Question 21

Is flex-basis a property for the parent or the child?

Answer 21

Child – This 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”.

.item {
    flex-basis: | auto; /* default auto */
}

Question 22

Is justify-content a property for the parent or the child?

Answer 22

Parent – This 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.

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

Question 23

Is flex a property for the parent or the child?

Answer 23

Child – This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto, but if you set it with a single number value, it’s like 1 0.

.item {
    flex: none | [? ||]
}

Question 24

Is align-self a property for the parent or the child?

Answer 24

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

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Question 25

Is align-items a property for the parent or the child?

Answer 25

Parent – This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).

.container {
    align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

Question 26

Is align-content a property for the parent or the child?

Answer 26

Parent – This 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.

.container {
    align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

Question 27

Will the align-content property have an effect on a single row?

Answer 27

No, this property has no effect when there is only one line of flex items.