CSS3的Flex Box（弹性盒布局模型）提供了一种灵活的布局方式，通过设置容器的display属性为flex，使得子元素成为项目。容器默认拥有主轴和交叉轴，可通过flex-direction改变主轴方向，使用justify-content和align-items调整项目在轴线上的对齐。当空间不足或有余时，flex-wrap、flex-grow和flex-shrink分别控制换行、放大和缩小。order属性可以定制项目的排列顺序，而align-self则允许单个项目独立对齐。
相关知识点：
Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、cl
ear和vertical-align属性将失效。
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex
项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿主轴排列。
以下6个属性设置在容器上。
flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
以下6个属性设置在项目上。
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空
订阅专栏 解锁全文
扫一扫
472
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
