Flexbox 的概念

Flexbox 翻译为弹性盒子:

• 弹性盒子 是一种 用于按行或按列布局元素的一维布局方法
• 元素可以膨胀以填充额外的空间,收缩以适应更小的空间;

通常我们把使用Flexbox来布局的方案 称之为 flex 布局(flex layout).

flex 布局是 目前web开发中使用最多的布局方案:

1. 目前特别在移动端可以说是已经完全普及
2. 在PC端 也几乎 已经完全普及和使用,只有非常少数的网站依然在使用浮动布局

为什么需要flex布局呢?

长久以来,css 布局中唯一可靠且跨浏览器的布局工具只有floats 和postioning

但是这两种方法本身存在很大的局限性,并且把他们用于布局实在是无奈之举.

floats 和postioning布局的痛点

• 比如使容器的所有子项等分可用宽度/高度,而不管有多少宽度/高度可用
• 比如使多布局中的多有列采用相同的高度,即使他们包含的内容量不同

以及诸如此类的问题都无法通过传统布局简单的解决,所以大家非常期待一种用于对元素布局的方案,于是flex 布局出现了

Nature and nature's laws lay hid in night; God said "Let Newton be" and all was light.

漫漫长夜中自然与自然的法则被长久隐藏,于是上帝说,让牛顿出现吧！于是世界就明亮了起来.

flexbox 的兼容性

flexbox 在使用时,我们最担心的是它的兼容性问题:

我们可以在caniuse 上查询到具体的兼容性

可以看到 flexbox 布局的兼容 浏览器的比例 已经达到了 98%,绝大多数的浏览器和浏览器对应的版本都可以兼容,部分浏览器版本需要通过一些工具进行兼容.

当然如果你要开发ie 的 6-9版本的web 应用程序的话,上帝说,它无能为力.

flex 布局的重要 概念

flex布局-容器 & 子项:

• 开启了flex 布局的元素叫 flex container
• flex container 里面的直接元素叫做 flex item

这是两个非常重要的概念,一切flex 的应用都从这里开始.下面添加一张图片方便理解

flex item 的特点

felx item 具有以下几个 特点

1. flex item 的布局 将受 flex container 属性的设置来进行控制和布局;
2. flex item 不再严格区分块级元素和行内级元素
3. flex item 默认情况下是包裹内容的,但是可以 设置宽度和高度

如何设置一个html 元素为 flex 容器

设置 display 属性为flex或者 inline-flex 可以成为 flex container

• flex: flex container 以 block-level 形式存在
• inline-flex: flex container 以 inline-level 形式存在

flex 布局-主轴,交叉轴

• 主轴:主轴是指 flex布局中的 子项的排列方向,
• 交叉轴:**交叉轴是根据主轴方向而决定的一个概念,
• 主轴方向为水平(row,row-reserve)时,交叉轴方向为从上到下,
• 主轴方向为竖向时(column,column-reserve),交叉轴方向为水平从左到右**.

容器,子项,主轴,交叉轴

这里 对 容器,子项,主轴,交叉轴 这几个概念 做一个总结.

1. 要使用flex 布局,我们要做的第一件事,就是设置一个flex 布局的容器,而设置一个html 元素为容器的方法就是设置 这个html 元素的display 属性.
2. 子项是容器的直接子元素,容器的孙子元素并不属于容器的子项,也就是说flex 布局不具备继承性
3. 主轴 决定了 在容器中的子项是如何排布,横向或纵向
4. 交叉轴是和主轴紧密相关的一个概念,主轴的方向,直接决定了交叉轴的方向.

flex 布局学什么?

其实在我们完全理解了 上述的几个核心概念后,flex布局的学习 较为困难的地方就已经学了一多半.

另外我们只需要准确理解如下两个方面的知识即可.

• flex布局在容器上 的设置的几个属性,及其对应的值的作用
• flex 布局在子项上设置的几个属性,及其对应的作用

应用在flex container 上的 css 属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

应用在 flex items 上的 css 属性

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

应用在容器(flex container)上的 css 属性

1.flex-direction

flex items 默认是沿着 main axis(主轴) 从 main start 开始往 main end 方向 排布

• flex-direction 决定了 main axis 的方向,有四个取值
• 四个取值: row(默认值),row-reverse,column,column-reverse
  • row:横向排布,主轴方向从左到右
  • row-reverse:横向排布,方向从右到左
  • column:纵向排布,方向从上到下
  • column:纵向排布,方向从下到上

2.flex-wrap

flex-wrap 决定了 flex container 是单行还是多行

• nowrap(默认):单行
• wrap:多行
• wrap-reverse:多行反转(对比wrap,cross start 与cross end 相反)

需要注意的是,这里的行也是一个相对的概念,可以是横向的多行,也可以是竖向的多列,取决于flex-direction 的设定,后续会在实践篇中进行实操,这里只做理解.

3.flex-flow

flex-flow 属性是 flex- direction和 flex-wrap的简写

顺序任何,并且都可以省略

<'flex-direction'> || <'flex-wrap'>

4.justify-content

justify-content 决定了 flex items 在main axis 上的对齐方式

• flex-start(默认值):与 main start 对齐
• flex-end: 与main end 对齐
• center:居中对齐
• space-between:
  • flex itmes 之间的距离相等
  • 与mian start ,main end 两端对齐
• space-around:
  • flex itmes 之间的距离相等
  • flex items 与 main start ,main end 之间的距离 是 flex items 之间距离的一半
• space-evenly:
  • flex items 之间的距离相等
  • flex items 与main start ,main end 之间的距离 等于 flex items 之间的距离

5.align-items

algin-items 决定了 flex-items 在 cross axis 上的对齐方式

• normal:在弹性布局中,效果和stretch 一样
• stretch:当 flex items 在cross axis 方向的 size为auto 时,会自动拉伸至填充 flex container
• flex-start: 与 cross start 对齐
• flex-end: 与 cross end 对齐
• center: 居中对齐
• baseline: 与基准线对齐

6.align-content

align-content 决定了 多行 flex items 在cross axis 上的 对齐方式,用法与justify-content 类似

• stretch(默认值):与align-items 的 stretch 类似
• flex-start: 与 cross start 对齐
• flex-end: 与 cross end 对齐
• center: 居中对齐
• space-between:
  • flex items 之间的距离相等
  • 与 cross start ,cross end 两端对齐
• space-around:
  • flex items 之间的距离相等
  • flex itmes 与 corss start,cross end 之间的距离是flex items 之间距离的一半
• space-evenly:
  • flex itmes 之间的距离相等
  • flex items 与corss start ,cross end 之间的距离等于 flex items 之间的距离

应用在 flex items 上的 css 属性

1.flex-items 属性 - order

order 决定了 flex itmes 的排布顺序

• 可以设置任意整数(正整数,0,负整数),值越小就越排在前面
• 默认值是 0

2. flex-items 属性 - align self

flex itms 可以 通过 align slef 覆盖 flex container 设置的align-items auto (默认值):遵从 flex container 的algin-items 的设置 stetch,flex-start,flex-end,center,baseline,效果跟align-items 一致

3.flex-item 属性 - flex-grow

flex-grow 决定了 flex itmes如果拓展(拉伸/成长)

• 可以设置任意非负数字(正小数,正整数,0),默认值是 0
• 当 flex container 在 main axis 方向上 有剩余 size时,flex-grow 属性才会生效

如果 所有flex items 的flex-grow 总和 sum 超过 1,每个 flex item 拓展的size为

• flex container 的剩余 size * flex-grow / sum

flex items 拓展后的最终size 不能超过 max-width\max-height

4.flex-item 属性 - flex-shrink

flex-shrink 决定了 flex items 如何收缩(缩小)

• 可以设置 任意 非负数字(正小数,正整数,0), 默认值 是1
• 当 flex items 在main axis 方向上** 超过了 flex container 的size, flex-shrink 属性才会有效**

如果所有 flex items 的flex-shrink 总和 超过1,每个flex item 收缩的 size 为

• flex items 超出 flex container 的size * 收缩比例 / 所有 flex items 的收缩比例之和

flex items 收缩后的最终 size 不能 小于 min-width\min-height

5.flex-item 属性- flex-basis

flex-basis 用来设置 flex items 在 main axis 方向上的 base size

auto(默认值),具体的宽度数值(100px)

决定 flex items 最终base size 的因素,优先级从高到低

1. max-width\max-height\min-width\min-height
2. flex-basis
3. width\height
4. 内容本身的size

6.flex-item 属性- flex 属性

flex 是 flex-grow|| flex-shrink|| flex-basis 的简写,属性 可以指定1个,2个或者3个

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

**单值语法:

值必须为以下其中之一:**

• 一个无单位数(): 它会被当作的值。
• 一个有效的宽度(width)值: 它会被当作 的值。
• 关键字none，auto或initial.

双值语法:

第一个值必须为一个无单位数，并且它会被当作 的值。第二个值必须为以下之一：

• 一个无单位数：它会被当作 的值。
• 一个有效的宽度值: 它会被当作 的值

三值语法:

• 第一个值必须为一个无单位数，并且它会被当作 的值。
• 第二个值必须为一个无单位数，并且它会被当作 的值。
• 第三个值必须为一个有效的宽度值， 并且它会被当作 的值。

思考 : 如何解决如下的布局问题

解决方案 欢迎翻阅- css布局方式三:flex 布局 -操作篇