快來快來，這個博主終于更博啦~
一、Flex布局
- 原理：給父盒子添加flex屬性，來控制子盒子的位置和排列方式
- 特點：
a.一旦給父元素添加了display：flex；這個屬性后子元素將不區分行內元素和塊元素，此時的子元素就能夠自定義寬度和高度
b.任何元素均可用flex布局，可以理解為父盒子對子元素“一視同仁”
c.不需要清除浮動，因此此時float、clear、vertical-align等屬性失效
二、Flex屬性
1.父項常見屬性
先給大家看一下我整理的思維導圖，大致常用屬性：
2.子項常見屬性
先給大家看一下我整理的思維導圖，大致常用屬性：
3.Flex布局展示
- flex-direction：row（默認值）水平方向起點在左端 ；
row-reverse水平方向起點在右端 ；
水平方向：
-
flex-direction：column 垂直方向 從上往下 ；
column-reverse垂直方向 從下往上，
垂直方向：
-
flex-wrap：nowrap（不換行）
- flex-wrap：wrap（換行，第一行在上方）
- flex-wrap：wrap-reverse（換行，第一行在下方）
默認情況，所有flex專案會排在一條線上，不會自動換行
- flex-flow默認值：row nowrap
.box{
flex-flow:<flex-direction><flex-wrap>;
}
4.移動布局中常見的布局方式
- 小米官網中的布局，如下：
這種布局我們就可以利用flex來完成
代碼如下：
/* li的父盒子是ul！！ */
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
ul li {
width: 150px;
height: 100px;
background-color: skyblue;
margin: 5px;
}
代碼的實作效果，如下：
- 導航欄中常用布局效果，如下：
這種布局我們就可以利用flex來完成
代碼如下：
.local-nav {
display: flex;
height: 64px;
background-color: #fff;
margin: 3px 4px;
border-radius: 8px;
}
.local-nav li {
flex: 1;
/* 盒子里面的li平均分布 */
}
.local-nav a {
display: flex;
flex-direction: column;
/* 側軸居中對齊 因為是單行 */
align-items: center;
font-size: 12px;
}
- 頭部導航欄中常用布局效果，如下：
這種布局我們就可以利用flex來完成
代碼如下：
.box {
display: flex;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
}
/* 想要左右固定，中間隨頁面的改變而改變：
左右兩側的寬度固定 中間的給百分數 */
.left {
width: 200px;
background-color: pink;
}
.center {
width: 60%;
background-color: blue
}
.right {
width: 200px;
background-color: pink;
}
總結
快國慶啦~博主這篇更新完就可以啦！！！提前祝大家國慶快樂哦！
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/304363.html
標籤：其他
上一篇：map的常見用法與五種回圈遍歷原始碼---人生四季，寒暑交替，只有學會了“map”才能靜心體味生活的悲與喜
下一篇：總結15個vscode的快捷鍵