一采缚、介紹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：單個項目占據(jù)的主軸空間监婶。cross? size：單個項目占據(jù)的交叉軸空間。項目默認延主軸排列齿桃。
三惑惶、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）的排列順序（即數(shù)值越小天吓，排列越靠前贿肩，默認為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），瀏覽器根據(jù)這個屬性科阎，計算主軸是否有多余空間（默認值為auto述吸，即項目的本來大小）
（對于flex-basis，在布局中蝌矛，也不常用道批，所以可以將它視為“糟粕”）
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
css代碼：
#box30 div{
? ? flex:1;
}?
②?flex:auto
css代碼：
#box30 div{
? ? flex:auto;
}?
③?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
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;?
}
