flex弹性布局的汇总
弹性布局主要就是解决一个元素的子元素的布局方式,为布局提供最大的灵活性。但是使用弹性布局的前提就是要有父子结构。
1.介绍:
1.1 当父元素添加 display:flex时,原本的父元素就变成了容器,其子元素就成为了项目,所有的项目都允许按照弹性布局的方式排列。
(display:inline-flex是将行内元素变成容器)
1.2 从左向右的排列方向叫做主轴。最左侧为主轴的起点,最右侧为主轴的终点。
1.3 与主轴交叉垂直的方向(从上到下)叫做交叉轴。
~~注意:一个元素设置撑为flex容器之后,其子元素的浮动float/clear/vertical-align等属性都会失效,容器的对齐方式text-align也会失效。
2.容器的属性以及各属性的取值:
2.1 flex-direction:设置主轴的方向。
row:默认值,主轴为x轴,起点为左端。
row-reverse:将主轴进行反转,右端变成了起点,左端成为终点。
column:主轴为y轴,起点在顶端。
column-reverse:起点变成了终端。
2.2 flex-wrap:项目在主轴上排列空间不够时的换行方式。
wrap:不压缩,允许换行。
nowrap:默认值,空间不够时也不换行,项目自动的缩小。
wrap-reverse:允许换行并且反转。
2.3 flex-flow:是flex-direction和flex-wrap的缩写形式。
row nowrap:默认值,主轴为x轴,排列空间不够时项目缩小不换行。
row wrap:主轴为x轴,允许换行。
column wrap:主轴为y轴,允许换行。
column nowrap:主轴为y轴,排列空间不够时项目缩小不换行
2.4justify-content:定义项目在主轴上的对齐方式。
flex-start:默认值,在主轴的起点对齐。
flex-end:在主轴的终点对齐。
center:根据主轴居中对齐。
space-between:两端对齐,项目之间的间隔相等。
space-around:每个项目两侧的间隔都相等。
2.5align-items:定义项目在交叉轴上的对齐方式。
flex-start:默认值,在j交叉轴的起点对齐。
flex-end:在交叉轴的终点对齐。
center:根据交叉轴居中对齐。
*baseline:*根据交叉轴的基线对齐。
*stretch:*项目设置该尺寸时,在交叉轴上沾满空间。