Flex布局
- Flex 是 Flexible Box 的縮寫缕陕，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為 Flex 布局哆致。
.box {
display: flex;
}
行內(nèi)元素也可以使用Flex布局。
.box {
display: inline-flex;
}
- 設為 Flex 布局以后患膛，子元素的float摊阀、clear和vertical-align屬性將失效。
- 采用Flex布局的元素踪蹬，稱為Flex容器胞此，它的所有子元素自動成為容器成員≡镜罚可分別設置容器的屬性和子元素的屬性漱牵。
- 容器默認存在兩根軸：水平的主軸和垂直的交叉軸。子元素默認沿主軸排列疚漆。
容器的屬性
- flex-direction屬性
/*有4個值*/
flex-direction: row; /*默認酣胀，主軸為水平方向，起點在左端娶聘。*/
flex-direction: row-reverse; /*主軸為水平方向闻镶，起點在右端。*/
flex-direction: column; /*主軸為垂直方向丸升，起點在上沿铆农。*/
flex-direction: column-reverse; /*主軸為垂直方向，起點在下沿狡耻。*/
- flex-wrap屬性
默認情況下墩剖，子元素都排在一條線（又稱"軸線"）上猴凹。flex-wrap屬性定義，如果一條軸線排不下岭皂，如何換行郊霎。
/*有3個值*/
flex-wrap: nowrap; /*默認,不換行*/
flex-wrap: wrap; /*換行，第一行在上方蒲障。*/
flex-wrap: wrap-reverse; /*換行歹篓，第一行在下面*/
- flex-flow屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap揉阎。
flex-flow: row nowrap;
flex-flow: row wrap;
flex-flow: row-reverse wrap;
flex-flow: row wrap-reverse;
- justify-content屬性
justify-content屬性定義了子元素在主軸上的對齊方式庄撮。
/*有5個值，具體的對齊方式與主軸的方向有關毙籽，假設主軸為從左到右洞斯。*/
justify-content: flex-start; /*默認，左對齊坑赡。*/
justify-content: flex-end;/*右對齊*/
justify-content: center;/*居中*/
justify-content: space-between; /*兩端對齊烙如，子元素之間的間隔相等*/
justify-content: space-around;/*每個子元素兩側的間隔相等，所以子元素之間的見那個比子元素與邊框的間隔大一倍毅否。*/
- align-items屬性
align-items屬性定義項目在交叉軸上如何對齊亚铁。
/*有5個值，具體的對齊方式與交叉軸的方向有關螟加，假設交叉軸為從上到下徘溢。*/
align-items: flex-start; /*交叉軸的起點對齊。*/
align-items: flex-end;/*交叉軸的終點對齊*/
align-items: center;/*交叉軸的中點對齊*/
align-items: baseline; /*子元素的第一行文字的基線對齊*/
align-items: stretch;/*默認捆探，如果子元素未設置高度或設為auto然爆，將占滿整個容器的高度。*/
- align-content屬性
align-content屬性定義了多根軸線的對齊方式黍图。如果項目只有一根軸線曾雕，該屬性不起作用。
/*有6個值*/
align-content: flex-start; /*與交叉軸的起點對齊助被。*/
align-content: flex-end; /*與交叉軸的終點對齊剖张。*/
align-content: center; /*與交叉軸的中點對齊。*/
align-content: space-between; /*與交叉軸兩端對齊恰起，軸線之間的間隔平均分布修械。*/
align-content: space-around; /*每根軸線兩側的間隔都相等。所以检盼，軸線之間的間隔比軸線與邊框的間隔大一倍。*/
align-content: stretch /*默認翘单，軸線占滿整個交叉軸吨枉。*/
子元素的屬性
- order屬性
order屬性定義子元素的排列順序蹦渣。數(shù)值越小，排列越靠前貌亭，默認為0柬唯。
.box {
order: -1; /*-1 可改為任意數(shù)值，根據(jù)數(shù)值大小排序,默認值為0*/
}
- flex-grow屬性
flex-grow屬性定義子元素的放大比例圃庭，默認為0锄奢，即如果存在剩余空間，也不放大剧腻。
.box {
flex-grow: 1;/*1可改為任意數(shù)值拘央，子元素根據(jù)數(shù)值大小占據(jù)剩余空間。*/
}
- flex-shrink屬性
flex-shrink屬性定義了子元素的縮小比例书在，默認為1灰伟，即如果空間不足，該項目將縮小儒旬。
.box {
flex-shrink: 1;
/*如果所有子元素的flex-shrink屬性都為1栏账，當空間不足時，都將等比例縮姓辉础挡爵；
如果一個子元素的flex-shrink屬性為0，其他項目都為1甚垦，則空間不足時茶鹃，前者不縮小制轰；
負值對該屬性無效前计。*/
}
- flex-basis屬性
flex-basis屬性定義了在分配多余空間之前，子元素占據(jù)的主軸空間（main size）垃杖。瀏覽器根據(jù)這個屬性男杈，計算主軸是否有多余空間，默認值為auto调俘，即子元素的本來大小伶棒。
.box {
flex-basis: <length> | auto; /* default auto */
}
- flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto彩库。后兩個屬性可選肤无。
.box {
flex: auto;
flex: 1 1 0;
flex: none;
flex: 0 0 auto;
}
- align-self屬性
align-self屬性允許單個子元素有與其他子元素不一樣的對齊方式，可覆蓋align-items屬性骇钦。默認值為auto宛渐，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch窥翩。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
classList的另一個方法toggle
if (menu.classList.contains('active')) {
menu.classList.remove('active');
} else {
menu.classList.add('active');
}
//相當于
menu.classList.toggle('active');
git出現(xiàn)的錯誤
image.png
- 出現(xiàn)這個錯誤是因為遠程代碼有更新业岁，解決方法：
1.先git pull；
2.再git push寇蚊。
