当前位置: > > > CSS3 - 弹性盒子模型(flexbox)详解2(伸缩容器的属性介绍、及样例)

CSS3 - 弹性盒子模型(flexbox)详解2(伸缩容器的属性介绍、及样例)

相关文章系列:
CSS3 - 弹性盒子模型(flexbox)详解1(基本概念介绍、浏览器支持情况)
CSS3 - 弹性盒子模型(flexbox)详解2(伸缩容器的属性介绍、及样例)[当前文章]
CSS3 - 弹性盒子模型(flexbox)详解3(伸缩项目的属性介绍、及样例)

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

1,display属性

通过 display 属性可以指定某元素是否为伸缩容器,可选的属性值如下:
  • flex:产生块级伸缩容器
  • inline-flex:产生行内级伸缩容器
下面是一个最简单的伸缩容器样例:
完整代码如下:
<html>
<head>
    <meta charset="utf-8">
    <title>hangge.com</title>
</head>
<style>
  .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;
  }
</style>
<body>
    <span class="flex-container">
      <span class="flex-item">1</span>
      <span class="flex-item">2</span>
      <span class="flex-item">3</span>
    </span>
</body>
</html>

2,flex-direction属性

通过 flex-direction 属性可以指定主轴的方向,可选值有:rowrow-reversecolumncolumn-reverse
.flex-container{
  display: flex;
  flex-direction: column;
}
(1)row(默认值):水平方向伸缩,伸缩项目从左向右排列。

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

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

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

3,flex-wrap属性

该属性主要用来指定伸缩容器在主轴线方向空间不足的情况下,是否换行以及如何换行。可选值有:nowrapwrapwrap-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-startflex-endcenterspace-betweenspace-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-startflex-endcenterbaselinestretch
.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-startflex-endcenterspace-betweenspace-aroundstretch
.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(默认值):伸缩项目会在交叉轴上伸展以占用剩余的空间。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作。

打赏支持
评论0