Flex弹性布局（附超Q小demo

简介

Flex 是 Flexible Box 的缩写，意为弹性布局，任何一个容器都可以指定为Flex布局，包括行内元素，如下：

    div{
      display: flex;
    }
复制代码

    span{
      display: inline-flex;
    }
复制代码

注意：

1. 戳此查看兼容性；

2. Webkit内核的浏览器，要加上-webkit-前缀；

3. 设为Flex布局以后，子元素的float、clear、vertical-align将会失效；

4. 设为Flex布局的容器，都会默认存在两个轴，水平的主轴(main axis)和垂直的交叉轴(cross axis)。

一览无余

Flex主要分为6个容器属性和6个项目属性，见下图：

下面将详细介绍以上属性。

容器的属性

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-items

• align-content

1.flex-direction

作用：主轴的方向，即项目的排列顺序

取值：row | row-reverse | column | column-reverse

默认：row

示例：

2.flex-wrap

作用：项目在一条轴线排不下时的换行方式

取值：nowrap | wrap | wrap-reverse

默认： nowrap

示例：

3.flex-flow

作用：flex-direction和flex-wrap的简写

取值：<flex-direction> || <flex-wrap>

默认：row nowrap

4.justify-content

作用：项目在主轴上的对齐方式

取值：flex-start | flex-end | center | space-between | space-around

• space-between: 两端对齐，项目之间的间隔都相等；

• space-around: 每个项目两侧的间隔相等。

默认： flex-start

示例：

5.align-items

作用：项目在交叉轴上的对齐方式

取值：flex-start | flex-end | center | baseline | stretch

• baseline: 项目的第一行文字的基线对齐；

• stretch: 如果项目未设置高度或设为auto，将占满整个容器的高度。

默认：stretch

示例：

6.align-content

作用：多跟轴线的对齐方式，如果项目只有一根轴线，该属性不起作用

取值：flex-start | flex-end | center | space-between | space-around | stretch

• space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布；

• space-around: 每根轴线两侧的间隔都相等；

• stretch: 轴线占满整个交叉轴。

默认：stretch

示例：

项目的属性

• order

• flex-grow

• flex-shrink

• flex-basis

• flex

• align-self

1.order

作用：项目的排列顺序，数值越小越靠前

取值：<integer>

默认：0

示例：

以item1为例,注意观察item1的变化。

2.flex-grow

作用：定义项目的放大比例

取值：<number>

• 如果所有项目该值都为1，则代表等分。

默认：0 (如果存在剩余空间也不放大)

示例：

以item1为例,注意观察item1的变化。

3.flex-shrink

作用：项目的缩小比例，即如果空间不足，该项目将缩小

取值：<number>

• 负值无效；

• 如果所有项目该值都为1，则代表空间不足时，等比例缩小；

• 如果一个项目该值为0，其余都为1，则代表当空间不足时，该项目不缩小。

默认：1

示例：

以item1为例,注意观察item1的变化。

4.flex-basis

作用：项目占据的主轴空间

取值：<number>

默认：auto(项目本身的大小)

示例：

以item1为例,注意观察item1的变化。

5.flex

作用：flex-grow、flex-shrink 和 flex-basis的简写

取值：none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

• flex-shrink、flex-basis为可选属性；

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

默认：0 1 auto

常见简写：

auto === 1 1 auto

none === 0 0 auto

initial === 0 1 auto

<number> === <number> 1 auto

1 === 1 1 auto
复制代码

6.align-self

作用：单个项目与其他项目不同的对齐方式，可覆盖align-items

取值：auto | flex-start | flex-end | center | baseline | stretch

默认：auto(表示继承父元素的align-items,如果没有父元素，则等同于stretch)

示例：

以item1为例,注意观察item1的变化。

参考

Flex 布局教程：语法篇

小结

本文主要介绍了flex基础布局的6个容器属性与项目属性，并附有超Q示例。顺带推荐FlexBox Froggy给大家练习（也就是本文示例?的大?）。

感谢阅读，如有问题，欢迎指正。

转载于:https://juejin.im/post/5cba07005188251b960f56eb