前端笔记：Flex布局

目的

CSS传统的布局方式在现在来说很多时候并不怎么好用，后来出了一种新的布局方式Flex布局（Flexible Box 弹性盒子）。Flex布局和Android里的LinearLayout（线性布局）或者WPF里的WrapPanel稍微有些相似

基础说明

在代码中我们只要把某个元素的 display 属性设置为 flex 或者 inline-flex ，那么这个元素就会成为Flex父 容器 ，它下面直接的子元素将成为Flex子 元素 。默认情况下Flex子元素会在Flex父容器内沿一条直线分布，这条线被称为 主轴 ，而与主轴垂直的线则被称为 交叉轴 。

容器的属性

排列方式

flex-direction

flex-direction属性用于决定容器内元素的排列方向，可选参数如下：

• row 默认值，元素将从左到右以行（水平）形式排列；
• row-reverse 元素将从右到左以行（水平）形式排列；
• column 元素将从上到下以列（垂直）形式排列；
• column-reverse 元素将从下到上以列（垂直）形式排列；

flex-wrap

flex-wrap属性用于决定容器类元素在主轴上排列不下的时候是否换行或列，可选参数如下：

• nowrap 默认值，不换行或列；
• wrap 主轴上排列不下时将自动换行或列（自上而下新增行或自左而右新增列）；
• wrap-reverse 主轴上排列不下时将自动换行或列（自下而上新增行或自右而左新增列）；

flex-flow

flex-flow是flex-direction和flex-wrap两个属性的组合简写形式。第一个值为flex-direction，第二个值为flex-wrap，两者间用空格连接。

对齐方式

align-items

align-items属性用于决定元素在交叉轴上如何对齐，该属性有多个参数可选，这里列出一些常用的：

• stretch 默认值，如果元素未设置主轴方向尺寸或设为auto，将在交叉轴轴方向被拉伸到与容器相同的高度或宽度；
• center 元素将在交叉轴上居中对齐；
• flex-start 元素将沿交叉轴上起始位置对齐；
• flex-end 元素将沿交叉轴上起终止置对齐；
  

align-content

align-content属性在主轴上有行或多列时才有效，表示这些行或列在交叉轴上的对齐方式。该属性有多个参数可选，这里列出一些常用的：

• stretch 默认值，主轴上的行或列将平均的占满所有剩余交叉轴空间；
• center 主轴上的行或列将在交叉轴上居中排列；
• flex-start 主轴上的行或列将紧挨交叉轴上起始位置排列；
• flex-end 主轴上的行或列将紧挨交叉轴上终止位置排列；
• space-between 主轴上的行或列将在交叉轴上平均分布，首尾行或列将紧挨交叉轴两端；
• space-around 主轴上的行或列将在交叉轴上平均分布，首尾行或列与交叉轴两端的距离等于行或列间距的一半；
  

justify-content

justify-content属性用于决定元素在主轴上如何对齐，该属性有多个参数可选，这里列出一些常用的：

• flex-start 默认值，所有元素将依次靠近主轴起始位置对齐；
• flex-end 所有元素将依次靠近主轴起始位置对齐；
• center 所有元素将在主轴上居中对齐；
• space-between 元素将在主轴上平均分布，首尾元素将紧挨主轴两端；
• space-around 元素将在主轴上平均分布，首尾元素与主轴两端的距离等于元素间间距的一半；
  

place-content

place-content是align-content和justify-content两个属性的组合简写形式。第一个值为align-content，第二个值为justify-content，两者间用空格连接。

元素的属性

空间占用

flex-grow

flex-grow属性用来定义元素对于主轴剩余空间的分配比例系数，默认值为 0 ，即如果存在剩余空间也不会放大元素。

flex-shrink

flex-shrink只有在主轴上的元素超出主轴可容纳空间时才有效。该属性用来定义元素的收缩比例系数，默认值为 1 ，即如果元素在主轴上空间不足将缩小。

flex-basis

flex-basis属性表示元素在主轴方向上的尺寸，默认值为 auto ，即该元素自身的 width 或 height。flex-basis也可以用百分比表示，尺寸会相对于主轴的尺寸计算。

flex

flex是flex-grow、flex-shrink和flex-basis三个属性的组合简写形式。该属性的写法比较多：

• 当有三个值时值的顺序为flex-grow、flex-shrink、flex-basis；
• 当有两个值时第一个值为flex-grow，第二个值可以是flex-shrink或flex-basis；
• 当只有一个值的时候如果值有单位，则表示 0 1 flex-basis；
• 当只有一个值并且无单位时表示 flex-grow 1 0；
• 当值为none时，表示0 0 auto；
• 当值为auto时，表示1 1 auto；
• 当值为initial（默认值）时，表示0 1 auto；
  

排列顺序

order

默认情况下元素将按照DOM中的顺序依次排列在父容器内，而order属性可以改变其排列顺序。设置元素的order属性为某个数值，数值越小排列越靠前。默认的order值均为0。

对齐方式

align-self

align-self这个属性功能和上面的align-items相同，只不过align-items是针对容器中所有元素，而align-self是针对元素自身。align-self默认值为 auto ，表示其继承于父容器的align-items。

总结

Flex布局的内容基本就是这些了，更多内容可以参考下面链接：
《CSS 弹性盒子布局》 - MDN
《Flex 布局教程：语法篇》 - 阮一峰的网络日志
《Flex 布局教程：实例篇》 - 阮一峰的网络日志