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>
运行后效果:
