設(shè)置在父元素上的屬性
一应闯、給父元素設(shè)置display:flex; display:inline-flex;
1纤控、所有子元素橫向排列；
2碉纺、即便子元素是塊元素船万，寬度也由內(nèi)容撐起；
3骨田、彈性盒模型的父元素不會出現(xiàn)高度塌陷耿导；
4、一旦形成彈性盒模型态贤，在子元素沒有設(shè)置高度時舱呻，默認和父元素高度一致；
5悠汽、子元素永遠不會溢出箱吕，即便寫了寬度，也會被縮減柿冲，被壓扁殖氏；
6、子元素為行內(nèi)元素時姻采，自動變?yōu)閴K元素的表現(xiàn)形式雅采，可以設(shè)置寬高。
image.png
二慨亲、flex-direction：row | row-reverse | column | column-reverse
image.png
三婚瓜、flex-wrap: nowrap | wrap | wrap-reverse
image.png
四、【主軸對齊】justify-content: flex-start | flex-end | center | space-between | sapce-around
區(qū)別:
flex-direction,改變了軸的方向刑棵，所以排列順序發(fā)生了改變巴刻。
justify-content 只是對其方式的改變。
image.png
五蛉签、【側(cè)軸對齊】align-item:flex-start | flex-end | center | baseline | stretch(默認值)
flex-start：以頂對齊胡陪，沒有高度的由內(nèi)容撐起沥寥。
center：以元素高度中間對齊。
stretch：以頂對齊柠座，沒有高度的默認等于父元素的高度邑雅。
baseline ：以文字基線對齊。
image.png
六妈经、【設(shè)置各個行的對齊】align-content:flex-start | flex-end | center | spacing-around | spacing-between
align-content和justify-content有點像淮野，區(qū)別是justify-content用于main-axis的對齊，而align-content用于多行在容器內(nèi)的對齊方式吹泡。因此一定要多行（必須flex-wrap: wrap且容器不足以將所有元素放入一行內(nèi)）才能出效果骤星，如果容器內(nèi)就一行是沒有效果的。
image.png
設(shè)置在子元素上的屬性
一爆哑、flex-grow:數(shù)值洞难；將剩余空間進行分配。默認值為0揭朝，即不進行分配廊营。
<style>
.box{
margin:50px auto;
width: 300px;
height: 100px;
background: #aaa;
display: flex;
}
.box p:nth-child(1){
background: #f00;
width: 100px;
flex-grow: 1;
}
.box p:nth-child(2){
background: #ff0;
width: 50px;
flex-grow: 2;
}
</style>
<body>
<div class="box">
<p>1</p>
<p>2</p>
</div>
</body>
父元素寬度300px，兩個子元素共計150px萝勤，剩余150px露筒，
第一個p標簽flex-grow: 1; 分得150/（1+2）*1=50px 最后寬度100+50=150px；
第二個p標簽flex-grow: 2; 分得150/（1+2）*2=100px 最后寬度50+100=150px敌卓；
二慎式、flex-shrink:數(shù)值；將溢出空間進行分配趟径。默認值為1瘪吏。
<style>
.box{
margin:50px auto;
width: 200px;
height: 100px;
background: #aaa;
display: flex;
}
.box p:nth-child(1){
background: #f00;
width: 300px;
flex-shrink: 1;
}
.box p:nth-child(2){
background: #ff0;
width: 100px;
flex-shrink: 2;
}
</style>
<body>
<div class="box">
<p>1</p>
<p>2</p>
</div>
</body>
父元素寬度200px，兩個子元素共計400px蜗巧，溢出200px掌眠，
第一個p標簽flex-shrink: 1; 裁去300*1/(300*1+1002)200
第二個p標簽flex-shrink: 2; 裁去100*2/(300*1+1002)200
三、flex-basis
效果相當于width
四幕屹、【重點】 flex：1
flex:1;
flex：1 1 0;(依次為flex-grow, flex-shrink, flex-basis)
含義：當有多余空間時全部分配給此元素蓝丙，當有溢出時，從這個元素上縮減望拖，寬度為0（之前如果寫了寬度則失效）
圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0;padding:0;}
html,body{
height: 100%;
}
body{
display:flex;
flex-direction: column;
}
header{
height: 100px;
background: #f0f;
}
footer{
height: 100px;
background: #0ff;
}
main{
background: #0f0;
flex:1;
display: flex;
}
.main_left{
background: #ff0;
width: 100px;
}
.main_center{
background: #f00;
flex:1;
}
.main_right{
background: #0f0;
width: 100px;
}
</style>
</head>
<body>
<header></header>
<main>
<div class="main_left"></div>
<div class="main_center"></div>
<div class="main_right"></div>
</main>
<footer></footer>
</body>
</html>
五渺尘、order:數(shù)值;值越大，越靠后
image.png
六说敏、align-self: auto | flex-start | flex-end | center | baseline | stretch
設(shè)置元素自身在側(cè)軸上的對齊方式鸥跟。
自轉(zhuǎn)骰子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.stage{
margin:50px auto;
width: 800px;
height: 300px;
background: #ccc;
display: flex;
position: relative;
perspective: 1000px;
}
.con{
width: 65px;
height: 65px;
position: absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
transform-style: preserve-3d;
animation: rr 2s infinite linear;
}
.box{
padding:5px;
box-sizing: border-box;
width: 70px;
height: 70px;
background: #e6e6e6;
border-left:4px solid #d7d7d7;
border-bottom:4px solid #bbb;
border-radius:5px;
display:flex;
position: absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}
span{
display:block;
width: 18px;
height: 18px;
border-radius: 50%;
background: #333;
}
.box:nth-child(1){justify-content: center; align-items:center;}
.box{justify-content: space-between;}
.box:nth-child(2) span:nth-child(1){align-items: flex-start;}
.box:nth-child(2) span:nth-child(2){align-self: flex-end;}
.box:nth-child(3) span:nth-child(1){align-items: flex-start;}
.box:nth-child(3) span:nth-child(2){align-self: center;}
.box:nth-child(3) span:nth-child(3){align-self: flex-end;}
.box:nth-child(4) p{display: flex; flex-direction: column; justify-content: space-between}
.box:nth-child(5) p{display: flex; flex-direction: column; justify-content: space-between}
.box:nth-child(5) p:nth-child(2){justify-content: center;}
.box:nth-child(6) p{display: flex; flex-direction: column; justify-content: space-between}
.box:nth-child(1){transform: translateZ(35px)}
.box:nth-child(2){transform: translateZ(-35px)}
.box:nth-child(3){transform: rotateY(90deg) translateZ(35px)}
.box:nth-child(4){transform: rotateY(-90deg) translateZ(35px)}
.box:nth-child(5){transform: rotateX(90deg) translateZ(35px)}
.box:nth-child(6){transform: rotateX(-90deg) translateZ(35px)}
@keyframes rr {
from{transform:rotateX(0) rotateY(0)}
to{transform:rotateX(360deg) rotateY(360deg)}
}
</style>
</head>
<body>
<div class="stage">
<div class="con">
<div class="box">
<span></span>
</div>
<div class="box">
<span></span>
<span></span>
</div>
<div class="box">
<span></span>
<span></span>
<span></span>
</div>
<div class="box">
<p>
<span></span>
<span></span>
</p>
<p>
<span></span>
<span></span>
</p>
</div>
<div class="box">
<p>
<span></span>
<span></span>
</p>
<p><span></span></p>
<p>
<span></span>
<span></span>
</p>
</div>
<div class="box">
<p>
<span></span>
<span></span>
<span></span>
</p>
<p>
<span></span>
<span></span>
<span></span>
</p>
</div>
</div>
</div>
</body>
</html>
七、注意事項
彈性盒布局盡量不要使元素脫離文檔流，否則整個布局就會混亂医咨。盡量不適用以下屬性：
float:left | right;
clear:both;
position:absolute;
