一、介绍Flex布局
什么是Flex布局呢？Flex布局：又称弹性布局，它是Flexible Box 的缩写，它为盒状模型提供最大的灵活性。
二、Flex布局的概念
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）
flex-direction：row
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）
flex-direction：row-reverse
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）
flex-direction：column
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）
flex-direction：column-reverse
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）
flex-wrap：nowrap
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）
flex-wrap：wrap
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）
flex-wrap：wrap-reverse
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：默认值。左对齐
justify-content：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：右对齐
justify-content：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：居中
justify-content：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：两端对齐，项目之间的间隔都相等
justify-content：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：每个项目两侧的间隔相等，即项目之间的间隔比项目与边框的间隔大一倍
justify-content：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：交叉轴的起点对齐
align-items：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：交叉轴的终点对齐
align-items：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：交叉轴的中点对齐
align-items：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：项目的第一行文字的基线对齐
align-items：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，将占满整个容器的高度
align-items：stretch
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：默认值。轴线占满整个交叉轴
align-content：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：与交叉轴的中点对齐
align-content：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：与交叉轴的起点对齐
align-content：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：与交叉轴的终点对齐
align-content：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：与交叉轴两端对齐，轴线之间的间隔平均分布
align-content：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：每根轴线两侧的间隔都相等，即项目之间的间隔比项目与边框的间隔大一倍
align-content：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（换行，第一行在上方）
flex-flow：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（换行，第一行在下方）
flex-flow：row-reverse wrap-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，即如果存在剩余空间，也不放大
flex-grow
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>
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>
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，即项目的本来大小）
（对于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;
}
网友评论