flexbox(下)

最新推荐文章于 2020-11-30 10:25:12 发布

BenjaminShih

最新推荐文章于 2020-11-30 10:25:12 发布

阅读量257

点赞数

分类专栏： css 文章标签： flex 布局

本文链接：https://blog.csdn.net/sjn0503/article/details/73787263

版权

css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

接上篇

简单回顾

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

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

属性列表

设置在项目上的属性

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

项目上主轴方向相关属性

一项目-主轴：order

有时候仅仅调转行或列的方向是不够的。在这些情况，我们可以设置单个元素的order属性。元素的属性默认值为0，但是我们设置这个属性为正整数或负整数。

.test {
    display: flex;
}
.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>

如以上demo，item2将会出现在item1前面

这里写图片描述

二项目-交叉轴：align-self

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

三项目-主轴：flex-basis

flex-basis, 它控制每一个flex项目的默认大小。flex-basis 的取值： auto || length, length 就是我们平常用的一些属性值，如px, rem.

　　flex-basic 的默认取值是auto, 那auto 代表什么意思呢? 如果主轴方向是水平方向(row)，它等于flex项目的宽度(width)。如果主轴方向是垂直方向(conlumn), 它等于flex项目的高度(height)。

　　flex-basis 取值为length, 表示我们可以赋值给它，如150px, 那么它就会覆盖掉flex项目原有的宽度或高度(取决于主轴的方向)。

.test {
    display: flex;
}
div p {
    width: 100px;
}
.item2 {
    flex-basis: 200px;
}
.item3 {
    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-grow

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

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

.test {
    width:100%;
    display: flex;
}
.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项目都没有设置固定宽度，所以，他们会按照各自flex-basis设置值的占总体值之和的权重去扩展自身的宽度，item2占一半，而1和3各占1/4。

这里写图片描述

五容器-主轴：flex-shrink

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

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

.test {
    width: 600px;
    display: flex;
}
div p {
    width: 300px;
}
.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>