pc端页面布局,推荐传统布局方式;移动端或者是不考虑兼容的pc则采用flex
flex:flexible Box 的缩写。
注意:当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和vertical-align 属性将失效。
小概念:
①Flex 容器(flex container)
采用 Flex 布局的元素
②Flex 项目(flex item)
Flex容器的所有子元素
如果给某个行内元素的父级元素设置了 display:flex 属性,那么这个行内元素也变成了行内块?(可以设置宽高)
如:给span的父级元素div设置display:flex前:span作为行内元素,宽高不起作用。
<style type="text/css">
div {
width: 500px;
height: 300px;
background-color: pink;
}
span {
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid red;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
给span的父级元素div设置display:flex后:
总结:通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。
举例1:使三个子元素平分剩余空间?
在给父盒子设置display:flex的基础上,给父盒子设置justify-content: space-around;
div {
width: 500px;
height: 300px;
background-color: pink;
display: flex;
justify-content: space-around;
}
span {
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid red;
}
举例2:使三个子元素平分空间?
div {
width: 500px;
height: 300px;
background-color: pink;
display: flex;
}
span {
flex: 1;
height: 100px;
background-color: skyblue;
border: 1px solid red;
}