Understanding of the latest flex layout in html

Every time we lay out the front-end page, we will use some attributes such as float, position, margin, etc. These attributes are a little troublesome to use, and the browser will consume a lot of performance when rendering.

So Today we will talk about the latest flex layout, also called elastic layout!

It should be noted that any container can be designated as flex layout, but float, clear, and vertical-align will all be invalid in flex layout.

Main axis direction

The flex container is divided into x-axis and y-axis. The positive direction of the x-axis defaults from left to right, and the positive direction of the y-axis defaults from top to bottom.

Define a container as a flexible layout display:flex; the default direction of the main axis is left to right;

If we want to change the default direction of flex, we need to use the flex-direction attribute flex- Direction has four attribute values, namely row, row-reverse, column, and column-reverse, which are from left to right, right to left, top to bottom, and bottom to top!

Alignment in the main axis direction

justify-content:flex-start则主轴为左对齐
justify-content:flex-end 则主轴为右对齐
justify-content:center 则主轴为居中
justify-content:space-between则每个子项目之间等距离，前提是有剩余空间
justify-content:space-around则每个子项目会平分剩余空间，子项目与父元素边界处也会存在距离

Vertical single-line alignment!

align-item:flex-start纵向从上到下
align-item:flex-end纵向从下到上
align-item:center纵向居中对齐
align-item:baseline以基线对齐
align-item:strech这是默认方式

Subitem line wrapping

flex-wrap:wrap超出父元素会换行
flex-wrap:wrap-reverse反向换行
flex-wrap:no wrap这是默认方式,不换行

Vertical multi-line alignment!

align-content:flex-start上对齐
align-content:flex-end下对齐
align-content:center上下居中
align-content:space-between
align-content:space-around

The above are all attributes added to the parent element

Some attributes of the sub-item

order:0,定义子项目的排序位置，数值越小越靠前，默认为0
flex-grow:0;定义子项目的放大比例，默认为0不放大
flex-shrink:1;定义子项目的缩小比例，默认为1，空间不足将等比缩小，0则不缩小，负值无效
flex-basis:1;定义子项目占据空间，默认为auto，可以设置百分比，也可以是固定值

The above three attributes can be abbreviated, such as flex: 1,1,1 The order is as above

If there are any errors, please correct me and let’s work hard together!

The above is the detailed content of Understanding of the latest flex layout in html. For more information, please follow other related articles on the PHP Chinese website!