HTML中可伸缩容器怎么设置,CSS3 - 弹性盒子模型(flexbox)详解2（伸缩容器的属性介绍、及样例）...

二、伸缩容器的相关属性说明

1，display属性

通过 display属性可以指定某元素是否为伸缩容器，可选的属性值如下：

flex：产生块级伸缩容器

inline-flex：产生行内级伸缩容器

下面是一个最简单的伸缩容器样例：

完整代码如下：

hangge.com

.flex-container{

display: flex;

border: 1px solid black;

width: 300px;

height: 120px;

}

.flex-item{

width: 50px;

height: 50px;

margin: 5px;

background-color: #60BDFF;

color: #FFFFFF;

font-size: 20px;

font-weight:bold;

}

1

2

3

2，flex-direction属性

通过 flex-direction属性可以指定主轴的方向，可选值有：row、row-reverse、column、column-reverse。

.flex-container{

display: flex;

flex-direction: column;

}

(1)row(默认值)：水平方向伸缩，伸缩项目从左向右排列。

(2)row-reverse：水平方向伸缩，伸缩项目从右向左排列。

(3)column：垂直方向伸缩，伸缩项目从上向下排列。

(4)column-reverse：垂直方向伸缩，伸缩项目从下向上排列。

3，flex-wrap属性

该属性主要用来指定伸缩容器在主轴线方向空间不足的情况下，是否换行以及如何换行。可选值有：nowrap、wrap、wrap-reverse。

.flex-container{

display: flex;

flex-wrap: wrap;

}

(1)nowrap(默认值)：即使空间不足，伸缩容器也不允许换行。

(2)wrap：在空间不足情况下允许换行。如果主轴为水平轴，则换行的方向是从上到下。

(3)wrap-reverse：在空间不足情况下允许换行。不过换行方向同 wrap相反。

4，flex-flow属性

该属性是 flex-direction 和flex-wrap属性的缩写版本，它同时定义了伸缩容器的主轴和侧轴，其默认值是：row nowrap。

比如：

.flex-container{

display: flex;

flex-flow: column wrap;

}

等价于：

.flex-container{

display: flex;

flex-direction: column;

flex-wrap: wrap;

}

5，justify-content属性

该属性用来定义伸缩项目沿主轴线的对齐方式，可选值有：flex-start、flex-end、center、space-between、space-around。

.flex-container{

display: flex;

justify-content: center;

}

(1)flex-start(默认值)：伸缩项目向主轴线的起始位置靠齐。

 

(2)flex-end：伸缩项目向主轴线的结束位置靠齐。

(3)center：伸缩项目向主轴线的中间位置靠齐。

(4)space-between：伸缩项目会平均地分布在主轴线里。第一个项目在主轴线开始位置，最后一个项目在终点位置。

(5)space-around：伸缩项目会平均地分布在主轴线里，两端保留一半的空间。

6，align-items属性

该属性用来定义伸缩项目在伸缩容器的交叉轴上的对齐方式，可选值有：flex-start、flex-end、center、baseline、stretch。

.flex-container{

display: flex;

align-items: center;

}

(1)flex-start(默认值)：伸缩项目向交叉轴的起始位置靠齐。

(2)flex-end：伸缩项目向交叉轴的结束位置靠齐。

(3)center：伸缩项目向交叉轴的中间位置靠齐。

(4)stretch(默认值)：伸缩项目在交叉轴方向拉伸填充整个伸缩容器。

注意：这种情况下项目不能设置高度，否则看不到效果。

(5)baseline：伸缩项目根据它们的基线对齐。

.flex-container{

display: flex;

align-items: baseline;

}

#item1{

padding-top: 15px;

}

#item2{

padding-top: 10px;

}

#item3{

padding-top: 5px;

}

7，align-content属性

该属性用来调整伸缩项目出现换行后在交叉轴上的对齐方式，类似于伸缩项目在主轴上使用 justify-content。可选值有：flex-start、flex-end、center、space-between、space-around、stretch。

.flex-container{

display: flex;

flex-wrap: wrap;

align-content: flex-start;

}

(1)flex-start：伸缩项目向交叉轴的起始位置靠齐。

(2)flex-end：伸缩项目向交叉轴的结束位置靠齐。

(3)center：伸缩项目向交叉轴的中间位置靠齐。

(4)space-between：伸缩项目在交叉轴重平均分布。第一行在交叉位置开始位置，最后一行在交叉轴结束位置。

(5)space-around：伸缩项目在交叉轴重平均分布。并且两边各有一半的空间。

(6)stretch(默认值)：伸缩项目会在交叉轴上伸展以占用剩余的空间。