In-depth analysis of Flex layout in CSS3

The Flexbox layout module aims to provide a more efficient way to distribute space within a container. Even if the size of the container is unknown, or changes dynamically.

The main idea behind Flex Layout is to enable a container to change the width/height (and order) of its items to optimally fill the available space (mainly to accommodate various display devices and screen sizes). Flex containers expand items to fill available free space or shrink them to prevent overflow.

Most importantly, flexbox layouts are direction-agnostic compared to regular layouts (block-based layouts in the vertical direction and inline-based layouts in the horizontal direction). While these work well for pages, they lack the flexibility to support large or complex applications (especially with orientation changes, resizing, stretching, shrinking, etc.).

principle

Since flexbox is an entire module, rather than a single property, it involves a lot of things, including its entire set of properties. Some of these are set on the container (the parent element, called the "flex container"), while others are set on the child elements (called "flex items"). If "normal" layout is based on block flow direction and inline flow direction, flex layout is based on "flex-flow direction". Take a look at this diagram from the specification, which explains the main idea behind flex layout.

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

main-axis: The main axis of the flex container is the main axis of the flex item layout. Note that it is not necessarily horizontal; it depends on the flex-direction property.

main-start, main-end: From main-start to main-end, flex items are placed in the container

main-size: The width or height of a flex item is based on the main size. The main dimension property of a flex item is either "width" or "height", whichever is greater.

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

cross-start | cross-end: The elastic line is filled with items and placed into the container from cross-start to cross-end.

cross-size: The width or height of the flex item, whichever of the cross sizes is used is the cross size of the item. The cross size attribute is either "width" or "height" of the cross size.

Parent property (flex container)

1. flex-direction

flex-direction determines the main axis direction, that is, the direction in which flex items are arranged. In addition to the default row direction, flex items can also be arranged vertically or reversely (row-reverse/column-reverse)

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

css:

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

Effect:

2. flex-wrap

If we don’t want to compress the flex item when the window becomes narrower, but want the flex item that exceeds the boundary to wrap, we can set the flex container’s flex-wrap

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

css:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

Effect: When the page gets smaller, it will wrap

3. Flex-flow

flex-direction and flex-wrap can be combined into one property flex-flow, for example: flex-flow: row-reverse wrap

4. Justify content

This defines the alignment along the main axis. It helps distribute the extra remaining free space when all flex items in a row are inflexible, or are flexible but have reached their maximum size. It also has some control over the arrangement of items when they overflow the line.

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

css:

.flex-container {
  display: flex;
  justify-content: center;
}

Effect:

5. align-items

After centering in the flex direction is achieved, centering perpendicular to the main axis can be achieved using align-items.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end
} 

css:

.flex-container {
  display: flex;
  align-items: center;
}

Effect:

6. align-content

In the case of multiple lines, the lines of a flex container will be aligned internally, similar to how content alignment is adjusted for individual items in the main axis. If flex has only one row, it will not work.

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

Subclass attributes (flex item)

1. order

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

css:

.one {
  order: 3
}

.two {
  order: 1
}

.three {
  order: 2
}

Effect:

2. flex-grow

In all the examples above, the three flex items only occupy a small part of the flex container. If we want the flex item to fill the flex container, we need to set the flex-grow attribute for the flex item. As the name suggests, grow means growth and is used to control the extension of the size of flex item.

css:

.one {
 flex-grow: 2;
}

.two {
  flex-grow: 8;
}

.three {
  flex-grow: 2;
}

Effect:

Key Points

• If flex-grow is a negative number, it will be invalid.
• The extra space allocated to each item is not divided according to the ratio of flex-grow, but the ratio of each item's own width * its own flex-grow result! Tested it yourself! ! !

3. flex-shrink

The opposite of flex-grow is flex-shrink, which is used to control the compression of sub-elements after the size of the sub-elements exceeds the flex container. Key points:

flex-shrink is invalid if it is a negative number 4. flex-basis

This defines the default size of an element before the remaining space is allocated.

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

The auto keyword means "look at its own width or height attribute".

5. flex

This is short for the combination of flex-grow, flex-shrink, and flex-basis. The second and third parameters (stretch and stretchbase) are optional. It is recommended to use this shorthand property instead of setting the individual properties.

.flex-item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

6. align-self

This allows overriding the default alignment (or alignment specified by align-items) of individual flex items.

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

css:

.flex-container {
  display: flex;
  align-items: center;
}

.one {
  align-self:flex-end;
}

Effect:

This is the end of this article about an in-depth analysis of Flex layout in CSS3. For more relevant CSS flex layout content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!