?> 背景知识：:point_right: 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/
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}}
- row：默认值，主轴为水平方向,表示从左向右排列
- row-reverse：主轴为水平方向，从右向左排列
- column：主轴为垂直方向，从上向下排列
- column-reverse：主轴为垂直方向，从下向上排列
**作用：**决定项目在一条轴线排不下时如何换行。
flex-wrap: nowrap | wrap | wrap-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}}
- nowrap：默认值，不换行
- wrap：换行，第一行在上方
- row-reverse：换行，第一行在下方
作用：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-wrap: <flex-direction> || <flex-wrap>;
- row nowrap：默认值，主轴为水平方向，不换行
<flex-direction>：同flex-direction<flex-wrap>：同flex-wrap
**作用：**定义项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-round | space-evenly;<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}}
- flex-start：默认值，左对齐
- flex-end：右对齐
- center：居中
- space-evenly：每个项目之间及两端的间隔都相等
- space-around：每个项目两侧间隔相等
- space-between：两端对齐，项目之间间隔相等
**作用：**定义项目在交叉轴（默认方向从上到下）上的对齐方式。
align-items: flex-start | flex-end | center | 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}}
- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- cente：交叉轴的中心对齐
- baseline：项目第一行文字的基线对齐
- stretch：默认值，项目未设置固定高度时，将占满整个容器
**作用：**定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
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}}
- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：交叉轴的中心对齐
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布等
- space-around：每根轴线两侧的间隔都相
- stretch：默认值，轴线占满整个交叉轴
**作用：**定义项目的排列顺序。
order: <number>;<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}}
<number>：值为整数，数值越小，排列越靠前，默认为0
order: {{$.order}}
<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>;<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}}
<number>：值为整数，数值越大，项目占据空间越大，默认为0
flexGrow: {{$.flexGrow}}
<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>;<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}}
<number>：值为整数，数值越大，项目占据空间越小，默认为0
flexShrink: {{$.flexShrink}}
<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;<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}}
<length>：默认为auto，即项目的原始尺寸；也可设置和width或height属性一样的值（比如329px），则项目将占据固定空间。
flexBasis: {{$.flexBasis}}
<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-grow,flex-shrink和flex-basis的简写，后两个属性可选。
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
0 1 auto：默认值，不伸缩，如果容器空间不足则等比例收缩1 1 auto：对应关键字auto，如果容器空间多余，则等比例分配多余空间空间；如果容器空间不足则等比例收缩0 0 auto：对应关键字none，按项目原始大小分配空间
**作用：**定义单个项目的对齐方式，可覆盖align-items属性。
align-self: auto | 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}}
- auto：默认值，继承父元素的
align-items属性，如果没有父元素，则等同于stretch- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：交叉轴的中心对齐
- baseline：项目第一行文字的基线对齐
- stretch：未设置固定高度是，将占满整个容器
{{$}}
<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>