Flexbox

Question 1

What is flexbox?

Answer 1

The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.

When we describe flexbox as being one dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column. This can be contrasted with the two-dimensional model of CSS Grid Layout, which controls columns and rows together.

Flexbox is unlike previous display values (inline, inline-block, and so on), which only affect the elements they are applied to. Instead, a flex container asserts control over the layout of the elements within.

Source MDN

Question 2

What does display: flex; do to an element?

Answer 2

Applying display: flex; to an element turns it into a flex container, and its direct children turn into flex items.

• The flex container fills the available width like a block element.
• The flex items may not necessarily fill the width of their flex container.
• The flex items are all the same height, determined naturally by their contents.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 3

What does display: inline-flex do to an element?

Answer 3

display: inline-flex creates a flex container that behaves more like an inline-block element rather than a block. It flows inline with other inline elements, but it won’t automatically grow to 100% width. Flex items within it generally behave the same as with display: flex.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 4

How can you create a flex container?

Answer 4

By applying

display: flex;

to the container element, it becomes a fex container. Its child elements will become the same height by default.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 5

What are the two axes of flexbox?

Answer 5

When working with flexbox you need to think in terms of two axes — the main axis and the cross axis. The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it.

source MDN

Question 6

How do you define flexbox’s main axis?

Answer 6

With the flex-direction property.

Question 7

What are the possible values of the flex-direction property?

Answer 7

• row - Main axis will run along the row in the inline direction (same as writing mode, left-to-right for english).
• row-reverse - Main axis will run along the row in the reverse inline direction (reverse of writing mode, right-to-left for english).
• column - Main axis will run from the top of the page to the bottom — in the block direction.
• column-reverse - Main axis will run from the bottom of the page to the top — in the reverse block direction.

Source MDN

Question 8

What is the flexbox cross axis if you define the main axis with flex-direction: row/row-reverse;?

Answer 8

The cross axis runs perpendicular to the main axis, therefore if your flex-direction (main axis) is set to row or row-reverse the cross axis runs down the columns.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 9

What is the flexbox cross axis if you define fine the main axis with flex-direction: column/column-reverse;?

Answer 9

If your main axis is column or column-reverse then the cross axis runs along the rows.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 10

What is a flex item?

Answer 10

The direct children of a Flex Container (elements with display: flex or display: inline-flex set on them) become flex items.

Continuous runs of text inside flex containers will also become flex items.

Source MDN

Question 11

What are the peculiarities of flexbox start/end of lines?

Answer 11

If the flex-direction is row and I am working in English, then the start edge of the main axis will be on the left, the end edge on the right.

If I were to work in Arabic, then the start edge of my main axis would be on the right and the end edge on the left.

After a while, thinking about start and end rather than left and right becomes natural, and will be useful to you when dealing with other layout methods such as CSS Grid Layout which follow the same patterns.

Source MDN

Question 12

What is a flex container?

Answer 12

An area of a document laid out using flexbox is called a flex container. To create a flex container, we set the value of the area’s container’s display property to flex or Inline-flex.

.container {
 display: flex;
}

Source MDN

Question 13

What does flex-wrap: wrap do?

Answer 13

If you add flex-wrap with a value of wrap to the flex container. Should your items be too large to all display in one line, they will wrap onto another line.

NOTE: If the flex-direction is column or column-reverse, then flex-wrap: wrap will allow the flex items to overflow into a new column. However, this only happens if something constrains the height of the container; otherwise, it grows to contain its flex items.

Source MDN

Question 14

What does flex-wrap: nowrap do?

Answer 14

If flex-wrap is set to nowrap, which is also the initial value, and the flex-items will shrink to fit the container because they are using initial flexbox values that allows items to shrink.

NOTE: Using nowrap would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.

Source MDN

Question 15

What are the possible values of flex-wrap?

Answer 15

flex-wrap accepts the following values:

• nowrap - The flex items are laid out in a single line which may cause the flex container to overflow. This is the default value.
• wrap - The flex items break into multiple lines.
• wrap-reverse - Behaves the same as wrap but cross-start and cross-end are permuted.

Source MDN

Question 16

What does the flex-flow property set and what are its default values?

Answer 16

The flex-flow CSS shorthand property specifies the direction of a flex container, as well as its wrapping behaviour.
This property is a shorthand for the following CSS properties:

flex-direction
flex-wrap

Its initial values are:

flex-direction: row;
flex-wrap: nowrap;

example: flex-flow: row nowrap;

Source MDN

Question 17

What properties can be applied to flex-items?

Answer 17

• flex-grow : sets the flex grow factor of a flex item’s main size
• flex-shrink: sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.
• flex-basis : sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.

Source MDN

Question 18

What does flex-basis property do?

Answer 18

The flex-basis CSS property sets the initial main size of a flex item. Size is calculated with content box rules unless otherwise set with box-sizing property.

Source MDN

Question 19

What are the possible values of flex-basis?

Answer 19

The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing. Its possible values are:

• 0 (cero) - the flex item initial width will be the width of the content
• auto (initial value) - The browser looks to see if the items have a size (width/height). If the items don’t have a size then the content’s size is used as the flex-basis.
• fixed size for example 200px - the initial width of the component will be whatever size we’ve set

Source MDN

Question 20

What does flex-grow property do?

Answer 20

With the flex-grow property set to a positive integer, flex items can grow along the main axis from their flex-basis. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.

If we gave all of our items a flex-grow value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.

The flex-grow property can be used to distribute space in proportion. If we give our first item a flex-grow value of 2, and the other items a value of 1 each, 2 parts of the available space will be given to the first item, 1 part each the other items.

Source MDN

Question 21

What are the possible values of flex-grow?

Answer 21

<numbers>. Negative values are invalid. Defaults to 0.

Source MDN

Question 22

What are the possible values of flex-shrink?

Answer 22

<numbers>. Negative values are invalid. Defaults to 1.

Source MDN

Question 23

what does the flex-shrink property do?

Answer 23

The flex-shrink property controls how space is taken away.

If we do not have enough space in the container to lay out our items, and flex-shrink is set to a positive integer, then the item can become smaller than the flex-basis.

Different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for flex-shrink will shrink faster than its siblings that have lower values.

Source MDN

Question 24

What does the flex shorthand property set and what are its initial values?

Answer 24

The flex shorthand allows you to set the three values in this order — flex-grow, flex-shrink, flex-basis.
And its initial values are:

 flex-grow: 0;
 flex-shrink: 1;
 flex-basis: auto;

Source MDN

Question 25

What are the possible values of flex shorthand property?

Answer 25

• initial - The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting flex: 0 1 auto.
• auto - The item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting flex: 1 1 auto.
• none - The item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting flex: 0 0 auto.
• <flex-grow> - Defines the flex-grow of the flex item. Negative values are considered invalid. Defaults to 1 when omitted. (initial is 0)
• <flex-shrink> - Defines the flex-shrink of the flex item. Negative values are considered invalid. Defaults to 1 when omitted. (initial is 1)
• <flex-basis> - Defines the flex-basis of the flex item. A preferred size of 0 must have a unit to avoid being interpreted as a flexibility. Defaults to 0 when omitted. (initial is auto)

Source MDN

Question 26

How can you specify the values of flex shorthand property?

Answer 26

The flex property may be specified using one, two, or three values.

One-value syntax- The value must be one of:

• a <number>: In this case it is interpreted as flex: <number> 1 0;
• a <width>: In this case it is interpreted as flex: 1 1 <width>;
• one of the keywords: none, auto, or initial.

Two-value syntax:

The first value must be:

• a <number> and it is interpreted as flex-grow value

The second value must be one of:

• a <number>: then it is interpreted as flex-shrink value
• a valid value for width: then it is interpreted as flex-basis value

Three-value syntax - the values must be in the following order:

• a <number> for flex-grow.
• a <number> for flex-shrink.
• a valid value for width for flex-basis.

Source MDN

Question 27

What does align-items property do?

Answer 27

In flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.

Source MDN

Question 28

What are the possible values of align-items property?

Answer 28

The align-items property accepts 5 different values:

• flex-start: cross-start margin edge of the items is placed on the cross-start line
• flex-end: cross-end margin edge of the items is placed on the cross-end line
• center: items are centered in the cross-axis
• baseline: items are aligned such as their baselines align
• stretch (default): stretch to fill the container (still respect min-width/max-width)

Note: If you check MDN you’ll see that there are other possible values but, the ones listed above are most common ones.

Source CSS-Tricks

Question 29

What does CSS justify-content property do?

Answer 29

The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.

Source MDN

Question 30

What are the possible values of justify-content property?

Answer 30

The justify-content property accepts five different values:

• flex-start (default): items are packed toward the start line
• flex-end: items are packed toward to end line
• center: items are centered along the line
• space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
• space-around: items are evenly distributed in the line with equal space around them
• space-evenly: items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same

Note: If you check MDN you’ll see that there are other possible values. But the ones above are the most common ones.

Source CSS-Tricks

Question 31

What sets the base size of a flex-item?

Answer 31

1. Is flex-basis set to auto, and does the item have a width set? If so, the size will be based on that width.
2. Is flex-basis set to auto or content (in a supporting browser)? If so, the size is based on the item size.
3. Is flex-basis a length unit, but not zero? If so this is the size of the item.
4. Is flex-basis set to 0? if so then the item size is not taken into consideration for the space-sharing calculation.

Source MDN

Question 32

How can you control the size and flexibility of the flex-items long the main axis?

Answer 32

With the following CSS properties:

• flex-grow: How much of the positive free space does this item get?
• flex-shrink: How much negative free space can be removed from this item?
• flex-basis: What is the size of the item before growing and shrinking happens?

You can use the flex shorthand property to define them all at once.

Source MDN

Question 33

What should you keep in mind when working with a vertical flexbox?
(flex-direction: column/column-reverse)

Answer 33

In CSS, working with height is fundamentally different than working with widths. A flex container will be 100% the available width, but the height is determined naturally by its contents. This behaviour does not change when you rotate the main axis.

The flex container’s height is determined by its flex items. They fill it perfectly. In a vertical flexbox, flex-grow and flex-shrink applied to the items will have no effect unless something else forces the height of the flex container to a specific size.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 34

What does CSS align-content property do?

Answer 34

If you enable wrapping (using flex-wrap), this property controls the spacing of each row inside the flex container along the cross axis.

Note: This property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap).

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 35

what are the possible values of align-content property?

Answer 35

The align-content property most common values are:

• flex-start: lines packed to the start of the container
• flex-end: lines packed to the end of the container
• center: lines packed to the center of the container
• space-between: lines evenly distributed; the first line is at the start of the container while the last one is at the end
• space-around: lines evenly distributed with equal space between them
• stretch (default): lines stretch to take up the remaining space

NOTE: According to MDN there are other possible values. But the ones above are the most common ones.

Source CSS-Tricks

Question 36

What does CSS order property do?

Answer 36

By using the order property, you can change the order the items are stacked. You may specify any integer, positive or negative. If multiple flex items have the same value, they’ll appear according to source order.

Initially, all flex items have an order of 0. Specifying a value of -1 to one item will move it to the beginning of the list, and a value of 1 will move it to the end. The numbers don’t necessarily need to be consecutive.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 37

What are the concerns of order property?

Answer 37

Accessibility concerns
Using the order property will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (css) order is important, then screen reader users will not have access to the correct reading order.

User navigation concerns
Navigation using the Tab key will still follow the source order in most browsers, which can be confusing.

Source MDN

Question 38

What is the full-page layout problem FOUC?

Answer 38

As the browser loads content, it progressively renders it to the screen, even as it continues to download the remainder of the page. Assume you have a three-column layout, built using a flexbox (flex-direction: row). If the content for two of these columns loads, the browser might render them before it loads the content for the third column. Then, when the rest of the content loads, the browser recalculates the sizes of each flex item and renders the page again. The user will see a two-column layout momentarily, then the columns will resize (perhaps drastically), and the third column will appear.

This effect is also known as FOUC (Flash of Unstyled Content). Jake Archibald, a developer advocate for Google Chrome, has written about this at https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 39

flex-start and flex-end compared to start and end

Answer 39

flex-start and flex-end take into account the flex direction while start and end take into account the writing mode and script direction

For example:

.content {
 display: flex;
 flex-direction: row;
}

Both justify-contents: flex-start; and justify-contents: start; will distribute the flex-item starting from the main axis start edge (left side) . But with the following css.

.content {
 display: flex;
 flex-direction: row-reverse;
}

justify-contents: flex-start; will distribute the flex-item starting from the main axis start edge (right side). While and justify-contents: start; will distribute the items from the writing mode and script direction start (left side for english speakers)

Note: on reverse direction the order of the items will always be reversed it is just the alignment that will change between flex-start and start.

Source csslayout.new