CSS 垂直居中、水平居中及流失布局宽高自适应,在工作中,经常遇到某个元素如何居中,因此介绍一种简单的居中方式。同时,也经常遇到,上到下布局,当顶部动态变化时,及高度不固定,但是底部如何动态铺满父元素高度,及100%;左到右布局,当左侧动态变化时,及宽度不固定,但是右侧如何动态铺满父元素宽度,及100%。
一、居中
1.垂直居中
仅需父容器添加样式
.parent {
align-items:center;
display: -webkit-flex;
}
2.水平居中
仅需父容器添加样式
.parent {
justify-content:center;
display: -webkit-flex;
}
二、宽高自适应
1.上下动态布局,及2个div或者2个以上div占满100%高度
仅需父容器添加样式
.parent {
display: flex;
flex-flow: column; // 纵向流动
}
仅需最后子元素容器添加样式
.child {
flex: 1; // 最后一个子元素添加样式,占满100%高
}
2.左右动态布局,及2个div或者2个以上div占满100%宽度
仅需父容器添加样式
.parent {
display: flex;
flex-flow: row; // 横向流动
}
仅需最后子元素容器添加样式
.child {
flex: 1; // 最后一个子元素添加样式,占满100%宽
}