This is the 25th day of my participation in the August Genwen Challenge.More challenges in August

Related articles:

  • 1. Understand CSS thoroughly
  • 2. Understand CSS thoroughly
  • 1. Understand CSS thoroughly
  • 1. Understand CSS thoroughly
  • 1. Understand CSS thoroughly

Can you tell us a little bit about flexible layouts?

What is it

Flexible Box, short for “Flexible layout,” provides an easy, complete, and responsive way to implement a wide variety of page layouts.

An element with a Flex layout is called a Flex container.

All of its child elements automatically become container members, called flex item items.

By default, there are two axes in the container, the main axis and the cross axis, in a 90-degree relationship. By default, items are aligned along the main axis, with flex-direction determining the direction of the main axis

Each axis has a beginning and an end, which is important for element alignment.

Second, properties,

The most common flex properties can be divided into container properties and container member properties

The container properties are:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction

Determine the orientation of the main axis (that is, the alignment of items)

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

The attributes correspond to the following:

  • Row (default) : The main axis is horizontal and the starting point is on the left
  • Row-reverse: The main axis is horizontal and the starting point is at the right end
  • Column: The main axis is in the vertical direction, and the starting point is in the upper edge.
  • Column-reverse: the main axis is vertical and the starting point is at the bottom

As shown below:

flex-wrap

Elastic elements are always arranged along the main axis, so if the main axis does not fit, use flex-wrap to determine whether items in the container can be wrapped

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

The attributes correspond to the following:

  • Nowrap (default) : no line breaks
  • Wrap: The first line is at the top
  • Wrap-reverse: newline with the first line at the bottom

The default is no line breaks, but you don’t let elements spill out of the container, you do involve elastic scaling of elements

flex-flow

Short form of the flex-direction and flex-wrap properties. The default value is row nowrap

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}
Copy the code

justify-content

Defines the alignment of items on the main axis

.box {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}
Copy the code

The attributes correspond to the following:

  • Flex-start (default) : left-aligned
  • Flex-end: right-aligned
  • Center: a center
  • Space-between: both ends are aligned with equal intervals between items
  • Space-around: Two items with equal spacing

The renderings are as follows:

align-items

Define how items are aligned on the cross axis

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
Copy the code

The attributes correspond to the following:

  • Flex-start: Alignment of the starting point of the cross axes
  • Flex-end: alignment of ends of crossed axes
  • Center: Alignment of the midpoint of the cross axis
  • Baseline: The baseline alignment of the first line of text of the project
  • Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container

align-content

Defines the alignment of multiple axes. This property has no effect if the project has only one axis

.box {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
Copy the code

Properties correspond to things like scare:

  • Flex-start: align with the starting point of the cross axis
  • Flex-end: aligns with the end of the cross axis
  • Center: aligns with the midpoint of the intersecting axis
  • Space-between: aligned with both ends of the intersecting axes, with evenly distributed spacing between axes
  • Space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders
  • Stretch (default) : Axis takes up the entire cross axis

The renderings are as follows:

The container member attributes are as follows:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order

Define the order of items. The smaller the value is, the more advanced it is. The default value is 0

.item {
    order: <integer>;
}
Copy the code

flex-grow

As mentioned above, when the container is set to flex-wrap: nowrap; When the container width is insufficient without a line feed, the elastic element is determined by flex-grow.

Defines the scale of the item (how to stretch if the container width > the total width of the elements).

The default value is 0, that is, if there is free space, it is not enlarged.

.item {
    flex-grow: <number>;
}
Copy the code

If all projects have a flex-Grow attribute of 1, they divide the remaining space equally, if any.

If one project has a flex-grow attribute of 2 and all the other projects are 1, the former takes up twice as much free space as the other items.

The width of the elastic container is exactly equal to the sum of the elements’ widths, so whatever flex-grow is does not take effect.

flex-shrink

Defines the shrinking scale of an item (how to shrink if the container width is less than the total width of the element). The default is 1, meaning that the item will shrink if there is not enough space.

.item {
    flex-shrink: <number>; /* default 1 */
}
Copy the code

If all projects have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient.

If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient.

Flex-shrink also does not take effect if the container width is left over.

flex-basis

Set the initial size of the element on the main axis. The initial size is the size of the element before flex-grow and Flex-shrink take effect.

The browser uses this property to calculate whether the main axis has extra space. The default value is auto, which is the original size of the project, and width, which is the element size. It is determined by width/height (main axis) or by content if it is not set.

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

When set to 0, it is split depending on the content.

It can be set to the same value as the width or height attribute (such as 350px), and the project will take up a fixed space.

flex

The flex attribute is short for flex-grow, flex-shrink, and Flex-basis. The default value is 0, 1 auto. It is also a complex attribute.

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

Some properties are:

  • flex: 1 = flex: 1 1 0%
  • flex: 2 = flex: 2 1 0%
  • flex: auto = flex: 1 1 auto
  • Flex: none = flex: 0 0 auto

The difference between Flex :1 and flex:auto can be attributed to the difference between flex-basis: 0 and flex-basis: auto.

When set to 0 (absolute elasticity element), this tells flex-grow and Flex-Shrink that they do not need to consider their size when scaling.

When set to auto (relatively elastic elements), element size needs to be taken into account when scaling.

Note: It is recommended to use this attribute in preference to writing three separate attributes, as the browser will infer related values.

align-self

Allows a single item to have a different alignment than other items, overriding the align-items property

The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch

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

The renderings are as follows: