我眼中的display: flex
display: flex意思是弹性布局
display: flex; 用于设置或检索弹性盒模型对象的子元素如何分配空间。
注意:如果元素不是弹性盒模型对象的子元素,则 flex 属性不起作用。
.content{
display: flex;
}
那么他可以用来做什么呢?
1. 页面行排列布局
- 传统浮动布局如下:
html部分
<div class="content">
<div class="left">
</div>
<div class="right clearfix">
</div>
</div>
CSS3部分
.left{
width: 200px;
height: 300px;
float: left;
border: 4px solid #ae4141;
}
.right{
width: 270px;
height: 300px;
float: right;
border: 4px solid #f90;
}
.clearfix{
zoom: 1;/*兼容IE*/
}
.clearfix:after{
content: " ";
height: 0px;
line-height: 0px;
display: none;
visibility: hidden;
clear: both;
}
局限:
- 浮动布局因为常常需要清除浮动增加额外的代码量;
- 当父级元素未设定时,缩放浏览器窗口可能会改变布局。
用display: flex; 可以解决这些问题
html部分保持原样
CSS3部分如下:
.content{
display: flex;
}
.left{
flex: 1;
}
.right{
flex: 1;
}
.clearfix{
clear: both;
zoom: 1;
}
flex: |number|:指的是如何分配父元素。
- 1:1 平分;
- 1:1:1 平分三份;/当然,对应有三个div/
- 1:2 不均分/1:2的比例/
2. 设置div垂直居中
我们都知道一个div在另外一个div中垂直居中可以有多种方式。
display: flex也有这个功能。
html部分
<div class="parent">
<div class="child">
</div>
</div>
CSS3部分
.parent{
display: flex;
justify-content:center;
align-items:center;
width: 200px;
height: 200px;
background: #000;
}
.child{
width: 100px;
height: 100px;
background: #fff;
}
以上需要注意的是display: flex是放在父元素内,另外还牵扯到了它的两个属性:
- justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
- align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
新人打卡第2天!