相关概述
容器:
给元素添加css样式为display: flex/inline-flex
,该元素被称为容器,该元素中的子元素称为项目item,该容器内的项目采用弹性布局。
主轴:
:默认情况下是起点在容器的左边,终点在容器的右边,可以设置。
交叉轴:
与主轴垂直的线,主轴若为水平轴,则交叉轴为从上到下;主轴若为垂直轴,交叉轴为从左到右;
① 此外,需注意使用flex容器内元素,即flex item的float,clear、vertical-align属性将失效。
②display:flex; 容器添加弹性布局后,显示为块级元素;
display:inline-flex; 容器添加弹性布局后,显示为行级元素;
③弹性布局中可设置的css属性有十二种,其中6种作用于父容器,6种作用于子项目;
弹性布局css属性总览
容器的属性
1.flex-direction
可以设置主轴的方向,可以设置的值有:
-
row(默认):主轴为水平方向,项目沿主轴从左到右排列;
-
column:主轴为垂直方向,项目从上到下排列;
-
row-reverse:主轴水平 ,项目从右到左排列;
-
column-reverse:主轴垂直,项目从下到上排列;
2.flex-wrap
默认情况下,项目按照主轴方向排列,flex-wrap可以设置当主轴放不下项目时采用的方式。 -
nowrap:自动缩小项目,不换行;
-
wrap:换行,且新行在下方;
-
wrap-reverse:换行,且新行在上方;
注意:换行时,会自动将父容器平分,例如如图所示,一个div高度是50px;当换行时,新的一行会从父容器高度一半处开始。
3.flex-flow
是flex-direction和flex-wrap的缩写形式,默认值为:flex-flow: row wrap;
4.justify-content
设置容器内的项目沿主轴的对齐方式。
- flex-start:从主轴起点对齐;
- flex-end:主轴终点对齐;
- center:居中;
- space-between:两端对齐,项目之间的间隔相等
- space-around:沿轴线均匀分布;
5.align-items
设置项目沿交叉轴的对齐方式。
-
flex-start:交叉轴的起点对齐。
-
flex-end:交叉轴的终点对齐。
-
center:交叉轴的中点对齐。
-
baseline: 项目的第一行文字的基线对齐。(文字的行高、字体大小会影响每行的基线)
-stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
6.align-content
该属性定义了当有多根主轴时,即item不止一行时,多行在交叉轴轴上的对齐方式。注意当有多行时,定义了align-content后,align-items属性将失效。align-content可能值含义如下(假设主轴为水平方向): -
flex-start:左对齐
-
flex-end:右对齐
-
center:居中对齐
-
space- between:两端对齐
-
space-around:沿轴线均匀分布
-
stretch:各行将根据其flex-grow值伸展以充分占据剩余空间
项目的属性
1.order
order的值为整数,值越小,item排列越靠前,默认为0。
<div style:"display: flex;">
<div>1</div>
<div style:"order: 1">2</div>
<div>3</div>
<div>4</div>
</div>
2.flex-grow
当flex有多余空间时,item是否放大。默认值为0,表示有多余空间时也不放大。值为整数,表示不同item的放大比例。
<div class="wrap">
<div class="div" style="flex-grow:1"><h2>item 1</h2></div>
<div class="div" style="flex-grow:2"><h2>item 2</h2></div>
<div class="div" style="flex-grow:3"><h2>item 3</h2></div>
</div>
即当有多余空间时item1、item2、和item3以1:2:3的比例放大。
3.flex-shrink
当容器空间不足时,是否按比例缩小。默认为1,即空间不足时,按比例缩小。
注意:设置为0的时候,表示容器空间不足时不缩小该项目,若容器空间不足,可能会将项目挤出父容器。
4.flex-basis
表示项目在主轴上占据的空间,如果主轴是水平的,则该属性会导致原width失效。等于是设置项目的宽。
5.flex-grow
flex-grow是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
6.align-self
align-self:定义单个项目自身在交叉轴上的排列方式,可以覆盖掉容器上的align-items属性。
属性值:与align-items相同,默认值为auto,表示继承父容器的align-items属性值。其余属性值和align-items值相同。align-items是设置容器中所有项目按照交叉轴的对齐方式,align-self是设置单一项目按照交叉轴的对齐方式。