Flex布局教程

Flex布局

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。Webkit 内核的浏览器，必须加上-webkit前缀。

注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效！
基本概念参考：阮一峰Flex布局教程：语法篇

---

Flex容器属性

任何一个容器都可以指定为 Flex 布局。（display: flex;）
行内元素也可以使用 Flex 布局。（inline-flex）

1. flex-direction（行，列）

2.flex-wrap（是否换行）

3.flex-flow(flex-direction+flex-wrap)

4.justify-content（主轴）

• flex-start flex-end center space-between space-around space-evenly

5.align-items（交叉轴，一行）

(baseline：以最下面的第一行为准线)

6.align-content（交叉轴，多行）

与justify-content类似，只不过管得是交叉轴。（多行可用）

---

Flex项目属性

1.order

缺省为0，可用负数，作用从小到大顺序排列

2.flex-grow

定义项目的放大比例，支持正整数，默认为零（有剩余空间也不放大）。如果所有项目的flex-grow属性都为相同数值，则均分剩余空间。

3.flex-shrink，flex-basis

flex-basis表示项目占据的主轴空间，默认值为auto；
flex-shrink定义了项目的缩小比例，默认为1，如果空间不足，则该项目缩小；若有一个为0，其余项目为1，则前者不缩小；负值对该属性无效。

p.s.两个属性结合着用，可以看效果。

4.flex属性

2和3的简写，默认值为0 1 auto，后两个属性可选。

基本语法：

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

5.align-self属性

允许单个项目与其他项目有不一样的对齐方式，可以覆盖掉align-items属性，默认值为auto，表继承父元素的align-items属性，若无父元素，则等同于stretch。

---

布局实战

个人实战练习：骰子 codepen
个人实战练习：网格布局&圣杯布局 codepen

圣杯布局（Holy Grail Layout）简介

实战项目参考：Solved by Flexbox

---

拓展

+ Flex布局与Grid布局对比：转知乎

Flexbox 是一维布局系统，适合做局部布局，比如导航栏组件。Grid 是二维布局系统，通常用于整个页面的规划。二者从应用场景来说并不冲突。虽然 Flexbox 也可以用于大的页面布局，但是没有 Grid 强大和灵活。二者结合使用更加轻松。