前言

怎样一个元素垂直或者水平方居中显示可以使用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.justifycontent属性

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

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

   
   

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

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

   
   

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

1.5.alignitems属性

alignitems: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;
}

   
   

原文地址:https://blog.csdn.net/weixin_64310738/article/details/129034523

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_42074.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注