flex 半优雅实现列表浮动流式布局 justify-content: space-between；（太繁琐，不建议这样用）

最新推荐文章于 2024-05-09 10:50:13 发布
最新推荐文章于 2024-05-09 10:50:13 发布
阅读量323 收藏 1
点赞数
分类专栏： html页面 文章标签： flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42708208/article/details/110951166
版权

flex 半优雅实现列表浮动流式布局 justify-content: space-between;

文章目录

概述

  1. 小方块是 50*50px,上下左右间距是 10px
  2. 由于使用的 justify-content: space-between布局,最后一行多余一个时，会自动靠左,所以这种情况不用处理
  3. 6列的时候，由于方块宽度 50px，6 个块的间距恰好是 50px 所有能容下 7 个，所以需要加了一个 margin-left:10px ，这样的话，其实已经失去了justify-content: space-between; 的意义了，还不如直接全部使用 margin-left 省事呢，详见另一篇文章 flex 实现列表浮动流式布局

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex 半优雅实现列表浮动流式布局 justify-content: space-between; </title>
    <style>
        .box1{
            display: flex;
            justify-content: space-around
        }
        .tc{
            text-align: center;
        }
        .par{
            background-color: bisque;
            border:solid 1px salmon;

            justify-content: space-between;
            display: flex;
            flex-wrap: wrap;
        }
        .par_child{
            height: 50px;
            font-size: 30px;
            background-color: azure;

            display: flex;
            flex:0 0 50px;
            margin-bottom: 10px;
            justify-content: center;
            align-items: center;
        }
        /* 3 列 */
        .column3 .par{
            width: 170px; /* 间距 10px */
        }
        .column3 .par_child:last-child:nth-child(3n-1){
            margin-right: 60px;/*50+10*/
        }
        /* 去除最后一行底部的 margin-bottom */
        .column3 .par_child:nth-last-child(1),
        .column3 .par_child:nth-last-child(2),
        .column3 .par_child:nth-last-child(3)
        {
            margin-bottom:0;
        }
        /* 4 列 */
        .column4 .par{
            width: 230px; /* 间距 10px */
        }
        /* 缺2个 */
        .column4 .par_child:last-child:nth-child(4n-2){
            margin-right: 120px;
        }
        /* 缺1个 */
        .column4 .par_child:last-child:nth-child(4n-1){
            margin-right: 60px;
        }
        
        /* 去除最后一行底部的 margin-bottom */
        .column4 .par_child:nth-last-child(1),
        .column4 .par_child:nth-last-child(2),
        .column4 .par_child:nth-last-child(3),
        .column4 .par_child:nth-last-child(4)
        {
            margin-bottom:0;
        }
        /* 5 列 */
        .column5 .par{
            width: 290px; /* 间距 10px */
        }
        /* 缺 1 个 */
        .column5 .par_child:last-child:nth-child(5n-1){
            margin-right: 60px;
        }
        /* 缺 2 个 */
        .column5 .par_child:last-child:nth-child(5n-2){
            margin-right: 120px; 
        }
        /* 缺 3 个 */
        .column5 .par_child:last-child:nth-child(5n-3){
            margin-right: 180px;
        }
        /* 去除最后一行底部的 margin-bottom */
        .column5 .par_child:nth-last-child(1),
        .column5 .par_child:nth-last-child(2),
        .column5 .par_child:nth-last-child(3),
        .column5 .par_child:nth-last-child(4),
        .column5 .par_child:nth-last-child(5)
        {
            margin-bottom:0;
        }
        /* 6 列 */
        .column6 .par{
            width: 350px; /* 间距 10px, 50*6+10*5 */
        }
        .column6 .par_child:not(:nth-child(6n+1)){
            margin-left: 10px;
        }
        /* 多余 2 个 （缺 4 个）*/
        .column6 .par_child:last-child:nth-child(6n-4){
            margin-right:  240px;
        }
        /* 多余 3 个 （缺 3 个）*/
        .column6 .par_child:last-child:nth-child(6n-3){
            margin-right:  180px;
        }
        /* 多余 4 个 （缺 2 个）*/
        .column6 .par_child:last-child:nth-child(6n-2){
            margin-right:  120px;
        }
        /* 多余 5 个 （缺 1 个）*/
        .column6 .par_child:last-child:nth-child(6n-1){
            margin-right:  60px;
        }
        
        /* 去除最后一行底部的 margin-bottom */
        .column6 .par_child:nth-last-child(1),
        .column6 .par_child:nth-last-child(2),
        .column6 .par_child:nth-last-child(3),
        .column6 .par_child:nth-last-child(4),
        .column6 .par_child:nth-last-child(5),
        .column6 .par_child:nth-last-child(6)
        {
            margin-bottom:0;
        }
    </style>
</head>
<body>
    <h1 class="tc">flex 半优雅实现列表浮动流式布局</h1>
    <div style="margin:30px auto;width:1400px;">
        <ol>
            <li>小方块是 50*50px,上下左右间距是 10px</li>
            <li>由于使用的 justify-content: space-between布局,最后一行多余一个时，会自动靠左,所以这种情况不用处理</li>
            <li>6列的时候，由于方块宽度 50px，6 个块的间距恰好是 50px 所有能排 7 个，故加了一个 margin-left:10px </li>
        </ol>
    </div>
     <section class="box1">
        <div class="column3">
            <div class="box">
                <h2>3 列布局，多余0 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
               </div>
            </div>
            <div class="box">
                <h2>3 列布局，多余1 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
               </div>
            </div>
            <div class="box">
                <h2>3 列布局，多余2 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
               </div>
            </div>
            <div class="box">
                <h2>3 列布局，多余3 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
               </div>
            </div>
         </div>
        <div class="column4">
            <div class="box">
                <h2>4 列布局，多余0 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
               </div>
            </div>
            <div class="box">
                <h2>4 列布局，多余1 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
               </div>
            </div>
            <div class="box">
                <h2>4 列布局，多余2 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
               </div>
            </div>
            <div class="box">
                <h2>4 列布局，多余3 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
               </div>
            </div>
            <div class="box">
                <h2>4 列布局，多余4 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
                   <div class="par_child">8</div>
               </div>
            </div>
         </div>
        <div class="column5">
            <div class="box">
                <h2>5 列布局，多余0 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
               </div>
            </div>
            <div class="box">
                <h2>5 列布局，多余1 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
               </div>
            </div>
            <div class="box">
                <h2>5 列布局，多余2 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
               </div>
            </div>
            <div class="box">
                <h2>5 列布局，多余3 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
                   <div class="par_child">8</div>
               </div>
            </div>
            <div class="box">
                <h2>5 列布局，多余4 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
                   <div class="par_child">8</div>
                   <div class="par_child">9</div>
               </div>
            </div>
            <div class="box">
                <h2>5 列布局，多余5 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
                   <div class="par_child">8</div>
                   <div class="par_child">9</div>
                   <div class="par_child">10</div>
               </div>
            </div>
           
         </div>
        <div class="column6">
            <div class="box">
                <h2>6 列布局，多余0 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
               </div>
            </div>
            <div class="box">
                <h2>6 列布局，多余1 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
               </div>
            </div>
            <div class="box">
                <h2>6 列布局，多余2 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
                   <div class="par_child">8</div>
               </div>
            </div>
            <div class="box">
                <h2>6 列布局，多余3 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
                   <div class="par_child">8</div>
                   <div class="par_child">9</div>
               </div>
            </div>
            <div class="box">
                <h2>6 列布局，多余4 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
                   <div class="par_child">8</div>
                   <div class="par_child">9</div>
                   <div class="par_child">10</div>
               </div>
            </div>
            <div class="box">
                <h2>6 列布局，多余5 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
                   <div class="par_child">8</div>
                   <div class="par_child">9</div>
                   <div class="par_child">10</div>
                   <div class="par_child">11</div>
               </div>
            </div>
            <div class="box">
                <h2>6 列布局，多余6 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
                   <div class="par_child">8</div>
                   <div class="par_child">9</div>
                   <div class="par_child">10</div>
                   <div class="par_child">11</div>
                   <div class="par_child">12</div>
               </div>
            </div>
         </div>
     </section>
</body>
</html>
我是李大福
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端知识点总结】CSS 基础七
jiang_ziY的博客
02-16 3435
「这是我参与2022首次更文挑战的第15天」 本章内容包含： 1、弹性布局， 2、主轴， 3、侧轴， 4、变轴， 5、盒子垂直水平居中的五种方法， 6、CSS3 抗锯齿形， 7、清除输入框高亮
justify-content：space-between排版问题
weixin_50070859的博客
07-09 3094
flex布局常见的布局问题 justify-content：space-between排版问题 flex布局虽然带来了很大的方便，但有时候也会碰到一些问题，如下：排列不齐 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li
CSS样式表的justify-content: space-between
听海边涛声
05-09 633
CSS样式表的justify-content: space-between
flex布局 just-content:space-between，列表上下两排数量不一致的时候处理方法
Buddha_ITXiong的博客
08-08 1万+
我们在做项目的时候，经常会遇到列表数据展示的需求，如下图： 看到这种需求就想到用flex布局方法会很方便： 然而··········这样写的话并不会像第一张图片那样展示，第二排的三个数据会平分整个宽度，   思路：所有我采用的方法就是改变原始数据，添加占位容器即添加多余的li元素   我用的是vue，其他框架可以借鉴思维，这是处理原始数据的方法 这是html数据的绑定 ...
让CSS flex布局最后一行列表左对齐的N种方法
xiaojing的博客
10-15 2692
一、justify-content对齐问题描述 在CSS flex布局中，justify-content属性可以控制列表的水平对齐方式，例如space-between值可以实现两端对齐。 但是，如果最后一行的列表的个数不满，则就会出现最后一行没有完全垂直对齐的问题。 如下代码： .container { display: flex; justify-content: sp...
uniapp——项目day04
测试
11-13 895
uniapp项目day04
详解解决flex布局的justify-content: space-between对齐方式的一个BUG的两种方法
12-13
当我们将`display`属性设置为`flex`并使用`justify-content: space-between`，Flexbox会将子元素沿主轴方向均匀分布，首尾元素贴紧容器边缘，而剩余空间平均分配到各个元素之间。这对于创建整齐的多列布局非常有用。...
css3 flex布局 justify-content:space-between 最后一行左对齐
11-21
在CSS3的Flex布局中，`justify-content: space-between`是一种常见的水平分配方式，它将元素之间的空白均匀分布，首尾元素紧贴容器边界。然而，当你试图通过`justify-self: start`使最后一行的元素左对齐时，你会...
flex布局 justify-content 解决最后一排数量不够自动向两端排列问题.doc
03-13
flex布局 justify-content 解决最后一排数量不够自动向两端排列问题，简单，高效，好用。
解决flex布局space-between最后一行左对齐的方法
11-20
首先看代码和效果↓ <style> .main { outline: 1px solid;... justify-content: space-between; flex-wrap: wrap; } .main>div { width: 100px; height: 100px; margin-bottom: 10px; backg
flex布局 父元素属性之 justify-content 主轴上子元素的排列方式
01-07
父元素属性之 justify-content  justify-content：设置主轴上子元素的排列方式 justify-content 的属性值如下： 属性值 含义 flex-start 从主轴的头部开始排，主轴：x轴 左对齐；y轴 顶部对齐（默 认值） ...
space-between时,当为两个内容时中间被空出的解决方案
Front小思的博客
05-19 5003
用flex布局时用到justify-content:space-between属性让弹性容器内的元素向两端对齐,并且平摊对应的宽度！
flex布局对齐方式设置space-between，将最后一行元素左对齐
weixin_45559449的博客
03-19 6334
给盒子设置 justify-content: space-between ， 可以均匀排列盒子中的每个元素，首个元素放置于起点，末尾元素放置于终点。达到左右对齐的效果。但当最后一行元素不能铺满盒子时，会在盒子中均分排列，效果并不是我们需要的。 盒子设置flex布局， 对齐方式设置 justify-content: space-between时，将最后一行元素左对齐，有一下几种方法：特点：适用于任意列数布局，比较简单，缺点是会产生空标签 方案：使用循环体循环一整行空元素。宽度为单个元素宽度，高度为0codeh
弹性布局justify-content:space-between；最后一行元素宽度不足时左对齐的几种处理方式
热门推荐
九日的博客
09-21 1万+
弹性布局justify-content:space-between；最后一行元素宽度不足时左对齐的几种方法 1.列数或总数固定不变（添加占位空元素） 想要的效果： 每一页固定十个元素，最后一页数量不足十时，从左到右从上到下依次排列。 分析： 此处的情况为总数固定不变，每一页轮播图固定是十个元素。核心思想即，在最后一页，元素数量不足十的时候，用空元素补足，以达到想要的布局（即从左到右依次布局）。 解决： <view v-for="(w, j) in v" :key="j"> <view
flex 实现列表浮动流式布局
小哈力----一个小前端工程师
01-06 346
flex 实现列表浮动流式布局 文章目录flex 实现列表浮动流式布局概述效果图代码 概述 小方块是 50*50px,上下左右间距是 10px margin-left:10px 实现间距，并清除每行第一个元素的 margin-left 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=
前端进阶html+css05---justify-content: space-between对齐方式的问题（最后一行元素不够）
weixin_43795761的博客
02-24 1723
注：需要添加n-2个span，n为一行小方块的数量，因为当最后一行只有一个小方块的时候，默认放在最左边，不需要添加额外的小方块。只有当最后一行有两个及以上的小方块才需要填充。正常情况下10应该在6的下面。但是justify-content: space-between会导致下面这种情况。添加额外的span, 让span的宽高和粉色小方块的宽一样，高为0。
第139天 justify-content的space-between与around有什么区别？
qq_36529240的博客
12-17 1273
justify-content 定义了在 flex 容器中，沿着主轴的布局方式 space-between: 行内均匀分布元素，距离相同，首尾元素距离边界的距离是元素间距的一半 space-around: 行内均匀分布元素，距离相同，首尾元素紧贴边界 ...
flex布局——align-items属性垂直之共有flex-start、center、flex-end& justify-content属性水平之space-around、space-between
weixin_44867717的博客
12-04 9216
flex
display: flex; flex-direction: column; justify-content: space-between; 如何贴着上面和下面
最新发布
06-06
`justify-content: space-between;` 是 `justify-content` 属性的一个值，它决定了弹性盒子（flex items）在主轴（默认是水平方向，若 `flex-direction` 设为 `column` 则为垂直方向）上的对齐方式。在这种情况下，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值