常用的几种布局方式---Flex 布局(垂直居中展示)

css基础 专栏收录该内容
3 篇文章 0 订阅


前言

怎样让一个元素在垂直或者水平方向居中显示,可以使用css解决,但是会出现不同浏览器的兼容性问题,而flex布局解决了一个父容器和多个子元素的布局问题,从而灵活布局。

一、默认使用静态布局

在这里插入图111片描述

代码展示
在这里插入图片描述

二、flex布局

1.父元素container

在这里插入图片描述

1.1.display:flex

在父标签加入display:flex后

.wrap{
height:800px;
border:28px solid antiquewhite;
display:flex;
}

垂直布局变成水平布局,如下图所示
在这里插入图片描述

1.2.flex-direction属性

在父标签中修改

.wrap{
height:800px;
border:28px solid antiquewhite;
display:flex;
flex-direction:column;
}

后又变成垂直布局
在这里插入图片描述

1.3.主轴与侧轴

先介绍下主轴和交叉轴概念,有些属性只针对主轴生效,部分对交叉轴生效
在这里插入图片描述

1.4.justify-content属性

justify-content用来设置主轴方向上的子元素排列的方式,属性为center时意味居中显示

.wrap{
height:800px;
border:28px solid antiquewhite;
display:flex;
justify-content:center;
}

又变成水平居中显示:
在这里插入图片描述
更改justify-content属性值,justify-content:flex-start后,从起始侧开始排列:
在这里插入图片描述
justify-content:flex-end后,排列在尾部:
在这里插入图片描述
想均匀分割子元素的空间距离,可使用justify-content:space-between;
在这里插入图片描述
justify-content:space-around;
在这里插入图片描述
justify-content:space-evenly;
在这里插入图片描述

.wrap{
height:800px;
border:28px solid antiquewhite;
display:flex;
flex-direction:column;
justify-content:center;
}

注意,此时因为flex-direction:column变成了垂直展示,但是此时垂直方向(从上到下)为主轴,水平方向(自左向右)为交叉轴
修改后变成垂直方向居中显示:
在这里插入图片描述

1.5.align-items属性

align-items:center用来设置交叉轴方向上的子元素排列的方式,属性为center时意味居中显示

.wrap{
height:800px;
border:28px solid antiquewhite;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

后使交叉轴方向居中显示:
在这里插入图片描述

1.6.flex-wrap属性

当网页缩小到页面不足以容纳元素的排列,使盒子中的元素压缩,失去原来的形状,希望能换行展示,则使用
flex-wrap:wrap;

2.子元素items

在这里插入图片描述

第二个盒子不设定宽度,则盒子宽度就为内容本身宽度
在这里插入图片描述
代码展示
在这里插入图片描述
此时修改代码:

.box-2{
background:darkcyan;
flex-grow:1;
}

代码展示
在这里插入图片描述
更为详细的可以看看阮一峰老师的
Flex 布局教程:语法篇

Flex 布局教程:实例篇(实现骰子的布局)

  • 0
    点赞
  • 2
    评论
  • 4
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页

打赏作者

ljlttkx

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值