谈谈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布局之后如图:
在这里插入图片描述
在这里插入图片描述
display: flex;justify-content: center;就能实现水平居中。
说完水平居中那我们再来看一看垂直居中:其垂直居中的属性为align-items而align-items的取值则为:stretch(默认值,flex子项拉伸)、flex-start(表示为容器顶部对齐)、flex-end(表示为容器底部对齐)、center(表示为垂直居中对齐)。在没有用flex布局我们只能把字体的行高设置为和容器的高一样大小,这样也能实现字体在容器里面实现垂直居中。这样虽然能购物实现垂直居中,但是却存在许多不足,比如 容器本生自适应了屏幕高,那么我们的行高就不能这样去之写。所以我们就要用到flex布局里面的align-items来实现垂直居中。举例:
在这里插入图片描述
在这里插入图片描述
**display: flex;justify-content: center;align-items: center;**这样我们就能够用flex布局来实现文字的水平居中和垂直居中。
这就是HTML语言编程的魅力,如果想快速提升自己,让自己也成为编程高手,详情请了解逆战班。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值