Flex布局

什么是Flex？

Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

1
2
3
4
.box{
    display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/
    display: flex; //将对象作为弹性伸缩盒显示
}
1
2
3
4
5
6
7
8
.box {
    display: inline-flex; /*将对象作为内联块级弹性伸缩盒显示*/
}

/*兼容性写法*/
.box {
    display: flex || inline-flex;
}

基本概念

若某元素采用flex布局，则此元素被称为flex容器(flex container)。其所有的子元素自动成为Flex项目(flex item)。

伸缩盒子

在Flex布局中有两个轴

1、主轴(main axis)，水平方向，起始位置为main start，结束位置为main end；

2、侧轴(又称交叉轴 cross axis)，垂直方向，起始位置为cross start，结束位置为cross end。

其中main size为Flex项目在主轴方向上的大小，cross size为Flex项目在侧轴方向上的大小。

容器属性

容器属性有六种

  1. flex-direction 设置主轴方向
  2. flex-wrap 是否换行
  3. flex-flow flex-direction和flex-wrap的简写
  4. justify-content 主轴方向对齐方式
  5. align-item 侧轴方向对齐方式
  6. align-content 多行时，侧轴的对齐方式

flex-direction

决定主轴的方向（即项目的排列方向）

1
2
3
.box {
   flex-direction: row | row-reverse | column | column-reverse;
}
  • row（默认）：主轴水平方向，起点在左端；
  • row-reverse：主轴水平方向，起点在右端，排列顺序会颠倒；
  • column：主轴垂直方向，起点在上边沿；
  • column-reverse：主轴垂直方向，起点在下边沿，排列顺序会颠倒。

flex-direction

flex-wrap

定义换行情况

1
2
3
.box{
   flex-wrap: nowrap | wrap | wrap-reverse;
}

  • nowrap（默认）：不换行；

  • wrap：换行，第一行在上方；(从最上方开始排)

    wrap

  • wrap-reverse：换行，第一行在下方。（从最下方开始排）

wrap-reverse

flex-flow

是flex-direction和flex-wrap的简写，默认row nowrap

1
2
3
.box{
    flex-flow: <flex-direction> || <flex-wrap>;
}

例：

1
2
3
.box{
    flex-flow:row-reverse wrap;
}

justify-content

定义项目在主轴上的对齐方式

1
2
3
.box {
   justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline;
}

  • flex-start

    flex-start

  • flex-end

    flex-end

  • center

    center

  • space-between

    space-between

  • space-around

    1560854850528

  • space-evenly （注意区别space-around，此状态下item外的空隙大小是相等的）

    1560854765366

  • stretch 项目当前对齐方向上拉伸

align-items

定义项目在交叉轴上如何对齐

1
2
3
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-items

align-content

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用(要有多行item)

1
2
3
.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。(给子元素设置高度与不设置高度效果是不一样的)

align-content

项目属性

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order

定义项目的排列顺序。数值越小，排列越靠前，默认为0

1
2
3
.item {
  order: <整数>;
}

此属性没搞明白。。。上图就完事了~

order

flex-grow

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

给任意项目设置该属性时，该项目的width失效

1
2
3
.item {
  flex-grow: <number>; /* default 0 */
}

flex-grow

例：当存在容器宽度为800px，容器中存在三个项目，宽度均为100px；即剩余500px的空间。

1
2
3
4
5
<div class="container">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
</div>
1
2
3
4
5
6
.container {
	width: 800px;
}
.item {
	width: 100px;
}

1、当给item1设置flex-grow: 1时，item1的width失效，剩余宽度由500px变为600px，又因为item1的flex-grow: 1则item1占据全部剩余宽度，item1的宽度为600px；

此时三个item的宽度分别为600px，100px，100px。

2、若再给item2设置flex-grow: 3时，item2的width失效，此时剩余宽度为700，item1和item2以 1：3的比例占据剩余空间，此时三个item的宽度分别为175px，525px，100px。

1
阮大佬的原话：如果所有项目的`flex-grow`属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的`flex-grow`属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

注意区别flex-grow，flex-grow是容器空间多余后起作用，flex-shrink是容器空间被项目充满后起作用。

1
2
3
.item {
  flex-shrink: <number>; /* default 1 */
}

1、当存在宽度为900px的容器，容器中有三个宽度为400px的项目，很显然项目总宽度大于900px；此时flex-shrink默认为1；则三个项目以1：1：1平分900px，每个项目宽度为300px；

2、当给item1设置flex-shrink:2，item2设置flex-shrink: 4，此时三个项目会以2：4：1的比例平分900px；项目宽度分别为200px，400px，100px。

flex-basis

定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

1
2
3
.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex

是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

1
2
3
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self

属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

1
2
3
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

flex-start

本文是在阮一峰的博客的基础上添加部分个人理解和补充。

最后更新： 2019年09月02日 11:05

原始链接： https://HowlCN.github.io/2018/04/18/Flex布局/

赏
× 请我吃糖~
打赏二维码