弹性布局(flex)

Posted web12

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了弹性布局(flex)相关的知识,希望对你有一定的参考价值。

  弹性盒布局是CSS 3新增的功能,它具有如下几个配套属性:

  • flex-flow:该属性作用于弹性盒容器,用于控制容器内子元素的排列方式和换行方式。该属性是一个复合属性,由flex-direction和flex-wrap。
  • flex-direction:指定弹性盒容器内子元素的排列方向。该属性支持如下属性值:
    • row:横向从左到右排列
    • row-reverse:横向从右到左排列
    • column:纵向从上到下排列
    • column-reverse:纵向从下到上排列

 

  • flex-wrap:指定弹性盒容器内子元素的换行方式。该属性支持如下属性值:
    • nowrap:不换行,是默认值。
    • wrap:换行。
    • wrap-reverse:反向换行。
  • order:该属性作用于弹性盒容器内的子元素,指定子元素的排列顺序

 

  • flex:该属性作用于弹性盒容器内的子元素,用于控制子元素的缩放比例。该属性是一个复合属性,由flex-grow、flex-shrink、flex-basis三个子属性组成。该属性支持如下属性值:
    • flex:是一个复合属性。其完整属性为flex-grow  flex-shrink  flex-basis;但该属性值也支持简写成一个整数值,比如flex:2;这相当于指定flex:2 2 0px。
    • flex-grow:该属性指定flex容器内各子元素的拉伸因子。默认值为0,表示该子元素不会被拉伸。
    • flex-shrink:该属性指定flex容器内各子元素的收缩因子。默认值为0,表示该子元素不会被缩小。
    • flex-basis:该属性指定flex容器内各子元素缩放之前的基准大小。支持长度值和百分比,默认值为0。

 

  • align-items:该属性作用于弹性盒容器,用于控制弹性盒容器内所有子元素在垂直方向上的对其方式。
  • align-self:该属性作用于弹性盒容器内的子元素,用于控制该子元素自身在垂直方向上的对齐方式。

align-items和align-self两个属性都允许设置以下属性值:

    •  flex-start:顶部(或左边)对齐
    • flex-end:底部(或右边)对齐
    • center:居中对齐
    • baseline:顶部(或左边)对齐,但以元素的底部作为对齐基准线。
    • stretch:拉伸子元素,让它们占满父容器。

除此之外,由于align-self是作用于flex容器中的子元素,用于控制该子元素本身的对其方式,所以align-self还可以额外指定auto属性值,用于说明该子元素采用父容器的对齐方式。

 

  • justify-content:该属性作用于弹性盒容器内的子元素,用于控制该子元素自身在排列方式上的对其方式。该属性支持如下属性值:
    • flex-start:所有子元素都靠近排列方向的起始端,留出结束端多余的空间。
    • flex-end:所有子元素都靠近排列方向的结束端,留出起始端多余的空间。
    • center:所有子元素都靠近排列方向的中间,留出起始端、结束端多余的空间。
    • space-between:多余的空间平均分布到各子元素的中间。
    • space-around:多余的空间平均分布到各子元素的中间和两边。

该属性设置不同值时的效果如下(简单画了一下,存在细微差异请谅解)

技术分享图片

 

 

  • align-content:该属性作用于弹性盒容器,用于控制弹性盒容器内行的分布方式。该属性支持如下属性值:
    • flex-start:所有行都靠近顶部或左端。
    • flex-end:所有行都靠近底部或右端。
    • center:所有行居中显示。
    • space-between:多余的空间平均分布到各行之间。
    • space-around:多余的空间平均分布到各行之间和两边。

下面页面代码示范了align-content属性的功能:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> align-content </title>
    <style type="text/css">
        div#container {
            border: 1px solid black;
            padding: 5px;
            width: 350px;
            height: 160px;
            display: flex;
            flex-wrap:wrap;
        }
        div>div {
            border: 1px solid #aaf;
            padding:5px;
            width:100px;
        }
    </style>
</head>
<body>
<div id="container">
    <div>栏目一</div>
    <div>栏目二</div>
    <div>栏目三</div>
    <div>栏目四</div>
    <div>栏目五</div>
    <div>栏目六</div>
    <div>栏目七</div>
    <div>栏目八</div>
    <div>栏目九</div>
</div>
<button onclick="change(this.innerHTML);">flex-start</button>
<button onclick="change(this.innerHTML);">flex-end</button>
<button onclick="change(this.innerHTML);">center</button>
<button onclick="change(this.innerHTML);">space-between</button>
<button onclick="change(this.innerHTML);">space-around</button>
<script type="text/javascript">
function change(val){
    document.getElementById(container).style.alignContent = val;
}
</script>

 

下面是为单击按钮改变id为container的容器align-content属性后的效果,图中用红线标记的为该效果对应的属性值。

技术分享图片技术分享图片技术分享图片技术分享图片技术分享图片


以上是关于弹性布局(flex)的主要内容,如果未能解决你的问题,请参考以下文章

弹性布局(Flex)布局介绍

28、弹性布局flex

flex弹性布局彻底掌握

彻底搞懂弹性布局flex

彻底搞懂flex弹性盒模型布局

知识归纳-弹性布局-flex