CSS- Flexbox positioning

flex container properties

1) justify-content 2) align-items 3) flex-grow 4) flex-shrink 5) flex-basis 6) flex 7) flex-wrap 8) align-content 9)flex-direction 10) flex-flow

align-content: center;

All rows of elements will be positioned at the center of the parent element with no extra space between.

align-content: flex-start;

All rows of elements will be positioned at the top of the parent container with no extra space between.

align-content: 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.

align-content: 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.

flex-basis

Another way of specifying the width of a flex item is with the flex-basis property. flex-basis allows us to specify the width of an item before it stretches or shrinks.

align-items

It's possible to align flex items vertically within the container. The align-items property makes it possible to space flex items vertically. There are 5 values we can use for the align-items property: 1) flex-start 2) flex-end 3) center 4) baseline 5) stretch These five values tell the elements how to behave along the cross axis of the parent container.

justify-content: space-around;

Items will be positioned with equal space before and after each item, resulting in double the space between elements.

justify-content: space-between;

Items will be positioned with equal space between them, but no extra space before the first or after the last elements.

flex-shrink

Just as the flex-grow property proportionally stretches flex items, the flex-shrink property can be used to specify which elements will shrink and in what proportions. You may have noticed that flex items shrank when the flex container was too small, even though we had not declared the property. This is because the default value of flex-shrink is 1.

flex-flow: value1 value2;

Like the flex property, the flex-flow property is used to declare both the flex-wrap and flex-direction properties in one line. The flex-flow property is declared on flex containers. The first value in the flex-flow declaration is a flex-direction value and the second is a flex-wrap value. All values for flex-direction and flex-wrap are accepted.

flex-direction

The major axis and cross axis are interchangeable. We can switch them using the flex-direction property. If we add the flex-direction property and give it a value of column, the flex items will be ordered vertically, not horizontally. The flex-direction property can accept 1 values: 1) row 2) row-reverse 3) column 4) column-reverse

flex-wrap: wrap-reverse;

The same functionality as wrap, but the order of rows within a flex container is reversed. For example, in a 2-row flexbox, the first row from a wrap container will become the second in wrap-reverse and the second row from the wrap container will become the first in wrap-reverse.

justify-content

We can specify how flex items spread out from left to right, along the main axis. To position the items from left to right, we use a property called justify-content. The size of each individual flex item is not changed by this property. There are 5 possible values for the justify-content property: 1) flex-start 2) flex-end 3) center 4) space-around 5) space-between

Flexbox (Flexible Box Layout)

While flexbox is not meant to lay out entire pages, it is useful for positioning elements, whether individually or in groups. Flexbox is an elegant tool that makes it easy to address positioning issues that may have been difficult before. Any element can be a flex container. Flex containers are helpful tools for creating websites that respond to changes in screen sizes. There are two important components to a flexbox layout: 1) flex containers 2) flex items

align-content

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. The align-content property is declared on flex containers. The align-content property accepts 6 values: 1) flex-start 2) flex-end 3) center 4) space-between 5) space-around 6) stretch

align-content: flex-end;

All rows of elements will be positioned at the bottom of the parent container with no extra space between.

flex container

A flex container is an element on a page that contains flex items. To designate an element as a flex container, set the element's display property to flex or inline-flex. Once an item is a flex container, there are several properties we can use to specify how its children behave.

flex items

All direct child elements of a flex container are flex items. Child elements of flex containers will change size and location in response to the size and position of their parent container.

align-items: flex-end;

All elements will be positioned at the bottom of the parent container.

align-items: flex-start;

All elements will be positioned at the top of the parent container.

flex-grow

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. The flex-grow property allows us to specify if items should grow to fill a container and also which items should grow proportionally more or less than others. If a max-width is set for an element, it will not grow larger than that even if there is more space for it to absorb. This property is declared on flex items. Flex items do not grow unless the flex-grow property is declared because the default value of flex-grow is 0.

justify-content: flex-start;

All items will be positioned in order starting, from the left of the parent container, with no extra space between or before them.

justify-content: center;

All items will be positioned in order, in the center of the parent container with no extra space before, between, or after them.

justify-content: flex-end;

All items will be positioned in order, with the last item starting on the right side of the parent container, with no extra space between or after them.

flex-wrap: wrap;

Child elements of a flex container that don't fit into a row will move down to the next line.

flex-direction: row;

Elements will be positioned from left to right across the parent element starting from the top left corner (default).

flex-direction: row-reverse;

Elements will be positioned from right to left across the parent element starting from the top right corner.

flex-direction: column-reverse;

Elements will be positioned from the bottom to the top of the parent element starting from the bottom left corner.

flex-direction: column;

Elements will be positioned from top to bottom of the parent element starting from the top left corner.

display: inline-flex;

Flexbox provides the inline-flex value for the display attribute, which allows us to create flex containers that are also inline elements.

display: flex;

For an element to become a flex container, its display property must be set to flex. A div with the declaration display: flex; will remain block level; no other elements will appear on the same line as it. However, it will change the behavior of its child elements. Child elements will not begin on new lines.

align-content: 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).

align-items: 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.

nested flexboxes

It is also possible to position flex containers inside of one another, known as nested flexboxes. The items have properties that dictate how they will be positioned in the parent container and how their flex item children will be positioned in them. Flex containers can be nested inside of each other by declaring display: flex or display: inline-flex for children of flex containers.

flex-grow and flex-shrink considerations

Margins are unaffected by flex-grow and flex-shrink. Minimum and maximum widths will take precedence over flex-grow and flex-shrink. As with flex-grow, flex-shrink will only be employed if the parent container is too small or the browser is adjusted. The flex property is different from the flex value used for the display property.

flex-wrap: nowrap;

Prevents items from wrapping; this is the default value and is only necessary to override a wrap value set by a different CSS rule.

flex-wrap

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. This can be declared with the flex-wrap property. The flex-wrap property is declared on flex containers. The flex-wrap property can accept three values: 1) wrap 2) wrap-reverse 3) nowrap

align-items: baseline;

The bottom of the content of all items will be aligned with each other.

align-items: center;

The center of all elements will be positioned halfway between the top and bottom of the parent container.