谈谈flex布局实现水平垂直居中

我们在这要谈的是用flex布局来实现水平和垂直居中。随着移动互联网的发展,对于网页布局来说要求越来越高,而传统的布局方案对于实现特殊布局非常不方便,比如垂直居中。所以09年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。
我们想用flex布局居中的话就得先了解什么是flex布局,flex布局也叫弹性布局。就是能够实现一些特殊的布局方式。言归正传,flex布局首先就得对它的属性就行了解。flex布局包含了多种属性,其中flex布局需要在父元素中加上display: flex;,在此我们就先开始了解水平居中和垂直居中两种属性。其两种属性分别为:justify-contentalign-items而两种属性的取值也有多种。其中justify-content的取值分别为: flex-start(默认值,表示为起始位置对齐)、flex-end(表示为结束位置对齐)、center(表示为水平居中对齐)、space-between(两端对齐)、space-around(环绕)、space-evenly(匀称)。举个实例:
首先我们进行写一个没有加flex布局的页面,呈现的结果为:
谈谈flex布局实现水平垂直居中_第1张图片
谈谈flex布局实现水平垂直居中_第2张图片
加入flex布局之后如图:
谈谈flex布局实现水平垂直居中_第3张图片
谈谈flex布局实现水平垂直居中_第4张图片
display: flex;justify-content: center;就能实现水平居中。
说完水平居中那我们再来看一看垂直居中:其垂直居中的属性为align-items而align-items的取值则为:stretch(默认值,flex子项拉伸)、flex-start(表示为容器顶部对齐)、flex-end(表示为容器底部对齐)、center(表示为垂直居中对齐)。在没有用flex布局我们只能把字体的行高设置为和容器的高一样大小,这样也能实现字体在容器里面实现垂直居中。这样虽然能购物实现垂直居中,但是却存在许多不足,比如 容器本生自适应了屏幕高,那么我们的行高就不能这样去之写。所以我们就要用到flex布局里面的align-items来实现垂直居中。举例:
谈谈flex布局实现水平垂直居中_第5张图片
谈谈flex布局实现水平垂直居中_第6张图片
**display: flex;justify-content: center;align-items: center;**这样我们就能够用flex布局来实现文字的水平居中和垂直居中。
这就是HTML语言编程的魅力,如果想快速提升自己,让自己也成为编程高手,详情请了解逆战班。

你可能感兴趣的:(谈谈flex布局实现水平垂直居中)