Flex 布局

?> 背景知识： flex, flex 布局的基本概念

Flex布局的全称为CSS Flexible Box Layout Module，是W3C提出的一种新型页面布局方案，第一个版本于2009年推出，到现在为止，W3C一共发布了12个版本，最新版本于20171019推出，已经得到了所有主流浏览器的支持，所以请大胆的使用吧~

历史版本:

https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/
https://www.w3.org/TR/2016/CR-css-flexbox-1-20160301/
https://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/
https://www.w3.org/TR/2014/WD-css-flexbox-1-20140925/
https://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/
https://www.w3.org/TR/2012/CR-css3-flexbox-20120918/
https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/
https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/
https://www.w3.org/TR/2011/WD-css3-flexbox-20111129/
https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/
https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/

Flexbox 原理演示

A Visual Guide to CSS3 Flexbox Properties

**感谢：**以上演示Fork自xluos的Flexbox演示站~

Flex布局由容器flex container和项目flex item两部分组成，容器默认存在两根轴：水平的主轴main axis和垂直的交叉轴cross axis，项目默认以主轴排列。 Flex属性包括容器属性和项目属性两部分，容器上可设置：flex-direction、flex-wrap、flex-grow、justify-content、align-items、align-content6个属性，项目上同样可设置6个属性，分别为：order、flex-grow、flex-shrink、flex-basis、flex、align-self。示例如下：

容器属性

---

flex-direction属性

**作用：**决定主轴的方向。

• row：默认值，主轴为水平方向,表示从左向右排列
• row-reverse：主轴为水平方向，从右向左排列
• column：主轴为垂直方向，从上向下排列
• column-reverse：主轴为垂直方向，从下向上排列

<script v-pre type="text/x-template" id="flexDirection"> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { display: flex; flex-direction: row; } .item { width: 20%; height: 29px; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; } </style> {{radio.value}} <script> module.exports = { data () { return { elements: Array.from({length: 5}).map((v, i) => i + 1), radios: [ {id: 'row', value: 'row'}, {id: 'row-reverse', value: 'row-reverse'}, {id: 'column', value: 'column'}, {id: 'column-reverse', value: 'column-reverse'}, ], flexDirection: 'row', } }, methods: { handleSelected(dir) { this.flexDirection = dir; } } } </script> </script>

flex-wrap属性

**作用：**决定项目在一条轴线排不下时如何换行。

• nowrap：默认值，不换行
• wrap：换行，第一行在上方
• row-reverse：换行，第一行在下方

<script v-pre type="text/x-template" id="flexWrap"> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { display: flex; flex-wrap: nowrap; } .item { width: 20%; height: 29px; max-width: 155px; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; } </style> {{radio.value}} <script> module.exports = { data () { return { elements: Array.from({length: 6}).map((v, i) => i + 1), radios: [ {id: 'nowrap', value: 'nowrap'}, {id: 'wrap', value: 'wrap'}, {id: 'wrap-reverse', value: 'wrap-reverse'}, ], flexWrap: 'nowrap', } }, methods: { handleSelected(dir) { this.flexWrap = dir; } } } </script> </script>

flex-glow属性

作用：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

• row nowrap：默认值，主轴为水平方向，不换行
• <flex-direction>：同flex-direction
• <flex-wrap>：同flex-wrap

justify-content属性

**作用：**定义项目在主轴上的对齐方式。

• flex-start：默认值，左对齐
• flex-end：右对齐
• center：居中
• space-evenly：每个项目之间及两端的间隔都相等
• space-around：每个项目两侧间隔相等
• space-between：两端对齐，项目之间间隔相等

<script v-pre type="text/x-template" id="justifyContent"> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { display: flex; justify-content: flex-start; } .item { width: 20%; height: 29px; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; } </style> {{radio.value}} <script> module.exports = { data () { return { elements: Array.from({length: 3}).map((v, i) => i + 1), radios: [ {id: 'flex-start', value: 'flex-start'}, {id: 'flex-end', value: 'flex-end'}, {id: 'center', value: 'center'}, {id: 'space-evenly', value: 'space-evenly'}, {id: 'space-around', value: 'space-around'}, {id: 'space-between', value: 'space-between'}, ], justifyContent: 'flex-start', } }, methods: { handleSelected(dir) { this.justifyContent = dir; } } } </script> </script>

align-items属性

**作用：**定义项目在交叉轴（默认方向从上到下）上的对齐方式。

• flex-start：交叉轴的起点对齐
• flex-end：交叉轴的终点对齐
• cente：交叉轴的中心对齐
• baseline：项目第一行文字的基线对齐
• stretch：默认值，项目未设置固定高度时，将占满整个容器

<script v-pre type="text/x-template" id="alignItems"> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { display: flex; align-items: stretch; } .item { width: 20%; height: 29px; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; } </style> {{radio.value}} <script> module.exports = { data () { return { elements: Array.from({length: 5}).map((v, i) => i + 1), radios: [ {id: 'flex-start', value: 'flex-start'}, {id: 'flex-end', value: 'flex-end'}, {id: 'center', value: 'center'}, {id: 'baseline', value: 'baseline'}, {id: 'stretch', value: 'stretch'}, ], alignItems: 'stretch', } }, methods: { handleSelected(dir) { this.alignItems = dir; } } } </script> </script>

align-content属性

**作用：**定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

• flex-start：交叉轴的起点对齐
• flex-end：交叉轴的终点对齐
• center：交叉轴的中心对齐
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布等
• space-around：每根轴线两侧的间隔都相
• stretch：默认值，轴线占满整个交叉轴

<script v-pre type="text/x-template" id="alignContent"> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { height: 399px; display: flex; flex-wrap: wrap; align-content: stretch; } .item { width: 20%; height: 29px; max-width: 155px; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; } </style> {{radio.value}} <script> module.exports = { data () { return { elements: Array.from({length: 15}).map((v, i) => i + 1), radios: [ {id: 'flex-start', value: 'flex-start'}, {id: 'flex-end', value: 'flex-end'}, {id: 'center', value: 'center'}, {id: 'space-between', value: 'space-between'}, {id: 'space-around', value: 'space-around'}, {id: 'stretch', value: 'stretch'}, ], alignContent: 'stretch', } }, methods: { handleSelected(dir) { this.alignContent = dir; } } } </script> </script>

项目属性

---

order属性

**作用：**定义项目的排列顺序。

• <number>：值为整数，数值越小，排列越靠前，默认为0

<script v-pre type="text/x-template" id="order"> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { display: flex; } .item { width: 20%; height: 29px; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; color: #f4f0ea; text-align: center; padding-top: 4px; } </style> 👉🏿🔀: {{res}} <script> module.exports = { data () { return { elements: [ {id: 1, order: 1}, {id: 2, order: 2}, {id: 3, order: 3}, {id: 4, order: 4}, {id: 5, order: 5}, ], res: 0, } }, methods: { shuffle() { const i = Math.floor(Math.random() * 5); this.res = this.elements[i].order = Math.floor(Math.random() * 29); } } } </script> </script>

flex-grow属性

**作用：**定义项目的伸缩比例，按照该比例给项目分配空间。

• <number>：值为整数，数值越大，项目占据空间越大，默认为0

<script v-pre type="text/x-template" id="flexGrow"> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { display: flex; } .item { height: 29px; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; color: #f4f0ea; text-align: center; padding-top: 4px; } </style> 👉🏿🔀: {{res}} <script> module.exports = { data () { return { elements: [ {id: 1, flexGrow: 1}, {id: 2, flexGrow: 1}, {id: 3, flexGrow: 1}, {id: 4, flexGrow: 1}, {id: 5, flexGrow: 1}, ], res: 1, } }, methods: { shuffle() { const i = Math.floor(Math.random() * 5); this.res = this.elements[i].flexGrow = Math.floor(Math.random() * 29); } } } </script> </script>

flex-shrink属性

**作用：**定义项目的收缩比例，按照该比例给项目分配空间。

• <number>：值为整数，数值越大，项目占据空间越小，默认为0

<script v-pre type="text/x-template" id="flexShrink"> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { display: flex; } .item { width: 50%; height: 29px; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; color: #f4f0ea; text-align: center; padding-top: 4px; } </style> 👉🏿🔀: {{res}} <script> module.exports = { data () { return { elements: [ {id: 1, flexShrink: 0}, {id: 2, flexShrink: 1}, {id: 3, flexShrink: 2}, ], res: 1, } }, methods: { shuffle() { const i = Math.floor(Math.random() * 3); this.res = this.elements[i].flexShrink = Math.floor(Math.random() * 4); } } } </script> </script>

flex-basis属性

**作用：**定义在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。

• <length>：默认为auto，即项目的原始尺寸；也可设置和width或height属性一样的值（比如329px），则项目将占据固定空间。

<script v-pre type="text/x-template" id="flexBasis"> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { display: flex; } .item { width: 30%; height: 29px; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; color: #f4f0ea; text-align: center; padding-top: 4px; } </style> 👉🏿🔀: {{res}} <script> module.exports = { data () { return { elements: [ {id: 1, flexBasis: 'auto'}, {id: 2, flexBasis: 'auto'}, {id: 3, flexBasis: 'auto'}, ], res: 1, } }, methods: { shuffle() { const i = Math.floor(Math.random() * 3); this.res = this.elements[i].flexBasis = 129 + Math.floor(Math.random() * 300); } } } </script> </script>

flex属性

**作用：**是flex-grow,flex-shrink和flex-basis的简写，后两个属性可选。

• 0 1 auto：默认值，不伸缩，如果容器空间不足则等比例收缩
• 1 1 auto：对应关键字auto，如果容器空间多余，则等比例分配多余空间空间；如果容器空间不足则等比例收缩
• 0 0 auto：对应关键字none，按项目原始大小分配空间

align-self属性

**作用：**定义单个项目的对齐方式，可覆盖align-items属性。

• auto：默认值，继承父元素的align-items属性，如果没有父元素，则等同于stretch
• flex-start：交叉轴的起点对齐
• flex-end：交叉轴的终点对齐
• center：交叉轴的中心对齐
• baseline：项目第一行文字的基线对齐
• stretch：未设置固定高度是，将占满整个容器

<script v-pre type="text/x-template" id="alignSelf"> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { height: 129px; display: flex; } .item { width: 20%; min-height: 29px; text-align: center; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; color: #f4f0ea; } </style> {{radio.value}} <script> module.exports = { data () { return { elements: [3, 1, 5, 4, 2], radios: [ {id: 'auto', value: 'auto'}, {id: 'flex-start', value: 'flex-start'}, {id: 'flex-end', value: 'flex-end'}, {id: 'center', value: 'center'}, {id: 'baseline', value: 'baseline'}, {id: 'stretch', value: 'stretch'}, ], alignSelf: 'auto', } }, methods: { handleSelected(val) { this.alignSelf = val; } } } </script> </script>

浏览器支持

<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=flexbox&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>