布局的意思

7

为了直观展⽰布局效果，先给容器和项⽬设置基本的属性，⽤来⽅便展⽰每个div元素所处的位置和内容。

如上图所⽰，我们只需要将flex-container（flex容器）的display属性设置为flex那么就代表使⽤flex进⾏布局，容器内的所有⼀级⼦元素都会

作为容器内的项⽬。⾄此⼀个最简单的flex布局的页⾯就做完了。但是如果要想通过flex布局出想要的页⾯，那么就需要对容器属性和项⽬属

性进⾏设置，实现对页⾯内容的精准控制。下⾯就介绍⼀下flex布局属性。

注：设为Flex布局以后，⼦元素的float、clear和vertical-align属性将失效。

四、flex属性

flex属性主要包含两部分内容，⼀个是flex容器（flex-container）的属性，另⼀个是项⽬(flex-item)的属性。

-container:(⽤来设置容器的属性)

display:display也作为flex的⼀个属性，当容器的display设置为flex时代表当前布局⽅式使⽤flex布局。

flex-direction:⽤来确定容器内项⽬在主轴⽅向的排列⽅式

justify-content:⽤来控制项⽬的对其⽅式

align-items:定义项⽬再交叉轴的排列⽅向（交叉轴默认为Y轴）

flex-wrap:定义项⽬再主轴上展⽰不开时候如何进⾏换⾏

flex-flow:该属性为flex-direction和flex-wrap的简写形式

align-content:当项⽬超过主轴出现换⾏时的对其⽅式

(1)display属性

正常来讲display不算⼀个容器属性，flex布局通过设置display的属性值为flex来控制当前布局的⽅式为flex布局模式。

display属性主要包含两个属性值：

display:flex;/*代表当前的容器为块状元素*/

display:inline-flex;/*代表当前的容器为⾏内元素*/

当设置display属性为flex时，页⾯实现如下，可以看到flex布局容器单独占⼀⾏。（蓝⾊框线代表整个页⾯）

display:flex;/*代表当前的容器为块状元素*/

当设置display属性为inline-flex时，页⾯显⽰如下，可以看到flex布局容器作为⼀个⾏内元素与其他⾏内元素在同⼀⾏展⽰。（蓝⾊框线代表

整个页⾯）

display:inline-flex;/*代表当前的容器为⾏内元素*/

(2)flex-direction

⽤来确定容器内项⽬在主轴⽅向的排列⽅式，通过direction属性来设置排列⽅式其实是通过控制主轴的⽅向来达到控制项⽬的⽬的。flex-

direction主要包含4个属性值：

flex-direction:row;/*沿主轴横向顺序排列，主轴的起点最左端*/

flex-direction:row-rever;/*沿主轴横向顺序排列，主轴的起点在右端*/

flex-direction:column;/*沿主轴纵向顺序排列，主轴的起点在上端*/

flex-direction:column-rever;/*沿主轴纵向顺序排列，主轴的起点在下端*/

flex-direction:row;当前属性值为flex-direction的默认属性

flex-direction:row-rever;/*沿主轴横向顺序排列，主轴的起点在右端*/

flex-direction:column;

flex-direction:column-rever;

(3)justify-content

⽤来控制容器内项⽬的对其⽅式，主要包含6个属性值

justify-content:flex-start;/*左端对齐*/

justify-content:flex-end;/*右端对齐*/

justify-content:center;/*居中对齐*/

justify-content:space-between;/*两端对齐*/

justify-content:space-around;/*每个项⽬两侧的间隔相等，两端减半*/

justify-content:space-evenly;/*每个项⽬两侧的间隔相等，平均分布*/

justify-content:flex-start;/*左端对齐*/默认对齐⽅式

justify-content:flex-end;/*右端对齐*/

justify-content:center;/*居中对齐*/

justify-content:space-between;/*两端对齐*/

justify-content:space-around;/*每个项⽬两侧的间隔相等，两端减半*/

justify-content:space-evenly;/*每个项⽬两侧的间隔相等，平均分布*/

(4)align-items

定义项⽬在交叉轴的排列⽅向，常⽤的属性主要有5个

align-items:flex-start;/*交叉轴的起点对齐*/

align-items:flex-end;/*交叉轴的终点对齐*/

align-items:stretch;/*默认值，如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼度，如果设置⾼度则类似起点对齐*/

align-items:center;/*交叉轴居中对齐*/

align-items:baline;/*基线对齐*/

align-items:flex-start;/*交叉轴的起点对齐*/

align-items:flex-end;/*交叉轴的终点对齐*/

align-items:stretch;/*默认值，如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼度，如果设置⾼度则类似起点对齐*/

当item3的⾼度设置为auto时，左边为stretch，右边的为flex-start

align-items:center;/*交叉轴居中对齐*/

align-items:baline;/*基线对齐*/

(5)flex-wrap

定义项⽬再主轴上展⽰不开时候如何进⾏换⾏，默认情况下，项⽬都排在⼀条线，如果展⽰不开则容器内的项⽬被压缩展⽰，常⽤属性值

有3个。

flex-wrap:nowrap;/*默认值，不换⾏展⽰，如果超出容器宽度则项⽬等⽐例压缩*/

flex-wrap:wrap;/*换⾏，第⼀⾏在上⽅*/

flex-wrap:wrap-rever;/*换⾏展⽰，第⼀⾏在下⽅*/

flex-wrap:nowrap;/*默认值，不换⾏展⽰，如果超出容器宽度则项⽬等⽐例压缩*/

如下图所⽰，如果将项⽬复制3份，则所有项⽬宽度加起来超过容器宽度，此时宽度被压缩。

flex-wrap:wrap;/*换⾏，第⼀⾏在上⽅*/

flex-wrap:wrap-rever;/*换⾏展⽰，第⼀⾏在下⽅*/

(6)flex-flow

该属性为flex-direction和flex-wrap的简写形式，默认值为rownowrap。

flex-flow:rowwrap;/*主轴展⽰为横向展⽰，超出内容换⾏展⽰*/

(7)align-content

当项⽬超过主轴出现换⾏时的对其⽅式，属性定义了多根轴线的对齐⽅式，当为单轴的时候不起作⽤。主要包含6种属性值，属性类似

于align-items属性，只不过前⼀个是针对主轴的对其⽅式进⾏排列，align-content属性是针对交叉轴⽅向进⾏排列。

align-content:stretch;/*默认值，沿着交叉轴，从上倒下占满整个交叉轴*/

align-content:flex-start;/*与交叉轴的起点对齐。*/

align-content:flex-end;/*与交叉轴的终点对齐。*/

align-content:center;/*与交叉轴的中点对齐。*/

align-content:space-around;/*每根轴线两侧的间隔都相等，上下间隔是中间的⼀半*/

align-content:space-between;/*两端对齐，上下靠边，中间部分间隔相等*/

-item:（⽤来设置项⽬的属性）

order:⽤来设置项⽬的顺序，默认为0，数字越⼩排序越靠前允许设置为负数。

align-lf：允许单个项⽬有与其他项⽬不⼀样的对齐⽅式。

flex-grow:定义项⽬的放⼤⽐例，默认为0不放⼤。

flex-shrink:定义项⽬的缩⼩⽐例，默认为0，不缩⼩。

flex-basic:定义了在分配多余空间之前，项⽬占据的主轴空间

flex：为flex-grow,flex-shrink和flex-basis的简写。

(1)order

⽤来设置项⽬的顺序，默认为0，数字越⼩排序越靠前允许设置为负数。如下所⽰，设置item2项⽬的order属性为1，其他项⽬默认为0，

则item2排到最后。

.item{

height:100px;

border:blacksolid1px;

width:200px;

}

.item1{

background-color:red;

}

.item2{

background-color:green;

order:1

}

.item3{

background-color:yellow;

}

item1