flex
容器内子元素的float
、clear
和vertical-align
属性将失效,所有子元素自动成为容器成员flex item
,即“项目”。
水平居中
justify-content
属性定义了项目在主轴(水平)上的对齐方式。
justify-content
可取值:
flex-start
(默认值):左对齐flex-end
:右对齐center
: 居中space-between
:两端对齐,项目之间的间隔都相等。space-around
:每个项目两侧的间隔相等(类似margin-left = margin-right
)。所以,项目之间的间隔比项目与边框的间隔大一倍。
1. 单个元素水平居中
//css.box{display:flex;justify-content:center;background:#0099cc}h1{color:#FFF}//html<div class="box"><h1>flex弹性布局justify-content属性实现元素水平居中</h1></div>
不需要对目标元素设置任何样式,如:width
,margin
。
2. 多个元素水平居中
//css.box{display:flex;justify-content:center;width:100%;background:#0099cc}h1{font-size:1rem;padding:1rem;border:1px dashed#FFF;color:#FFF;font-weight:normal;}//html<div class="box"><h1>flex弹性布局justify-content属性实现元素水平居中</h1><h1>flex弹性布局justify-content属性实现元素水平居中</h1><h1>flex弹性布局justify-content属性实现元素水平居中</h1></div>
元素垂直居中
align-items
属性定义项目在交叉轴(垂直)上如何对齐。
align-items
可取值:
flex-start
:交叉轴的起点对齐。flex-end
:交叉轴的终点对齐。center
:交叉轴的中点对齐。baseline
: 项目的第一行文字的基线对齐。stretch
(默认值):如果项目未设置高度或设为 auto,将占满整个容器的高度。
1. 单个元素垂直居中
//css.box{display:flex;width:980px;height:30rem;align-items:center;background:#0099cc}h1{font-size:1rem;padding:1rem;border:1px dashed#FFF;color:#FFF}//html<div class="box"><h1>flex弹性布局align-items属性实现垂直居中</h1></div>
2. 多个元素并排垂直居中
//css.box{ display:flex; width:980px; height:30rem;align-items:center; background:#0099cc}h1{font-size:1rem; padding:1rem; border:1px dashed #FFF; color:#FFF}//html<div class="box"><h1>flex弹性布局align-items属性实现垂直居中</h1><h1>flex弹性布局align-items属性实现垂直居中</h1><h1>flex弹性布局align-items属性实现垂直居中</h1></div>
如果想父元素水平居中,你只需要给body
标签一个属性就OK了。代码如下:
body{display:flex;justify-content:center;}
3. 多行元素垂直居中
//cssbody{display:flex;justify-content:center}.box{display:flex;width:980px;height:30rem;justify-content:center;background:#0099cc;flex-direction:column;align-items:center;}h1{display:flex;justify-content:center;font-size:1rem;padding:1rem;border:1px dashed #FFF;color:#FFF;width:28rem}//html<div class="box"><h1>flex弹性布局align-items属性实现垂直居中</h1><h1>flex弹性布局align-items属性实现垂直居中</h1><h1>flex弹性布局align-items属性实现垂直居中</h1><h1>flex弹性布局align-items属性实现垂直居中</h1></div>
由于弹性容器.box
添加了display:flex;
属性,子项目默认是水平排列的,所以给.box
追加一个flex-direction:column
属性来让子项目垂直排列。此时垂直方向作为主轴,所以我们可以使用justify-content:center
来让所有子项目在垂直方向上居中。