老馬CSS3彈性盒子筆記
flex-direction屬性決定主軸的方向
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,body,div{
padding: 0;
margin: 0;
}
.wrap{
width: 960px;
margin: 5px auto;
border: 1px solid #ccc;
color: #000;
font: 16px/1.5 "microsoft yahei";
}
.hd{
height: 30px;
background-color: red;
opacity: .8;
color: #fff;
line-height: 30px;
}
.wrap .bd{
display: flex;
}
.wrap .bd .child{
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid maroon;
}
.row-reverse{
flex-direction: row-reverse;
}
.column{
flex-direction: column;
}
.column-reverse{
flex-direction: column-reverse;
}
</style>
</head>
<body>
<div class="wrap">
<div class="hd">設置彈性盒子的主軸方向:flex: row;</div>
<div class="bd">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
</div>
<div class="wrap">
<div class="hd">設置彈性盒子的主軸方向:flex: row-reverse;</div>
<div class="bd row-reverse">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
</div>
<div class="wrap">
<div class="hd">設置彈性盒子的主軸方向:flex: column;</div>
<div class="bd column">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
</div>
<div class="wrap">
<div class="hd">設置彈性盒子的主軸方向:flex: column-reverse;</div>
<div class="bd column-reverse">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
</div>
</body>
</html>
設置彈性盒子中的子元素是否換行:flex-wrap
設置彈性盒子主軸子元素的對齊方式:justify-content
設置彈性盒子側軸子元素的對齊方式:align-items
設置父容器多行子項整體垂直對齊方式align-content
圖解子盒子的屬性
設置子盒子的排序order
<div class="wrap">
<div class="hd">設置子元素的order屬性來給子項進行排序，默認值是0</div>
<div class="bd">
<div class="child" style="order: 5;">1</div>
<div class="child" style="order: 4;">2</div>
<div class="child" style="order: 3;">3</div>
<div class="child" style="order: 2;">4</div>
<div class="child" style="order: 1;">5</div>
</div>
</div>
定義子項寬度之和不足父元素寬度時,將剩餘的部分，按比例分給對應的子項，進行寬度的的增加flex-grow
3個子項寬度之和是300px,父盒子寬度960px;剩餘660px，將660px中的5/10給了第一個子項，第一個子項的寬度變成了430px。
如果每個子項的設置的寬度相等，在加上flex-grow: 1;則子項等寬不滿父盒子
<div class="wrap">
<div class="hd">定義子項寬度之和小於父元素寬度時，將剩餘的部分，按比例分給對應的子項，進行寬度的增加</div>
<div class="bd">
<div class="child" style="box-sizing: border-box; width:100px;flex-grow: 5;">1</div>
<div class="child" style="box-sizing: border-box; width:100px;flex-grow: 2;">2</div>
<div class="child" style="box-sizing: border-box; width:100px;flex-grow: 3;">3</div>
</div>
</div>
定義子項寬度之和超過父元素寬度時，將超出的部分，按比例分給對應的小，進行寬度的減小flex-shrink
三個子項的寬度之和是1200px，父盒子寬度是980px，超出220px, 三個子項的flex-shrink的值分別是5,3,3
第一個子項的寬度減小220*（5/11）=100px,變成300px
<div class="wrap">
<div class="hd">定義子項寬度之和超過父元素寬度時，將超出的部分，按比例分給對應的小，進行寬度的減小</div>
<div class="bd">
<div class="child" style="width:400px;flex-shrink: 5;">1</div>
<div class="child" style="width:400px;flex-shrink: 3;">2</div>
<div class="child" style="width:400px;flex-shrink: 3;">3</div>
</div>
</div>
flex-basis屬性定義了在分配多餘空間之前，項目佔據的主軸空間
得到的是兩邊固定100px,中間佔據剩下的父容器剩下的部分，可用於響應式佈局
<div class="wrap" style="width: 100%;">
<div class="hd">flex-basis屬性定義了在分配多餘空間之前，項目佔據的主軸空間</div>
<div class="bd">
<div class="child" style="box-sizing: border-box; flex-basis:100px;">1</div>
<div class="child" style="box-sizing: border-box; flex-grow:1;">2</div>
<div class="child" style="box-sizing: border-box; flex-basis:100px;">3</div>
</div>
</div>設置子盒子對齊方式
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
<div class="wrap">
<div class="hd">align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性</div>
<div class="bd align-items-flex-start" style="height: 200px;">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child" style="align-self: flex-end;">5</div>
</div>
關於flex-grow的計算：
當是flex：1；綜合形式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex-grow</title>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 600px;
height:200px;
background-color: lightgrey;
}
.flex-item {
background-color: aqua;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item" style="flex: 1;">flex item 2</div>
<div class="flex-item" style="flex: 2;">flex item 3</div>
</div>因爲三個子元素都沒有設置寬度，第2,3個元素設置了flex:1;在計算時，600-88=512,將512分成3份，512/3=170.667
1份給第二個元素，2份給第三個元素，這裏只減去了一個88，這是因爲沒有設置寬度，第2,3個要分配剩餘寬度，計算剩餘寬度時，將第2,3元素的寬度當成0；
三個子元素顯示設置寬度：600-100=500；500/3=166.667
<div class="flex-container">
<div class="flex-item" style="width: 100px;">flex item 1</div>
<div class="flex-item" style="width:100px;flex: 1;">flex item 2</div>
<div class="flex-item" style="width:100px;flex: 2;">flex item 3</div>
</div>
三個子元素顯示設置寬度，都設置flex：
<div class="flex-container">
<div class="flex-item" style="width: 100px;flex: 1;">flex item 1</div>
<div class="flex-item" style="width:100px;flex: 2;">flex item 2</div>
<div class="flex-item" style="width:100px;flex: 3;">flex item 3</div>
</div>
當flex-grow形式：
600-88*3=336， 336/3=112
三個元素的寬度分別是 88，88+112=200,88+112*2=312
<div class="flex-container">
<div class="flex-item" style="">flex item 1</div>
<div class="flex-item" style="flex-grow: 1;">flex item 2</div>
<div class="flex-item" style="flex-grow: 2;">flex item 3</div>
</div>
給第三個元素加上margin-left:90px;
600-88*3-90=246, 246/3=82
三個子元素的寬度 ：88， 88+82=170 ，88+82*2=252
<div class="flex-container">
<div class="flex-item" style="">flex item 1</div>
<div class="flex-item" style="flex-grow: 1;">flex item 2</div>
<div class="flex-item" style="flex-grow: 2;margin-left: 90px;">flex item 3</div>
</div>
注意flex：1；和flex-grow:1;的區別
flex:1;就相當於flex:1 0 auto; 三個值分別是[ flex-grow ] || [ flex-shrink ] || [ flex-basis ]