Flex布局介绍

 Flex布局介绍

传统的布局解决方案--盒状模型--diplay + position + float

缺陷：对于一些特殊布局（垂直居中）和网格式布局（几行几列）不易实现

09年W3C颁布的--flex布局--使用简单、API完整丰富、响应式动态地实现各种页面布局（一些常见的布局思想）

当然针对Gekco30+以下，最好的布局选择就是flex了，更新式的Grid布局它不支持。

本文来源地：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ，一个非常好的CSS内容及前端资讯的网站

Flex

Flexible Box弹性布局

任意容器都可以指定成flex布局：

.box {
  display: flex;
}
<!-- 行内元素 -->
.box {
  display: inline-flex;
}

设为flex布局后，子元素的float、clear、vertical-align将失效

称采用Flex布局的元素为Flex容器（flex container），它的所有子元素自动成为容器成员，称为Flex项目(flex item)。

• 两根轴：
• 水平主轴 main axis
  • 主轴与边框的左右交叉点 main start/main end
  
• 垂直交叉轴 cross axis
  • 交叉轴与边框的上下交叉点 cross start/cross end
  
• 项目（flex item）默认沿主轴排列，单项目占据的主轴空间/交叉轴空间 main size/cross size

flex容器属性

1. flex-direction 决定主轴方向=项目排列方向
2. flex-wrap 定义如何换行
3. flex-flow 它是flex-direction和flex-wrap的简写形式，语法糖
4. justify-content 定义项目在主轴上的对齐方式
5. align-items 定义项目在交叉轴上的对齐方式
6. align-content 定义多根轴线的对齐方式。若项目只有一根轴线则不生效。

1.flex-direction值：

• row(默认值) 主轴为水平方向，起点在左端
• row-reverse 主轴为水平方向，起点在右端
• column 主轴为垂直方向，起点在左端
• column-reverse 主轴为垂直方向，起点在右端

2.flex-wrap值：

• nowrap(默认) 不换行

• wrap 换行，第一行在上方

• wrap-reverse 换行，第一行在下方

默认情况，所有flex项目会排在一条线上，不会自动换行

3.flex-flow默认值：row nowrap

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

4.justify-content值：

• flex-start(默认值) 左对齐

• flex-end 右对齐

• center 居中

• space-between 两端对其，项目间间隔相等

• space-around 单个项目两侧的间隔相等，故项目间间隔相比项目与边框间间隔多一倍

5.align-items值：

• strech(默认值) 如果flex项目未设置高度或设置高度为auto，将占满整个容器的高度

• flex-start 交叉轴起点处对齐

• flex-end 交叉轴终点处对齐

• center 交叉轴中点处对齐

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

6.align-content值：

• strech(默认值)

• flex-start

• flex-end

• center

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

• space-around 单轴线两侧间隔相等。轴线间间隔比轴边间隔大一倍

flex项目属性

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

.item {
  order: <integer>;
}

---

• flex-grow 定义项目放大比例，默认为0

如果所有项目flex-grow属性为1，它们将等分剩余空间。以此类推

---

• flex-shrink 定义项目缩小比例，默认为1

如果所有项目flex-shrink属性为1，当空间不足时等比例缩小。
如果有一个项目flex-shrink为0，其他项目都为1，空间不足时前者不缩小

---

• flex-basis 定义在分配多余空间前，项目占据的主轴空间(main size)

浏览器据此计算主轴是否有多余空间，默认值为auto即项目本来的大小

.item {
  flex-basis: <length> | auto;
}

---

• flex 是flex-grow,flex-shink,flex-basis的简写，语法糖，默认值0,1,auto，后两者可选

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

有两个快捷值：

auto： 1 1 auto

none： 0 0 auto

建议优先使用此属性代替单独写3个分离的属性，因为浏览器会推算相关值。

---

• align-self 允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性

默认值auto，表示继承父元素的align-items，如果没有父元素则等同于strech

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