CSS布局之弹性盒子-flexbox(下)

2018-08-02 本文已影响0人 codeTao

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

上篇介绍设置在容器上的属性，本篇继续介绍设置在项目上的属性。

六、设置在项目上的属性

order – 决定flex元素的顺序。
align-self – 自身对齐交叉轴，覆盖父元素设置的align-items
align-self属性接受和align-items一样的那些值。
flex-grow –定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink –定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis –在分配多余空间之前，项目占据的主轴空间。
flex –flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

项目上主轴方向相关属性

1 项目-主轴：order

语法：

order: number

order属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。

.test {
    width: 600px;
    border: 1px solid #000;
    display: flex;
}
.test p{
    width: 100px;
    height: 100px;
    background-color: red;
    line-height: 100px;
    text-align: center;
    margin: 8px;
}
.item1 {
            order: 1;
}
.item2 {
    order: 0;
}
.item3 {
    order: -1;
}

<div class="test">
    <p class="item1">1</p>
    <p class="item2">2</p>
    <p class="item3">3</p>
</div>

order.png

注意点：

所有 flex 项默认的 order 值是 0。
order 值大的 flex 项比 order 值小的在显示顺序中更靠后。
相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素，其 order 值分别是2，1，1和0，那么它们的显示顺序就分别是第四，第二，第三，和第一。
第三个元素显示在第二个后面是因为它们的 order 值一样，且第三个元素在源顺序中排在第二个后面。

2 项目-交叉轴：align-self

语法：

align-self: auto|stretch|center|flex-start|flex-end|baseline

设置在项目上的交叉轴方向的属性只有一个，align-self自身对齐交叉轴，覆盖父元素设置的align-items，属性值列表和align-items相同。

属性值:
flex-start: 元素与容器的顶部对齐。
flex-end: 元素与容器的底部对齐。
center: 元素纵向居中。
baseline: 元素在容器的基线位置显示。
stretch: 元素被在侧轴方向被拉伸到与容器相同的高度或宽度。

3 项目-主轴：flex-basis

语法：

flex-basis: number|auto

取值：

flex-basis指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。

flex-basis 的取值有两个：number和auto。

flex-basic 初始值默认取值是auto,
如果主轴方向是水平方向(row)，auto等于flex项目的宽度(width)。
如果主轴方向是垂直方向(conlumn), auto等于flex项目的高度(height)。
flex-basis 取值为number, 表示可以设置flex元素的主轴方向的最小宽度或者最小高度，number 单位为px, rem。
注意：flex-basis 取值为number会覆盖掉flex项目原有的宽度或高度(取决于主轴的方向)。

.test {
    width: 600px;
    border: 1px solid #000;
    display: flex;
}
div p{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 10px;
}
.item1{
    background-color: red;
}
.item2 {
    background-color: green;
    flex-basis: 200px;
}
.item3 {
    background-color: orange;
    flex-basis: auto;
}

<div class="test">
    <p class="item1">1</p>
    <p class="item2">2</p>
    <p class="item3">3</p>
</div>

可见，item3和原始宽度一样，item2的flex-basis的200px, 覆盖掉width:100px,

flex-basis.png

4 容器-主轴：flex-grow

语法：

flex-grow: number

flex-grow 指的是当flex项目没有占满整个flex容器的空间时，每一个项目怎么变化，要不要变大去占据空间，grow就是生长，长大的意思。

该属性定义项目的放大比例，默认为0，即不作任何的放大。flex容器下的项目是根据这个值的权重对容器的剩余空间进行瓜分。number负值无效。

.test {
    width: 600px;
    border: 1px solid #000;
    display: flex;
}
div p{
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 10px;
    background-color: orange;
}
.item1{
    flex-grow: 1;
}
.item2 {
    flex-grow: 2;
}
.item3 {
    flex-grow: 3;
}


<div class="test">
    <p class="item1">1</p>
    <p class="item2">2</p>
    <p class="item3">3</p>
</div>

flex-grow.png

这里因为所有flex项目都没有设置固定宽度，所以，他们会按照各自flex-basis设置值的占总体值之和的权重去扩展自身的宽度。
即item1占1份，item1的宽度为容器宽度的1/6。item2占2份，item2的宽度为容器宽度的2/6。item3占3份，item3的宽度为容器宽度的3/6。
注意：容器宽度为去掉margin和padding后的宽度。

5 容器-主轴：flex-shrink

语法：

flex-shrink: number

flex-shrink 指的是当flex项目超出整个flex容器的空间时，每一个项目怎么变化，要不要缩小去适应空间，shrink就是缩小的意思。

该属性定义项目的缩小比例，默认为0，即不作任何的缩小。flex容器下的项目是根据这个值的权重得出容器的超出空间比例分配，对设置该属性的项目进行缩小。number负值无效。

.test {
    width: 600px;
    border: 1px solid #000;
    display: flex;
}
div p{
    width: 300px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 10px;
    background-color: orange;
}
.item1{
    flex-shrink: 0;
}
.item2 {
    flex-shrink: 1;
}
.item3 {
    flex-shrink: 2;
}

<div class="test">
    <p class="item1">1</p>
    <p class="item2">2</p>
    <p class="item3">3</p>
</div>

flex-shrink.png

这里flex容器的宽度设置成600px，flex项目的宽度均为300px；为item1分配完空间后，剩下的空间被后面两个项目按比例缩小分配。

注意：容器宽度为去掉margin和padding后的宽度。
注意:flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小依据 flex-shrink 的值。比如：上边示例中，容器test总宽度为600px，每个p宽度为300px，3个flex元素的宽度大于容器的宽度，所以3个p依据flex-shrink值进行收缩。

6 项目-主轴 flex

6.1 语法：

flex: flex-grow flex-shrink flex-basis | auto

flex属性是前三个属性：flex-grow、flex-shrink、flex-basis的简写形式。
除了可以分别填flex-grow、flex-shrink、flex-basis，这3个属性值外。

6.2 flex还有2个经常使用的属性值：

initial 属性默认值，相当于将属性设置为"flex: 0 1 auto"。
元素会根据自身宽高设置尺寸。它会缩短自身以适应容器，但不会伸长并吸收flex容器中的额外自由空间来适应容器。
auto : 相当于将属性设置为 "flex: 1 1 auto"。
元素会根据自身的宽度与高度来确定尺寸，但是会自行伸长以吸收flex容器中额外的自由空间，也会缩短至自身最小尺寸以适应容器。
none : 相当于将属性设置为"flex: 0 0 auto"。
元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应flex容器。

建议优先使用这个2个属性，而不是单独写三个分离的属性。

6.3 flex语法
flex 属性可以指定1个，2个或3个值。

单值语法: 值必须为以下其中之一:

一个无单位数(<number>): 它会被当作<flex-grow>的值。如：flex:1
一个有效的宽度(width)值: 它会被当作 <flex-basis>的值。如：flex:200px
关键字none, auto,或initial. 如：flex:auto

双值语法: 第一个值必须为一个无单位数，并且它会被当作<flex-grow>的值。第二个值必须为以下之一：

一个无单位数：它会被当作<flex-shrink>的值。如：flex:1 1
一个有效的宽度值: 它会被当作<flex-basis>的值。如：flex:1 200px

三值语法:

第一个值必须为一个无单位数，并且它会被当作<flex-grow>的值。
第二个值必须为一个无单位数，并且它会被当作 <flex-shrink>的值。
第三个值必须为一个有效的宽度值，并且它会被当作<flex-basis>的值。
如：flex:1 1 200px

结尾

至此，flex布局所有属性都介绍完毕