一、介绍Flex布局
????什么是Flex布局呢？Flex布局：又称弹性布局，它是Flexible Box 的缩写，它为盒状模型提供最大的灵活性。
二、Flex布局的概念
flex? container：Flex容器（简称“容器”），即采用Flex布局的元素。
flex? item：Flex项目（简称“项目”），即容器的所有子元素自动成为容器成员。
mian? axis：水平的主轴。cross? axis：垂直的交叉轴。它们是容器（flex? container）默认存在的两根轴。
main? start：主轴的开始位置（与边框的交叉点）。main? end：主轴的结束位置（与边框的交叉点）。
cross? start：交叉轴的开始位置。cross? end：交叉轴的结束位置。
mian? size：单个项目占据的主轴空间。cross? size：单个项目占据的交叉轴空间。项目默认延主轴排列。
三、Flex? container（容器）的属性
Flex? container有6个属性，即 flex-direction、flex-wrap、justify-content、align-items、align-content、flex-flow。
1.flex-direction的属性
flex-direction：决定主轴的方向，即项目的排列方向
flex-direction：row | row-reverse | column | column-reverse
①?flex-direction：row
row：默认值。主轴是水平方向，起点在最左边（即11）
css代码：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{??
?????????background:#ecbebe;?
?????????height: 100px;?
? ???????width: 100px;?
????????margin:10px;}?
（项目排列）：
.box1{??
????????display: flex;
????????width:100%;?
????????flex-direction: row;
}??
②?flex-direction：row-reverse
row-reverse：主轴是水平方向，起点在最右边（即11）
css代码：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
? ????????background:#ecbebe;
? ??????? ?height: 100px;
? ??????? ?width: 100px;
? ? ? ? ? ?margin:10px; }
（项目排列）：
.box2{
????????display: flex;
????????width:100%;
????????flex-direction: row-reverse;
}?
③?flex-direction：column
row-reverse：主轴是垂直方向，起点在最上（即11）
css代码：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}
（项目排列）：
.box3{
????????display: flex;
????????width:100%;
????????flex-direction:?column;
}?
④?flex-direction：column-reverse
column-reverse：主轴是垂直方向，起点在最下（即11）
css代码：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}
（项目排列）：
.box4{
????????display: flex;
????????width:100%;
????????flex-direction:?column-reverse;
}?
2.flex-wrap的属性
flex-wrap：默认下，项目都排在轴线上。（定义：一条轴线排不下，如何换行）
flex-wrap：nowrap | wrap | wrap-reverse
①?flex-wrap：nowrap
nowrap：默认值。起点在最左边（即11）
css代码：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}
（不换行）：
.box5{
????????display: flex;
????????width:100%;
????????flex-wrap: nowrap;
}?
② flex-wrap：wrap
wrap：起点在最左边（即11）
css代码：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}?
（换行，第一行在上方）：
.box6{
????????display: flex;
????????width:100%;
????????flex-wrap: wrap;
}?
③ flex-wrap：wrap-reverse
wrap-reverse：起点在最左边（即11）
css代码：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5 ,.div6{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}
（换行，第一行在下方）：
.box7{
????????display: flex;
????????width:100%;
????????flex-wrap:?wrap-reverse;
}?
3.justify-content的属性
justify-content：定义了项目在主轴上的对齐方式
justify-content：flex-start | flex-end | center | space-between | space-around
①?justify-content：flex-start
flex-start：默认值。左对齐
css代码：
.div-box{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}
（对齐方式）：
.box8{
????????display: flex;
????????width:100%;
????????justify-content: flex-start;
}?
② justify-content：flex-end
flex-end：右对齐
css代码：
.div-box{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}
（对齐方式）：
.box9{
????????display: flex;
????????width:100%;
????????justify-content: flex-end;
}?
③?justify-content：center
center：居中
css代码：
.div-box{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}
（对齐方式）：
.box10{
????????display: flex;
????????width:100%;
????????justify-content:?center;
}?
④ justify-content：space-between
space-between：两端对齐，项目之间的间隔都相等
css代码：
.div-box{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}
（对齐方式）：
.box11{
????????display: flex;
????????width:100%;
????????justify-content:?space-between;
}?
⑤?justify-content：space-around
space-around：每个项目两侧的间隔相等，即项目之间的间隔比项目与边框的间隔大一倍
css代码：
.div-box{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}?
（对齐方式）：
.box12{
????????display: flex;
????????width:100%;
????????justify-content:?space-around;
}?
4.align-items的属性
align-items：定义了项目在交叉轴上的对齐方式
align-items：flex-start | flex-end | center | baseline | stretch
①?align-items：flex-start
flex-start：交叉轴的起点对齐
css代码：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}
.div2{
? ? ? ?height: 300px;
}
.div4{
? ? ? ?height: 50px;
}?
（对齐方式）：
.box13{
????????display: flex;
????????width:100%;
???????align-items: flex-start;
}?
② align-items：flex-end
flex-end：交叉轴的终点对齐
css代码：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}?
.div2{
? ? ? ?height: 300px;
}
.div4{
? ? ? ?height: 50px;
}
（对齐方式）：
.box14{
????????display: flex;
????????width:100%;
???????align-items: flex-end;
}?
③ align-items：center
center：交叉轴的中点对齐
css代码：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;?
}
.div2{
? ? ? ?height: 300px;
}
.div4{
? ? ? ?height: 50px;
}
（对齐方式）：
.box15{
????????display: flex;
????????width:100%;
????????align-items:?center;
}?
④ align-items：baseline
baseline：项目的第一行文字的基线对齐
css代码：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}?
.div2{
???????height: 300px;
}
.div4{
????????height: 50px;
}?
（对齐方式）：
.box16{
????????display: flex;
????????width:100%;
????????align-items:?baseline;
}?
⑤ align-items：stretch
stretch：默认值。如果项目未设置高度或设为auto，将占满整个容器的高度
css代码：
#box17{
? ? width: 300px;
? ? height: 278px;
? ? border: 1px solid black;
? ? display:flex;
? ? align-items:stretch;
}
#box17 div{
? flex:1;
}
.div1{
? background-color:#eadd79;
}
.div2{
? background-color:#79e5ea;
}
.div3{
? background-color:#79ea8c;
}
5.align-content的属性
align-content：定义了项目在主轴上的对齐方式
align-content：flex-start | flex-end | center | space-between | space-around | stretch
①?align-content：stretch
stretch：默认值。轴线占满整个交叉轴
css代码：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3{
????????height:30px;
????????width:100px;
}
.div1{
????????background-color:#eadd79;
}
.div2{
????????background-color:#79e5ea;
}
.div3{
????????background-color:#79ea8c;
}
（对齐方式）：
.box18{
????????background-color:#ecbebe;
????????height:200px;
????????width:200px;
????????display:flex;
????????flex-direction:row;
????????flex-wrap:wrap;
????????align-content:stretch;
}
② align-content：center
center：与交叉轴的中点对齐
css代码：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????height:30px;
????????width:100px;
}
.div1{
????????background-color:#eadd79;
}
.div2{
????????background-color:#79e5ea;
}
.div3{
????????background-color:#79ea8c;
}
.div4{
????????background-color:#9ad1b2;
}
.div5{?
????????background-color:rgb(10,154,101);
}
（对齐方式）：
.box19{
????????background-color:#ecbebe;
????????height:200px;
????????width:200px;
????????display:flex;
????????flex-direction:row;
????????flex-wrap:wrap;
????????align-content:center;
}
③ align-content：flex-start
flex-start：与交叉轴的起点对齐
css代码：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????height:30px;
????????width:100px;
}
.div1{
????????background-color:#eadd79;
}
.div2{
????????background-color:#79e5ea;
}
.div3{
????????background-color:#79ea8c;
}
.div4{
????????background-color:#9ad1b2;
}
.div5{
????????background-color:rgb(10,154,101);
}
（对齐方式）：
.box20{
????????background-color:#ecbebe;
????????height:200px;
????????width:200px;
????????display:flex;
????????flex-direction:row;
????????flex-wrap:wrap;
????????align-content:flex-start;
}?
③?align-content：flex-end
flex-end：与交叉轴的终点对齐
css代码：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????height:30px;
????????width:100px;
}
.div1{
????????background-color:#eadd79;
}
.div2{
????????background-color:#79e5ea;
}
.div3{
????????background-color:#79ea8c;?
}
.div4{
????????background-color:#9ad1b2;
}
.div5{
????????background-color:rgb(10,154,101);
}
（对齐方式）：
.box21{
????????background-color:#ecbebe;
????????height:200px;
????????width:200px;
????????display:flex;
????????flex-direction:row;
????????flex-wrap:wrap;
????????align-content:flex-end;
}?
④ align-content：space-between
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
css代码：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????height:30px;
????????width:100px;
}
.div1{
????????background-color:#eadd79;
}
.div2{
????????background-color:#79e5ea;
}
.div3{
????????background-color:#79ea8c;
}
.div4{
????????background-color:#9ad1b2;
}
.div5{
????????background-color:rgb(10,154,101);
}?
（对齐方式）：
.box22{
????????background-color:#ecbebe;
????????height:200px;
????????width:200px;
????????display:flex;
????????flex-direction:row;
????????flex-wrap:wrap;
????????align-content:space-between;
}
⑤ align-content：space-around
space-around：每根轴线两侧的间隔都相等，即项目之间的间隔比项目与边框的间隔大一倍
css代码：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????height:30px;
????????width:100px;
}
.div1{
????????background-color:#eadd79;
}
.div2{
????????background-color:#79e5ea;
}
.div3{
????????background-color:#79ea8c;
}
.div4{
????????background-color:#9ad1b2;
}
.div5{
????????background-color:rgb(10,154,101);
}
（对齐方式）：
.box23{
????????background-color:#ecbebe;
????????height:200px;
????????width:200px;
????????display:flex;
????????flex-direction:row;
????????flex-wrap:wrap;
????????align-content:space-around;
}?
6.flex-flow的属性
flex-flow：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
（因为我们习惯于单独使用flex-direction、flex-wrap，而flex-flow却很少使用到，所以可以将它视为“糟粕”）
flex-flow：<flex-direction> ||<flex-wrap>
只举两个例子说明：
①?flex-flow：column wrap
column wrap：column（主轴为垂直方向，起点在上沿），wrap（换行，第一行在上方）
css代码：
.box24 {
? ? display: flex;
}
.flex-container.first {
????display: flex;
? ? background: #333;
? ? width: 200px;
? ? height: 200px;
? ? margin: 5px;
? ??flex-flow: column wrap;
}
.item {?
? ? background: #ecbebe;
? ? padding: 5px;
? ? width: 80px;
? ? height: 80px;
? ? margin: 5px;
? ? line-height: 80px;
? ? color: white;
? ? font-weight: bold;
? ? font-size: 2em;
? ? text-align: center;
}?
ul {
? ? padding: 0;
}
li {
? ? list-style: none;
}
② flex-flow：row-reverse wrap-reverse
row-reverse wrap-reverse：row-reverse（主轴为水平方向，起点在右端），row-reverse（换行，第一行在下方）
css代码：
.box25 {
? ? display: flex;
}
.flex-container.second {
????display: flex;
? ? background: #333;
? ? width: 200px;
? ? height: 200px;
? ? margin: 5px;
? ??flex-flow: row-reverse wrap-reverse;
}
.item {
? ? background: #ecbebe;
? ? padding: 5px;
? ? width: 80px;
? ? height: 80px;
? ? margin: 5px;
? ? line-height: 80px;
? ? color: white;
? ? font-weight: bold;
? ? font-size: 2em;?
? ? text-align: center;
}
ul {
? ? padding: 0;
}
li {
? ? list-style: none;?
}
四、项目（flex item）的属性
1.flex-grow 的属性
flex-grow：定义项目（flex-grow）的放大比例，默认为0，即如果存在剩余空间，也不放大
css代码：
#box26 {
? width: 700px;
? height: 200px;
? border: 1px;
? display: flex;
}
.blue1 {
? ? background-color:#2ce0e8;
? ? flex-grow: 2;
}
.green1 {
? ? background-color:#00ff66;
? ? flex-grow: 3;
}
.yellow1 {
? ? background-color:#e3fd0e;
? ? flex-grow: 0.5;
}
.pink1 {
? ? background-color:#ecbebe;
? ? flex-grow: 1;
}
.grey1 {
? ? background-color:#cec5c5;
? ? flex-grow: 1;
}
2.order 的属性
order：定义项目（flex-grow）的排列顺序（即数值越小，排列越靠前，默认为0）
（order在布局中基本不会使用到，不用深入了解，所以可以将它视为“糟粕”）
order:<integer>
css代码：
#box27 {
? ? width: 400px;
? ? height: 150px;
? ? border: 1px;
? ? display: flex;
}
#box27 div {
? ? width: 100px;
? ? height: 100px;
}
.yellow {
? ? background-color:#e3fd0e;
? ? order: -2;
}?
.blue? {
? ? background-color:#2ce0e8;
? ? order: 5;
}
.green {
? ? background-color:#00ff66;
? ? order: 10;
}
.pink? {
? ? background-color:#ecbebe;
? ? order: 0;
}
3.flex-shrink?的属性
flex-shrink：定义项目（flex-grow）的项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
（对于flex-shrink，我个人认为这个在flex中不常使用，因为我们都基本会定义每一个元素的高度和宽度，所以可以将它视为“糟粕”）
flex-shrink:<number>
css代码：
#box28 {
? display: flex;
? width: 500px;
}
#box28 div {
? flex-basis: 140px;
? border: 1px solid rgba(0,0,0,.1);
}
.boxt{
? flex-shrink: 0;
}
.boxt1 {
? flex-shrink: 1;?
}
4.flex-basis?的属性
flex-basis：定义在分配多余空间之前，项目（flex-grow）的占的主轴空间（main size），浏览器根据这个属性，计算主轴是否有多余空间（默认值为auto，即项目的本来大?。?/h4>（对于flex-basis，在布局中，也不常用，所以可以将它视为“糟粕”）
flex-basis:<length> | auto
![]()
flex-basis:<length> | auto
css代码：
#box29 {
? ? width: 350px;
? ? height: 100px;
? ? border: 1px;
? ? display: flex;
}?
.one {
? ? flex-grow: 0;
? ? flex-shrink: 0;
??? flex-basis: 100px;
}
.two {
? ? flex-grow: 0;
? ? flex-shrink: 0;
? ? flex-basis: 150px;
}
.three{
? ? flex-grow: 0;
? ? flex-shrink: 0;
? ? flex-basis: auto;
}
5.flex?的属性
flex：flex-grow,?flex-shrink?和?flex-basis的简写，默认值为0 1 auto，后两个属性可选
（因为我们习惯于单独使用flex-grow、flex-shrink、flex-basis，而flex却很少使用到，所以可以将它视为“糟粕”）
flex：none | [<flex-grow> <flex-shrink> || <flex-basis> ]
快捷值：auto?(1 1 auto) 和 none (0 0 auto)
① flex:1
![]()
flex:1
css代码：
#box30 div{
? ? flex:1;
}?
②?flex:auto
![]()
flex:auto
css代码：
#box30 div{
? ? flex:auto;
}?
③?flex:none
![]()
flex:none
css代码：
#box30 div{
? ? flex:none;
}?
6.align-self??的属性
align-self?：允许单个项目（flex item）有与其他项目不一样的对齐方式，可覆盖align-items的属性（默认值为auto，表示继承父元素的align-items的属性，如果没有父元素，则等同于stretch）
align-self:auto | flex-start | flex-end | center | baseline | stretch
![]()
align-self:auto | flex-start | flex-end | center | baseline | stretch
css代码：
#box31 {
? ? width: 1000px;
? ? height: 400px;
? ? border: 1px solid rgba(0,0,0,.2);?
? ? display: flex;
? ??align-items: flex-start;
}
.Red {
? ? background-color:#f32929;
? ? width: 300px;
? ? height: 100px;
? ? flex: 1;
? ? align-self: flex-start;
}
.Pink {
? ? background-color:#ecbebe;
? ? width: 300px;
? ? height: 100px;
? ? flex: 1;
}?
.Blue {
? ? background-color:#2ce0e8;
? ? width: 300px;
? ? height: 100px;
? ? flex: 1;
? ? align-self: center;
}
.Green{
? ? background-color:#00ff66;
? ? width: 300px;
? ? height: 100px;
? ? flex: 1;
}
.Yellow{
? ? background-color:#e3fd0e;
? ? width: 300px;
? ? height: 100px;
? ? flex: 1;
? ? align-self: flex-end;
}
.Grey{?
? ? background-color:#cec5c5;
? ? width: 300px;
? ? height: 100px;
? ? flex: 1;
? ? align-self: baseline;
}
.Black{
? ? background-color:#5f4e4e;?
? ? flex: 1;
? ? align-self: stretch;?
}
#box29 {
? ? width: 350px;
? ? height: 100px;
? ? border: 1px;
? ? display: flex;
}?
.one {
? ? flex-grow: 0;
? ? flex-shrink: 0;
??? flex-basis: 100px;
}
.two {
? ? flex-grow: 0;
? ? flex-shrink: 0;
? ? flex-basis: 150px;
}
.three{
? ? flex-grow: 0;
? ? flex-shrink: 0;
? ? flex-basis: auto;
}
#box30 div{
? ? flex:1;
}?
#box30 div{
? ? flex:auto;
}?
#box30 div{
? ? flex:none;
}?
#box31 {
? ? width: 1000px;
? ? height: 400px;
? ? border: 1px solid rgba(0,0,0,.2);?
? ? display: flex;
? ??align-items: flex-start;
}
.Red {
? ? background-color:#f32929;
? ? width: 300px;
? ? height: 100px;
? ? flex: 1;
? ? align-self: flex-start;
}
.Pink {
? ? background-color:#ecbebe;
? ? width: 300px;
? ? height: 100px;
? ? flex: 1;
}?
.Blue {
? ? background-color:#2ce0e8;
? ? width: 300px;
? ? height: 100px;
? ? flex: 1;
? ? align-self: center;
}
.Green{
? ? background-color:#00ff66;
? ? width: 300px;
? ? height: 100px;
? ? flex: 1;
}
.Yellow{
? ? background-color:#e3fd0e;
? ? width: 300px;
? ? height: 100px;
? ? flex: 1;
? ? align-self: flex-end;
}
.Grey{?
? ? background-color:#cec5c5;
? ? width: 300px;
? ? height: 100px;
? ? flex: 1;
? ? align-self: baseline;
}
.Black{
? ? background-color:#5f4e4e;?
? ? flex: 1;
? ? align-self: stretch;?
}
