Flex弹性布局(附超Q小demo 🐸 )

2,791 阅读3分钟

简介

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

    div{
      display: flex;
    }
    span{
      display: inline-flex;
    }

注意:

  1. 戳此查看兼容性;

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

  3. 设为Flex布局以后,子元素的floatclearvertical-align将会失效;

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

一览无余

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

Flex

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

容器的属性

  • flex-direction

  • flex-wrap

  • flex-flow

  • justify-content

  • align-items

  • align-content

1.flex-direction

作用:主轴的方向,即项目的排列顺序

取值:row | row-reverse | column | column-reverse

默认:row

示例:

flex-direction

2.flex-wrap

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

取值:nowrap | wrap | wrap-reverse

默认: nowrap

示例:

flex-wrap

3.flex-flow

作用:flex-directionflex-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

示例:

justify-content

5.align-items

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

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

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

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

默认:stretch

示例:

align-items

6.align-content

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

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

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

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

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

默认:stretch

示例:

align-content

项目的属性

  • order

  • flex-grow

  • flex-shrink

  • flex-basis

  • flex

  • align-self

1.order

作用:项目的排列顺序,数值越小越靠前

取值:<integer>

默认:0

示例:

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

order

2.flex-grow

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

取值:<number>

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

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

示例:

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

flex-grow

3.flex-shrink

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

取值:<number>

  • 负值无效;

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

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

默认:1

示例:

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

flex-shrink

4.flex-basis

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

取值:<number>

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

示例:

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

flex-basis

5.flex

作用:flex-growflex-shrinkflex-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的变化。

align-self

参考

Flex 布局教程:语法篇

小结

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

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