CSS3 Flex 弹性布局用法详解

原创

zhangying2001 2023-07-04 19:59:35 ©著作权

©著作权归作者所有：来自51CTO博客作者zhangying2001的原创作品，请联系作者获取转载授权，否则将追究法律责任

什么是Flex弹性布局

Flex是Flexible Box的简称，意为弹性布局，顾名思义，在网页布局时，他可以给我们提供更多的灵活性。

说明：

1.flex是display的一个属性值。与之相当应的还有一个是inline-flex。

2.设置了Flex布局后，子元素的float，clear，还有verticle-align属性都不起作用。

3. 设置了display:flex属性的元素，称为Flex容器，他里面的所有子元素统称为容器成员，称为Flex项目。后面我们就使用Flex容器和 Flex项目来进行介绍。 Flex容器有两根坐标轴：水平的叫主轴（main axis）和垂直的叫交叉轴（cross axis）。

Flex容器有6种属性可用分别是：

属性	详细说明
flex-direction	决定主轴的方向（即项目的排列方向）
flex-wrap	控制Flex容器是单行显示还是多行显示，而交叉轴的方向就决定着新线的排列方向
flex-flow	flex-flow属性是flex-direction属性和flex-wrap属性的简写
justify-content	定义了Flex项目在主轴方向上的对齐方式
align-items	定义项目在交叉轴上的对齐方式
align-content	定义了多根轴线的对齐方式，如果只有一条轴线，那么此属性不起作用

下面就逐一给大家介绍这些属性有什么用，以及他们所对应的属性值又是什么意思。

flex-direction: row \| row-reverse \| column \| column-reverse; 属性决定主轴的方向（即项目的排列方向）
名称（属性/值）	详细说明
row（默认值）	主轴为水平方向，起点在左端
row-reverse	主轴为水平方向，起点在右端
column	主轴为垂直方向，起点在上沿
column-reverse	主轴为垂直方向，起点在下沿
效果演示

flex-wrap: nowrap \| wrap \| wrap-reverse; 属性可以控制Flex容器是单行显示还是多行显示，而交叉轴的方向就决定着新线的排列方向
属性/值	详细说明
nowrap	不换行
wrap	换行
wrap-reverse	换行与wrap相似，但行的顺序是倒过来的
效果演示

属性/值	详细说明
flex-flow	flex-flow属性是flex-direction属性和flex-wrap属性的简写，默认值为flex-flow : row nowrap

justify-content: flex-start \| flex-end \| center \| space-between \| space-around; 属性定义了Flex项目在主轴方向上的对齐方式
属性/值	详细说明
flex-start	类似于左浮动（float：left）
flex-end	类似于右浮动（float:right）
center	Flex项居中
space-between	两端对齐容器，各个Flex项目之间的间距相等
space-around	每一个Flex项目两侧的间隔相等
效果演示

align-items: flex-start \| flex-end \| center \| baseline \| stretch; 属性定义项目在交叉轴上的对齐方式
属性/值	详细说明
flex-start	对齐交叉轴的起点
flex-end	对齐交叉轴的终点
center	以交叉轴为参考，居中对齐
baseline	Flex项目第一行文字基线对齐
stretch	如果Flex项目未定义高度或者设置为auto，Flex项目将占满整个窗口的高度
效果演示

align-content: flex-start \| flex-end \| center \| space-between \| space-around \| stretch; 属性定义了多根轴线的对齐方式，如果只有一条轴线，那么此属性不起作用
属性/值	详细说明
flex-start	对齐交叉轴的起点
flex-end	对齐交叉轴的终点
center	以交叉轴为参考，居中对齐
space-between	交叉轴两端对齐，轴线这间的间隔平均分布
space-around	Flex项目（沿交叉轴方向）之间的间隔相等
stretch	Flex项目（沿交叉轴方向）占满整个交叉轴
效果演示

属性/值	详细说明
order	用于控制Flex项目的排列顺序，默认为0，值越小越靠前。可取的值：0 \| 1
flex-grow	用于定义Flex项目的放大比例，默认为0，即使存在剩余空间，也不放大。可取的值：0 \| 1
flex-shrink	用于定义Flex项目的缩小比例，默认为1，即空间不足，Flex项目将等比缩小。可取的值 0 \| 1
flex-basis	用于定义如何分配多余空间默认值为auto，即Flex项目本来的大小
flex	flex属性是flex-grow，flew-shrink和flex-basis的简写。默认值为0 1 auto
align-self	允许单个Flex项目有不同于其他Flex项目的对齐方式。默认值为auto，表示继承父元素的align-items属性，如果不存在父元素，则等同于 stretch。可取的值：flex-start \| flex-end \| center \| baseline \| stretch;
stretch	Flex项目（沿交叉轴方向）占满整个交叉轴
效果演示