关于flex的基本概念啥的就不介绍了，直接正题。
基本布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex box</title>
<style media="screen">
* {-webkit-box-sizing: border-box; box-sizing: border-box;}
.container div { background-color: red; border: 1px solid #333; }
.div1 {width: 70px; height: 70px;}
.div2 {width: 50px; height: 50px;}
.div3 {width: 60px; height: 60px;}
.container {width: 299px; height: 300px; background-color: #f0f0f0;}
</style>
</head>
<body>
<div class="container">
<div class="div1">盒1</div>
<div class="div2">盒2</div>
<div class="div3">盒3</div>
</div>
</body>
</html>
写在父容器上的属性
1、flex-direction（排列）
.container {
flex-direction: row ; /*水平排列（同float：left；）*/
row-reverse ; /*水平排列（同float：right；）*/
column ; /*垂直排列-顶部开始*/
column-reverse; /*垂直排列-底部开始*/
}
flex-direction.jpg
2、flex-wrap（换行）
.container{
flex-wrap: nowrap; /*不换行*/
wrap; /*换行，第一行在顶部*/
wrap-reverse; /*换行，第一行在底部*/
}
flex-wrap.jpg
3、flex-flow
.container{
flex-flow: <flex-direction> <flex-wrap>; /*怎么排列(row/column) 怎么换行(nowrap/wrap)*/
}
flex-flow.jpg
4、justify-content
.container{
justify-content: flex-start; /*左对齐（默认值） 类似flex-direction: row;*/
flex-end; /*右对齐 类似flex-direction: row-reverse;*/
center; /*居中*/
space-between; /*两端对齐，项目之间的间隔都相等*/
space-around; /*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍*/
space-evenly; /*每个项目间隔相等。所以，项目之间的间隔与边框的间隔一样大*/
}
justify-content.jpg
5、align-items
.container{
align-items: flex-start; /*顶对齐*/
flex-end; /*底对齐*/
center; /*居中对齐*/
baseline; /*项目的第一行文字的基线对齐*/
stretch; /*（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。案例中没有给盒1和盒3高度*/
}
align-items.jpg
6、align-content
这个属性是基于两条轴线的 如果我的元素还是三个 ，没有出现换行的时候，此属性是没有效果的。增加三个盒子，然后给他们增加一个属性 flex-wrap: wrap就可以了。
.container{
align-content: flex-start; /*与交叉轴的起点对齐*/
flex-end; /*与交叉轴的终点对齐*/
center; /*与交叉轴的中点对齐*/
space-between; /*与交叉轴两端对齐，轴线之间的间隔平均分布*/
space-around; /*每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。*/
stretch; /*（（默认值）：轴线占满整个交叉轴*/
}
align-content.png
写在子元素上的属性
1、order
默认值是零 ，越小的数字排的学靠前；
.div2{
order: 1; /*在这里给div2的子元素增加了这个属性，它就会比其他的排列都靠后*/
}
在这里给div2的子元素增加了这个属性，它就会比其他的排列都靠后；盒5和盒2是都是 div2；
order.png
2、flex-grow
定义子元素的放大比例，默认为0，意思就是即使存在剩余空间，也不会放大；
.div2{
flex-grow: 1; /*拉伸剩余空间*/
}
flex-grow
如果所有子元素的
flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个子元素的
flex-grow属性为2，其他子元素都为1，则前者占据的剩余空间将比其他子元素多一倍。
flex-grow 2.jpg
3、flex-shrink
flex-shrink属性定义了子元素的缩小比例，默认为1，即如果空间不足，该子元素将缩小。
.container{
width: 150px; /*设置父元素的宽度为150px；*/
}
.div2{
flex-shinrk: 0; /*默认值为1，这里改成0，表示空间不足也不能压缩div2 ，盒1和盒3将会被压缩*/
}
flex-shink.png
4、flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
.div2{
flex-basis: 100px; /*当父元素存在多于空间，div2要占据100px空间；空间不足也按照100px空间来压缩*/
}
flex-basis.png
5、flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.div2{
flex: 0 1 100px; /*即flex-grow: 0; flex-shrink: 1; flex-basis: 100px;*/
}
flex-grow和flex-shrink值为默认值，显示效果等同于basis: 100px;
6、
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.div2{
align-self: auto; /*默认值*/
flex-start; /**/
flex-end; /**/
center; /**/
baseline; /*需要两个以上元素有此属性才有用*/
stretch; /*给盒2的去掉*/
}
align-self.jpg
以上为flex的基础知识，具体应用还要上手练习才能体会。
本文参考 Flex 布局教程：语法篇
网友评论