弹性盒子如何两行三列，上下左右两边对齐

最新推荐文章于 2023-06-16 14:25:52 发布

James clark

最新推荐文章于 2023-06-16 14:25:52 发布

阅读量2.2k

点赞数 2

分类专栏： vue 文章标签： css html flex js

本文链接：https://blog.csdn.net/jamesclark/article/details/119713270

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

该博客介绍了如何通过CSS的Flexbox布局实现六个盒子在大盒子内的上下左右对齐。利用justify-content:space-between和align-content:space-between属性，确保了子元素在主轴和交叉轴上的间距均匀分布。每个子盒子具有固定的宽度、高度和样式，创建了一个清晰、有序的展示效果。

摘要由CSDN通过智能技术生成

请添加图片描述
六个盒子，在大盒子内，上下左右两边对齐，使用的是弹性方法，属性是 justify-content: space-between 以及 align-content: space-between;、

//父盒子
.gdzcxf {
    width: 1060px;
    height: 292px;
    margin: 28px 0 0 439px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	align-content:  space-between;
}
//子盒子
.gdzcxf li {
    width: 238px;
    height: 99px;
    line-height: 99px;
    background-color: rgba(242, 12, 8, 100);
    color: rgba(255, 255, 255, 100);
    font-size: 36px;
    text-align: center;
    font-family: Roboto;
    border: 1px solid rgba(187, 187, 187, 100);
    width: 30%;
}