CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。
写了一个简单的单页面程序，可以在上面进行演示以查看效果，演示地址：https://codepen.io/f_zz/pen/NmPKav。
你也可以复制下面的代码在本地演示：
<!DOCTYPE html>
<html>
<head>
<title>Flexible Box Layout show</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
h2 {
text-align: center;
}
.box {
display: flex;
width: 400px;
height: 300px;
border: 2px dotted #87a7bd;
}
.box > div{
border: 2px solid #87a7bd;
border-radius: 5%;
background-color: rgba(96, 139, 168, .2);
}
#item2{
background-color: #d4d6f3c7;
}
#item3{
background-color: #e0d4dcd9;
}
.flexBox{
display: flex;
justify-content: space-around;
}
.left, .right{
width: 300px;
}
.left > *{
margin-left: 100px;
}
.item{
display: inline;
}
.item input{
width: 40px;
}
.boxLabel{
color: #f32d50;
font-style: italic;
}
.itemLabel{
color: #0e67f1;
font-style: italic;
}
#editor, #showing{
display: flex;
margin-top: 30px;
justify-content: center;
}
#showing{
margin-top: 0px;
align-items: center;
}
#showing > p{
margin-right: 10px;
font-size: 24px;
}
#editor > textarea{
width: 400px;
height: 67px;
}
h2 > span{
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<h2 title="2019@fzz">Flexible Box Layout <span @click="openUrl('')">show</span></h2>
<div class="flexBox">
<!--left-->
<div class="left">
<!--boxStyle-->
<h3>boxStyle</h3>
<div v-for="(style, k) in boxStyle">
<label class="boxLabel" @click="showing(k, 'boxLabel')"> {{k}} </label>
<br>
<select @change="doChange($event, 'boxLabel')" :name="k">
<option v-for="op in _data[k]"> {{op}} </option>
</select>
</div>
</div>
<!--box-->
<div class="box" :style="boxStyle">
<div title="doubleClicking and editing it's html" @dblclick.prevent="changeEditor" v-for="(html, id) in itemIds" :id="id" :style="_data[itemStyle[id]]" v-html="html"></div>
</div>
<!--left-->
<div class="right">
<!--itemStyle-->
<h3>itemStyle</h3>
<div v-for="(style, k) in item1Style">
<label class="itemLabel" @click="showing(k, 'itemLabel')"> {{k}} </label>
<br>
<div v-for="(v, i) in itemStyle" class="item">
<label> {{i}} </label><input :name="k" :value="_data[_data.itemStyle[i]][k]" @keyup="doChange($event, 'itemLabel', _data.itemStyle[i])">
</div>
</div>
</div>
</div>
<!--editHtml-->
<div id="editor">
<textarea @keyup="editHtml" spellcheck="false" v-model="editStr" placeholder="edit item's html from here!"></textarea>
</div>
<!--Description-->
<div id="showing">
<p :class="currentShowingClass">{{showingP}}</p>
<span>{{showingContent}}</span>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
info: 'Flexible Box为css提供的基于盒子模型的弹性布局',
boxStyle: {
flexDirection: 'row',
flexWrap: 'nowrap',
justifyContent: 'flex-start',
alignItems: 'flex-strat',
alignContent: 'flex-strat',
},
flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'],
flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
justifyContent: ['flex-strat', 'flex-end', 'center', 'space-between', 'space-around'],
alignItems: ['flex-strat', 'flex-end', 'center', 'baseline', 'stretch'],
alignContent: ['flex-strat', 'flex-end', 'center', 'space-around', 'space-between', 'stretch'],
flexFlow: ['row', 'nowrap'],
itemIds: {
item1: 'item1',
item2: 'item2222222',
item3: 'item<br>333'
},
itemStyle: {
item1: 'item1Style',
item2: 'item2Style',
item3: 'item3Style'
},
item1Style: {
order: 0,
flexGrow: 0,
flexShrink: 0,
flexBasis: 'auto',
alignSelf: 'auto'
},
item2Style: {
order: 0,
flexGrow: 0,
flexShrink: 0,
flexBasis: 'auto',
alignSelf: 'auto'
},
item3Style: {
order: 0,
flexGrow: 0,
flexShrink: 0,
flexBasis: 'auto',
alignSelf: 'auto'
},
alignSelf: ['auto', 'flex-strat', 'flex-end', 'center', 'baseline', 'stretch'],
flex: [0, 1, 'auto'],
editStr: '',
editorId: 'item1',
currentShowingClass: '',
showingP: '',
showingContent: '',
showings: {
Flex: '是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。',
flexDirection: '属性决定主轴的方向（即项目的排列方向）。row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。',
flexWrap: '属性默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。nowrap（默认）：不换行。wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。',
justifyContent: '属性定义了项目在主轴上的对齐方式。flex-start（默认值）：左对齐；flex-end：右对齐；center： 居中；space-between：两端对齐，项目之间的间隔都相等；space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。',
alignItems: '属性定义项目在交叉轴上如何对齐。flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。',
alignContent: '属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值）：轴线占满整个交叉轴。',
order: '属性定义项目的排列顺序。数值越小，排列越靠前，默认为0',
flexGrow: '属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。',
flexShrink: '属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值对该属性无效。',
flexBasis: '属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。',
alignSelf: '属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。',
},
},
created(){
this.showingP = 'Flex';
this.showingContent = this.showings.Flex;
},
methods: {
doChange: function(e, showClass, item){
var target = e.target;
if(!target){
return;
}
var name = target.name,
value = target.value;
if(this.boxStyle.hasOwnProperty(name)){
this.boxStyle[name] = value;
}else if(this[item] && this[item] && this[item].hasOwnProperty(name)){
this[item][name] = value;
}
this.showing(e.target.name, showClass);
},
changeEditor: function(e){
this.editorId = e.target.id;
this.editStr = this.itemIds[this.editorId];
},
editHtml: function(e){
this.itemIds[this.editorId] = this.editStr;
},
showing(name, showClass){
name = name || 'Flex';
this.showingP = name;
this.showingContent = this.showings[name];
this.currentShowingClass = showClass || '';
},
openUrl: function(url){
url = url || 'http://www.cnblogs.com/fzz9/';
window.open(url, '_blank')
}
}
});
</script>
</html>
参考
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout
http://www.runoob.com/w3cnote/flex-grammar.html
