Detailed explanation of the usage and effects of each attribute in CSS Flex elastic layout

Detailed explanation of the usage and effects of each attribute in CSS Flex flexible layout

In web development, flexible layout (Flexbox) has become a commonly used layout method . It can effectively solve the problem of alignment and layout of elements in the container, so that web pages can present good effects on different screen sizes. This article will explain in detail the usage and effects of each attribute in CSS Flex elastic layout.

1. flex-direction attribute

The flex-direction attribute is used to set the direction of the main axis in the flexible container. The main axis refers to the horizontal or vertical direction in a flex container. The flex-direction attribute has four optional values: row, row-reverse, column and column-reverse.

1. row: Default value, the main axis is horizontal and the sub-elements are arranged horizontally.
2. row-reverse: The main axis is horizontal, and the sub-elements are arranged horizontally in reverse order.
3. column: The main axis is vertical, and the sub-elements are arranged vertically.
4. column-reverse: The main axis is vertical, and the sub-elements are arranged vertically in reverse order.

Code example:

.container {
  display: flex;
  flex-direction: row; /* 主轴为水平方向，子元素水平排列 */
}

.container-reverse {
  display: flex;
  flex-direction: row-reverse; /* 主轴为水平方向，子元素水平反向排列 */
}

.container-column {
  display: flex;
  flex-direction: column; /* 主轴为垂直方向，子元素垂直排列 */
}

.container-column-reverse {
  display: flex;
  flex-direction: column-reverse; /* 主轴为垂直方向，子元素垂直反向排列 */
}

2. Justify-content attribute

The justify-content attribute is used to set the alignment of sub-elements in the elastic container on the main axis. It has five optional values: flex-start, flex-end, center, space-between and space-around.

1. flex-start: Child elements are aligned at the starting point of the main axis.
2. flex-end: child elements are aligned at the end of the main axis.
3. center: Child elements are aligned at the center of the main axis.
4. space-between: The child elements are evenly distributed on the main axis, with no space between the beginning and the end.
5. space-around: Child elements are evenly distributed on the main axis, with gaps at the beginning and end.

Code example:

.container {
  display: flex;
  justify-content: flex-start; /* 子元素在主轴起点对齐 */
}

.container-end {
  display: flex;
  justify-content: flex-end; /* 子元素在主轴终点对齐 */
}

.container-center {
  display: flex;
  justify-content: center; /* 子元素在主轴中心对齐 */
}

.container-between {
  display: flex;
  justify-content: space-between; /* 子元素在主轴上均匀分布，首尾没有间隔 */
}

.container-around {
  display: flex;
  justify-content: space-around; /* 子元素在主轴上均匀分布，首尾有间隔 */
}

3. align-items attribute

The align-items attribute is used to set the alignment of sub-elements in the flexible container on the cross axis . The cross axis is the axis perpendicular to the main axis. The align-items attribute has five optional values: flex-start, flex-end, center, baseline and stretch.

1. flex-start: Child elements are aligned at the starting point of the cross axis.
2. flex-end: child elements are aligned at the end of the cross axis.
3. center: Child elements are aligned at the center of the cross axis.
4. baseline: Child elements are aligned to the baseline.
5. stretch: The child element stretches to fill the entire cross axis.

Code example:

.container {
  display: flex;
  align-items: flex-start; /* 子元素在交叉轴起点对齐 */
}

.container-end {
  display: flex;
  align-items: flex-end; /* 子元素在交叉轴终点对齐 */
}

.container-center {
  display: flex;
  align-items: center; /* 子元素在交叉轴中心对齐 */
}

.container-baseline {
  display: flex;
  align-items: baseline; /* 子元素以基线对齐 */
}

.container-stretch {
  display: flex;
  align-items: stretch; /* 子元素拉伸填满整个交叉轴 */
}

4. flex-grow attribute

The flex-grow attribute is used to set how the child elements in the flexible container allocate the remaining space. It specifies the magnification ratio of the child element, which defaults to 0.

Code example:

.item {
  flex-grow: 1; /* 子元素1放大比例为1 */
}

.item2 {
  flex-grow: 2; /* 子元素2放大比例为2 */
}

flex-shrink property

The flex-shrink property is used to set how the child elements in the elastic container shrink when there is insufficient space. It specifies the shrinkage ratio of child elements, which defaults to 1.

Code example:

.item {
  flex-shrink: 1; /* 子元素1收缩比例为1 */
}

.item2 {
  flex-shrink: 2; /* 子元素2收缩比例为2 */
}

Summary:

This article explains in detail the usage and effects of each attribute in CSS Flex elastic layout, including flex-direction, justify-content, Properties such as align-items, flex-grow and flex-shrink. Mastering the usage of these attributes, we can flexibly layout the sub-elements in the flexible container to achieve diverse page layout effects. Hope this article is helpful to you.

The above is the detailed content of Detailed explanation of the usage and effects of each attribute in CSS Flex elastic layout. For more information, please follow other related articles on the PHP Chinese website!