1. Flex布局
兩個屬性
① display : inline-flex 将對象作為彈性伸縮盒展示,用于行内元素
② display : flex 将對象作為彈性伸縮盒展示,用于塊級元素
2. 常用屬性
flex-direction : 用于指定Flex主軸的方向,繼而決定Flex子項在Flex容器中的位置
取值 : row | row-reverse | column | column-reverse
row : 預設值,表示水準方向從左到右排列,此時水準方向軸線為主軸
row-reverse : 與row相反
column : 表示垂直方向從上到下排列,此時垂直方向軸線為主軸
column-reverse : 與column相反
justify-content : 用于指定主軸(水準方向)上Flex子項的對齊方式 取值 : flex-start | flex-end | center | space-between | space-around
flex-start : 預設值,表示與行的起始位置對齊
flex-end : 表示與行的結束位置對齊
center : 表示與行中間對齊
space-between : 表示兩端對齊,中間間距相等.要注意特殊情況,當剩餘空間為負數或者隻有一個項時,效果等同于flex-start
space-around : 表示間距相等,中間間距是兩端間距的2倍.要注意特殊情況,當剩餘空間為負數或者隻有一個項時,效果等同于center.
align-items : 用來指定側軸(垂直方向)上Flex子項的對齊方式 取值 : stretch | flex-start | flex-end | center | baseline
stretch : 預設值,當Flex子項未設定高度或者高度值為auto時,stretch起作用,将Flex子項高度設定為行高度.這裡需要注意一下,在隻有一行的情況下,行的高度為容器的高度,即Flex子項高度為容器的高度
flex-start : 表示與側軸的開始位置對齊
flex-end : 表示與側軸的結束位置對齊
center : 表示與側軸中間對齊
baseline : 表示基線對齊,當行内軸與側軸在同一線上,即所有Flex子項的基線在同一線上,效果等同于flex-start
flex-wrap : 用來指定Flex子項是否換行 取值 : nowrap | wrap | wrap-reverse
nowrap : 預設值,表示不換行,Flex子項可能會溢出
wrap : 表示換行,溢出的Flex子項會被放到下一行
wrap-reverse : 表示反向換行
align-self : 該屬性用于單獨指定某Flex子項的對齊方式
取值 : auto | flex-start | flex-end | center | baseline | stretch
align-content : 該屬性隻用于多行的情況下,用于多行的對齊方式
取值 : stretch | flex-start | flex-end | center | space-between | space-around
stretch : 預設值,當Flex子項未設定高度或者高度值為auto時,stretch起作用,将Flex子項高度設定為行高度
flex-start : 表示各行與側軸開始位置對齊,第一行緊靠側軸開始邊界,之後的每一行都緊靠前面一行
flex-end : 表示各行與側軸的結束位置對齊,最後一行緊靠側軸結束邊界,之後的每一行都緊靠前面一行
center : 表示各行與側軸中間對齊
space-between :表示兩端對齊,中間間距相等.要注意特殊情況,當剩餘空間為負數時,效果等同于flex-start
space-around : 表示各行之間間距相等,中間間距是兩端間距的2倍.要注意特殊情況,當剩餘空間為負數時,效果等同于center
3. 複合屬性
複合屬性flex,是flex-grow、flex-shrink和flex-basis的簡寫屬性,用于指定Flex子項如何配置設定空間
flex-grow : 預設值為0,若省略則被預設為1
flex-shrink : 預設值為1,省略時預設為1
flex-basis : 預設值為auto,省略是預設為0%
4. 案例 : 手機端百度界面設計
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
html{
font-size: 10px;
}
body{
font-size: 1.6rem;
background-color: #e8e8e8;
}
.bd-layout{
width: 100%;
height: 100%;
/*background-color: red;*/
}
.bd-header{
width: 100%;
height: 4rem;
background-color: #fff;
border-bottom: 0.1rem solid #CCCCCC;
/*伸縮布局*/
display: flex;
/*主軸兩端對齊*/
justify-content: space-around;
align-items: center;
position: fixed;
left: 0;
top: 0;
}
.bd-header span{
/*background-color: skyblue;*/
padding: 3px;
}
.bd-header span.current{
color: deepskyblue;
}
.bd-content{
margin-top: 5rem;
}
.bd-content .cell1{
background-color: #fff;
padding: 0.5rem;
border-bottom: 1px solid #e8e8e8;
}
.cell1-center{
/*伸縮布局*/
display: flex;
justify-content: space-around;
align-items: center;
}
.cell1-center div{
/*background-color: red;*/
/*height: 6rem;*/
flex: 1;
padding: 0.5rem;
}
.cell1-center div img{
width: 100%;
}
.cell2{
background-color: #fff;
padding: 0.5rem;
border-bottom: 1px solid #e8e8e8;
display: flex;
}
.cell2-left{
flex: 2;
background-color: red;
}
.cell2-left img{
width: 100%;
height: 100%;
}
.cell2-right{
flex: 4;
/*background-color: green;*/
display: flex;
flex-direction: column;
margin-left: 1rem;
}
.cell2-right p:first-child{
flex: 1;
height: 2rem;
line-height: 2.5rem;
overflow: hidden;
/*background-color: red;*/
}
</style>
</head>
<body>
<div class="bd-layout">
<!--頭部-->
<div class="bd-header">
<span class="current">推薦</span>
<span>熱點</span>
<span>視訊</span>
<span>娛樂</span>
<span>軍事</span>
</div>
<!--内容-->
<div class="bd-content">
<div class="cell1">
<div class="cell1-top">這兩部吓死過人的鬼片你敢看嗎</div>
<div class="cell1-center">
<div><img src="imgs/img1.jpg" alt=""></div>
<div><img src="imgs/img2.jpg" alt=""></div>
<div><img src="imgs/img3.jpg" alt=""></div>
</div>
<div class="cell1-bottom">
<span>小談食刻</span>
<span>11-21</span>
</div>
</div>
<div class="cell2">
<div class="cell2-left">
<img src="imgs/img4.jpg" alt="">
</div>
<div class="cell2-right">
<p>環球時報：基因編輯嬰兒事件 國家應全面調查環球時報：基因編輯嬰兒事件 國家應全面調查</p>
<p>
<span>環球網</span>
<span>11-26</span>
</p>
</div>
</div>
<div class="cell1">
<div class="cell1-top">這兩部吓死過人的鬼片你敢看嗎</div>
<div class="cell1-center">
<div><img src="imgs/img1.jpg" alt=""></div>
<div><img src="imgs/img2.jpg" alt=""></div>
<div><img src="imgs/img3.jpg" alt=""></div>
</div>
<div class="cell1-bottom">
<span>小談食刻</span>
<span>11-21</span>
</div>
</div>
<div class="cell2">
<div class="cell2-left">
<img src="imgs/img4.jpg" alt="">
</div>
<div class="cell2-right">
<p>環球時報：基因編輯嬰兒事件 國家應全面調查環球時報：基因編輯嬰兒事件 國家應全面調查</p>
<p>
<span>環球網</span>
<span>11-26</span>
</p>
</div>
</div>
<div class="cell1">
<div class="cell1-top">這兩部吓死過人的鬼片你敢看嗎</div>
<div class="cell1-center">
<div><img src="imgs/img1.jpg" alt=""></div>
<div><img src="imgs/img2.jpg" alt=""></div>
<div><img src="imgs/img3.jpg" alt=""></div>
</div>
<div class="cell1-bottom">
<span>小談食刻</span>
<span>11-21</span>
</div>
</div>
<div class="cell2">
<div class="cell2-left">
<img src="imgs/img4.jpg" alt="">
</div>
<div class="cell2-right">
<p>環球時報：基因編輯嬰兒事件 國家應全面調查環球時報：基因編輯嬰兒事件 國家應全面調查</p>
<p>
<span>環球網</span>
<span>11-26</span>
</p>
</div>
</div>
<div class="cell1">
<div class="cell1-top">這兩部吓死過人的鬼片你敢看嗎</div>
<div class="cell1-center">
<div><img src="imgs/img1.jpg" alt=""></div>
<div><img src="imgs/img2.jpg" alt=""></div>
<div><img src="imgs/img3.jpg" alt=""></div>
</div>
<div class="cell1-bottom">
<span>小談食刻</span>
<span>11-21</span>
</div>
</div>
<div class="cell2">
<div class="cell2-left">
<img src="imgs/img4.jpg" alt="">
</div>
<div class="cell2-right">
<p>環球時報：基因編輯嬰兒事件 國家應全面調查環球時報：基因編輯嬰兒事件 國家應全面調查</p>
<p>
<span>環球網</span>
<span>11-26</span>
</p>
</div>
</div>
</div>
</div>
</body>
</html> 運作後效果:
![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)