對(duì)flexbox的學(xué)習(xí)總結(jié)筷笨，學(xué)習(xí)資源

文章是對(duì)自己點(diǎn)的以一些小結(jié)铅忿，主要是為了以后遺忘時(shí)可以回顧，若想學(xué)習(xí)揭措，前面的學(xué)習(xí)資源的教程相當(dāng)不錯(cuò)

1. when we set display:flex for the parent container,
   the child element will layout just like they have set
   the prototy of float
   HTML:

  <ul> 
   <li>1 Branding</li> 
    <li>2 Home</li> 
    <li>3 Services</li> 
    <li>4 About</li> 
    <li>5 Contact</li>
</ul>

ul{
 display: flex;
 border:1px solid red;
 list-style:none;
}
li{
 height: 100px;
 background-color: #8cacea;
 margin: 8px;
 padding: 4px;
}

image.png

2. the property of flex container

//test flex-direction
ul{
 display: flex;
 border:1px solid red;
 list-style:none;
 flex-direction:column;
}
li{
 height: 100px;
 background-color: #8cacea;
 margin: 8px;
 padding: 4px;
} 

//test flex-wrap
ul{
 display: flex;
 border:1px solid red;
 list-style:none;
 flex-direction:column;
 flex-wrap: wrap;
//wrap 當(dāng)container無(wú)法容下items是不會(huì)換行乞巧，瀏覽器會(huì)出現(xiàn)滾動(dòng)條
//nowrap 當(dāng)container無(wú)法容下items時(shí)，自動(dòng)換行摊鸡，item依舊在container包裹的內(nèi)部
//wrap-reverse 在這設(shè)置了wrap的效果下將上下顛倒,reverse使得main-axis的方向從下到上
}
li{
 height: 100px;
 background-color: #8cacea;
 margin: 8px;
 padding: 4px;
} 

//test justify-content
ul{
 display: flex;
 border:1px solid red;
 list-style:none;
 justify-content:flex-start;
//flex-start,從main-axis的左側(cè)排列對(duì)齊
//flex-end绽媒。從main-axis的右側(cè)排列對(duì)齊
//center.居中對(duì)齊
//space-between，item之間的距離大小大小相同
//sapce-around免猾。每個(gè)item占據(jù)的空間相同是辕，空間=元素所占空間+多出的空白空間的分配
}
li{
 height: 100px;
 background-color: #8cacea;
 margin: 8px;
 padding: 4px;
} 

// test align-items
ul{
 display: flex;
 border:1px solid red;
 list-style:none;
 align-items:flex-start;
//flex-start,從cross-axis的左側(cè)排列對(duì)齊
//flex-end。從cross-axis的右側(cè)排列對(duì)齊
//center.cross-axis軸居中對(duì)齊
//stretch猎提，cross-axis軸,默認(rèn)值获三，使得flex items的高度與container的高度相同
//baseline。cross-axis軸锨苏，使得flex item按器基線對(duì)齊
}
li{
 height: 100px;
 background-color: #8cacea;
 margin: 8px;
 padding: 4px;
} 

// test align-content

ul{
 display: flex;
 height:500px;
 border:1px solid red;
 list-style:none;
 flex-wrap:wrap;
 align-content:flex-start;
 //與前面的justify-content顯示疙教，值也是相同的，達(dá)到的效果也是相同的伞租，
 //需要理解的區(qū)別是贞谓，justify-content控制main-axis上的多個(gè)item，僅僅看一行
 //align-content控制的是一列上的多個(gè)item,僅僅從一列上看葵诈，會(huì)發(fā)現(xiàn)其與justify-content幾乎相同
//相比align-items裸弦，align-items其控制的是cross-axis上第一個(gè)item的位置祟同，跟多的是針對(duì)首個(gè)item，
//而align-content更多針對(duì)的是多個(gè)item理疙，就如同justify-content一樣
}
li{
 // height: 100px;
 background-color: #8cacea;
 margin: 8px;
 padding: 4px;
 height:100px;
} 

//3.flex item property

//test order
ul{
 display: flex;
 height:500px;
 border:1px solid red;
 list-style:none;
 flex-wrap:wrap;
}
li{
 background-color: #8cacea;
 margin: 8px;
 padding: 4px;
 height:100px;
} 

li:nth-child(1){
 order:1;
}
li:nth-child(2){
 order:1;
}

//align-self，該屬性的是是針對(duì)目標(biāo)item進(jìn)行設(shè)定的夯接，不會(huì)影響到其他的item

注意：但給某個(gè)item設(shè)置margin:auto的時(shí)候，
該項(xiàng)目會(huì)占據(jù)所有的多余空間,并將多余空間平均分配到該item的兩側(cè)盔几，
僅僅設(shè)置margin-left則將多余的空間都分配給該item的左側(cè)晴弃，margin-right相同
另外在設(shè)置了margin:auto之后。container的justify-content將不起作用