CSS Flexbox

What is flexbox?

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

The align-content property is used to align the flex lines.

The align-content property

The order Property

The order property specifies the order of the flex items. The first flex item in the code does not have to appear as the first item in the layout. The order value must be a number, default value is 0.

The first value in the flex-flow declaration is a flex-direction value and the second is a flex-wrap value.

True

The flex-wrap property specifies whether the flex items should wrap or not.

True

We learned that all flex items shrink proportionally when the flex container is too small. However, if the parent container is larger than necessary then the flex items will not stretch by default.

True

we used the align-items property to space flex items from the top to the bottom of a flex container. align-items is for aligning elements within a single row. If a flex container has multiple rows of content, we can use align-content to space the rows from top to bottom.

True

flex containers have two axes:

a major axis and a cross axis. By default, the major axis is horizontal and the cross axis is vertical.

To align flex items from top to bottom or vertically within the container we use

align-item property

We use the flex property to declare the values for flex-grow, flex-shrink, and flex-basis (in that order) all in one line.

big { flex: 2 1 150px; }

For an element to become a flex container, its display property must be set to flex.

display: flex;

To make flex containers display inline we use

display: inline-flex;

To align flex items from left to right or horizontally within the container we use

justify-content property

Flexbox uses two types of boxes:

"flex containers" and "flex items". The job of a flex container is to group a bunch of flex items together and define how they're positioned.

There are five values for the justify-content property:

1- flex-start — aligns the flex items at the beginning of the container with no extra space before, between, or after them. (this is default) 2- flex-end — aligns the flex items at the end of the container with no extra space before, between, or after them. 3- center — aligns the flex items at the center of the container with no extra space before, between, or after them. 4- space-around — items will be positioned with equal space before and after each item, 5- space-between — items will be positioned with equal space between them, but no extra space before the first or after the last elements.

There are five values we can use for the align-items property:

1- flex-start — all elements will be positioned at the top of the parent container. 2- flex-end — all elements will be positioned at the bottom of the parent container. 3- center — Items align at the vertical center of the container. 4- baseline — The baseline value will align flex items along their content's baseline(The line upon which most letters "sit" and below which descenders extend.) 5- stretch — if possible, the items will stretch from top to bottom of the container (this is the default value; elements with a specified height will not stretch; elements with a minimum height or no height specified will stretch).

align-content accepts six values:

1- flex-start — all rows of elements will be positioned at the top of the parent container with no extra space between. 2- flex-end — all rows of elements will be positioned at the bottom of the parent container with no extra space between. 3- center — all rows of elements will be positioned at the center of the parent element with no extra space between. 4- space-between — all rows of elements will be spaced evenly from the top to the bottom of the container with no space above the first or below the last. 5- space-around — all rows of elements will be spaced evenly from the top to the bottom of the container with the same amount of space at the top and bottom and between each element. 6- stretch — if a minimum height or no height is specified, the rows of elements will stretch to fill the parent container from top to bottom (default value).

The flex-direction property can accept four values:

1- row — stacks the flex items horizontally (from left to right) - the default value. 2- row-reverse — stacks the flex items horizontally (but from right to left) 3- column — stacks the flex items vertically (from top to bottom) 4- column-reverse — stacks the flex items vertically (but from bottom to top).

The flex-wrap property can accept three values:

1- wrap — flex items that don't fit into a row will move down to the next line. 2- wrap-reverse — specifies that the flex items will wrap if necessary, but in reverse order. 3- nowrap — specifies that the flex items will not wrap (this is default).

The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

The flex property

The flex-basis property defines the default size of an element before the remaining space is distributed.

The flex-basis property

The flex-direction property defines in which direction the container wants to stack the flex items.

The flex-direction property

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

The flex-flow property

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items. The value must be a number, default value is 0.

The flex-grow property

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items. The value must be a number, default value is 1(That is why they shrink by default as the container shrinks).

The flex-shrink property

A flex container will remain block level while flex items will remain in-line.

True

Any element can be a flex container. Flex containers are helpful tools for creating websites that respond to changes in screen sizes.

True

It is also possible to position flex containers inside of one another.

True

Sometimes, we don't want our content to shrink to fit its container. Instead, we might want flex items to move to the next line when necessary.

True