Detailed introduction to flexible layout (Flex layout)

1. Flexible Layout

In normal times, the layout types we commonly use include the following:

1. Floating +Positioning

　2. Adaptive (percentage)

　3.Responsive layout

　4. Flexible layout (Flex layout)

What to sort out today It is a more commonly used flexible layout, but there is a difference between block tags and inline block tags.

{:;
}
input{
　　:;
}

Of course not everything can be liked by everyone like money, it also has its own advantages and disadvantages.

Advantages: Compatibility supports all browsers (Webkit-based browsers must add -webkit-), can be adjusted according to user preferences, and any container can be designated as Flex layout.

Disadvantages: Because the flexible layout is adjustable, there are huge possibilities and it takes a lot of time to adjust; some flexible designs require separate styles for IE6, but...how many people are still using IE6 ( ⊙﹏⊙)b.

　Note: When we use flexible layout, float, clear and vertical-align in CSS will become invalid.

2. Properties of flexible layout

The first is the property of the container that serves as flexible layout. 　

　1.flex-direction property

flex-direction determines the direction of the container.

div {
  flex-direction: row | row-reverse | column | column-reverse;
}

The four values ​​are: row (default value) from left to right, row-reverse from right to left, column from top to bottom, column-reverse from bottom to top .

　2.flex-wrap attribute

The default layout is generally in the same row, when the flex-wrap attribute is set, the content that cannot be arranged will be automatically wrapped.

div{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

The four values ​​are: nowrap (default value) does not wrap, wrap wraps downwards, and wrap-reverse wraps upwards.

　3.flex-flow attribute

　The flex-flow attribute is the above two The shorthand form of the attribute, the default value is row nowrap.

div {
  flex-flow: <flex-direction> || <flex-wrap>;
}

　

　4.justify-content attribute

The justify-content attribute defines the alignment in the direction of the container.

div {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

　flex-start(Default value): Align to the left.

　flex-end: Align to the right.

center： Center alignment.

Space-between: Align both ends, each sub-element is equally spaced, and there is no gap between the sub-element and the container border.

　space-around: The space on both sides of each child element is equal. The spacing between child elements is twice as large as the spacing between the child elements and the container border.

　5.align-items attribute

The align-items attribute is defined in the vertical container Alignment in direction.

div {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

　flex-start: Align the starting point in the vertical direction.

　flex-end: Vertical endpoint alignment.

Center: Align the midpoint in the vertical direction.

baseline: Aligned with the baseline of the text in the first child element.

　stretch(Default value): If the child element has no height set or the height is set to auto, then it will occupy the entire height of the container.

　6.align-content attribute

The align-content attribute defines the child element Alignment in both directions.

div {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

　　flex-start：当容器方向子元素刚好填满时，与垂直方向的起点对齐。

　　flex-end：当容器方向子元素刚好填满时，与垂直方向的终点对齐。

　　center：当容器方向子元素刚好填满时，与垂直方向的中点对齐。

　　space-between：当容器方向子元素刚好填满时，垂直方向两端对齐，子元素之间的等距离间隔。

　　space-around：两个方向两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

　　stretch（默认值）：占满整个垂直方向。

 

　　下面就是具有弹性布局容器中子元素的属性

　　1.order属性

 

　　order属性定义了子元素的排列顺序，数值小的在前。

 

.son {
  order: <integer>;
}

 

　　

　　2.flex-grow属性

 

　　flex-grow属性定义了子元素的放大比例，默认值为0。

.son {
  flex-grow: <number>; /* default 0 */}

　　当给所有子元素设置该属性为1，那么将等分所有空间，如果单独给某一个子元素设置n倍，那么该子元素将占据的空间比其他子元素多n倍。

　　

　　3.flex-shrink属性

 

　　flex-shrink属性定义了子元素的缩小比例，默认值为1。

.son {
  flex-shrink: <number>; /* default 1 */}

　　给所有子元素设置该属性为1，当空间不足时那么所有子元素将等比例缩小平分所有空间，如果单独给某一个子元素设置0，那么该子元素将在空间不足时不缩小。

　　

　　4.flex-basis属性

 

　　该属性定义了给子元素分配空间时其占据的空间为多少，可以设置为与其width和height属性一样的值，那么它将被分配固定的空间大小。

　　

　　5.flex属性

 

　　该属性为flex-grow, flex-shrink 和 flex-basis的简写。

 

　　6.align-self属性

 

　　该属性允许设置过的子元素有与其他子元素不一样的对齐方式，可以覆盖align-items属性。

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

　auto: Default value, indicating that the align-items attribute of the parent is inherited by default.

flex-start: Align the starting point in the vertical direction.

　flex-end: Vertical endpoint alignment.

Center: Align the midpoint in the vertical direction.

baseline: Aligned with the baseline of the text in the first child element.

　stretch(Default value): If the child element has no height set or the height is set to auto, then it will occupy the entire height of the container.

Flex layout (flexible layout)

1. The properties of the container are: flex-direction: (determines the direction of the main axis) (that is, the direction of the arrangement of items) value :row/row-reverse/column/column-reverse/ flex-wrap: (How to wrap if one axis cannot be arranged) Value: nowrap (default): no line wrapping. wrap: wrap, with the first line at the top. wrap-reverse: wrap, first line below. flex-flow: (The flex-flow property is the abbreviation of the flex-direction property and the flex-wrap property. The default value is row nowrap) justify-content: (The justify-content property defines the alignment of the item on the main axis.) Take Values: flex-start (default): left-aligned flex-end: right-aligned center: centered space-between: aligned on both ends, with equal spacing between items. space-around: Each item is equally spaced on both sides. Therefore, the space between items is twice as large as the space between items and the border. align-items (how to align on the cross axis) Value: flex-start/flex-end/center/baseline/stretch align-content (defines the alignment of multiple axes. If the item has only one axis, this attribute has no effect Function) Value: flex-start: Align with the starting point of the cross axis. flex-end: aligned with the end point of the cross axis. center: Aligned with the midpoint of the cross axis. space-between: Align with both ends of the cross axis, and the intervals between the axes are evenly distributed. space-around: Each axis is equally spaced on both sides. Therefore, the distance between the axes is twice as large as the distance between the axes and the frame. stretch (default): The axis occupies the entire cross axis.                                                                                                                                                                                                                                                 . The smaller the value, the farther forward the arrangement is. The default is 0. The flex-grow attribute defines the enlargement ratio of the item. The default is 0, that is, if there is remaining space, it will not be enlarged. The flex-shrink attribute defines the reduction ratio of the item. The default is 1. i.e. if there is insufficient space, the item will shrink. The main axis space occupied by flex-basis items (main size). The browser uses this attribute to calculate whether there is extra space on the main axis. Its default value is auto, which is the original size of the project. flex align-self allows a single item to be aligned differently from other items, overriding the align-items property. The default value is auto, which means inheriting the align-items attribute of the parent element. If there is no parent element, it is equivalent to stretch.

The above is the detailed content of Detailed introduction to flexible layout (Flex layout). For more information, please follow other related articles on the PHP Chinese website!