精华内容
下载资源
问答
  • 首先看代码和效果↓ <style> .main { ... display: flex; justify-content: space-between; flex-wrap: wrap; } .main>div { width: 100px; height: 100px; margin-bottom: 10px; backg
  • 引用张鑫旭的篇文章分享给大家,如果你想进行修改进入链接点到对应的图片生成的链接进入,方可修改。 问题描述 //html <div class=list></div> <div class=list></div> <div class=list></div> ...
  • flex 最后一行左对齐

    万次阅读 2017-05-12 21:18:51
    最近项目布局上要求item两端对齐,而且最后一行在列不满的情况下要求左对齐,使用flex的justify-content: space-between;实现时发现最后一行不能左对齐,而是两端对齐方式,下图不是项目上想要的效果(不使用flex也...

    最近项目布局上要求item两端对齐,而且最后一行在列不满的情况下要求左对齐,使用flex的justify-content: space-between;实现时发现最后一行不能左对齐,而是两端对齐方式,下图不是项目上想要的效果(不使用flex也可以实现,本文仅讨论使用flex实现)

    这里写图片描述

    在网上查了很多资料,
    1.添加几个空item(对我来说最有效的,适用于大多数场景)
    根据布局列数添加空item,比如每行最大n列,那么在最后添加n-2个空item即可

    <html>
    <style>
      .item {
        width: 32%;
        background-color: #00abff;
        height: 60px;
        margin-top: 10px;
      }
    
      .itemempty {
        height: 0px;
        width: 32%;
      }
    
      .box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
    </style>
    
    <body>
      <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="itemempty"></div>
        <div class="itemempty"></div>
        <div class="itemempty"></div>
      </div>
    </body>
    
    </html>

    这里写图片描述

    2.利于after(适用于每行列数确定的场景)

    .box:after {
        content: "";
        flex: auto;
     }
    展开全文
  • 但是我们想让最后一左对齐,依次排列,需要在元素的父级增加伪元素after,如图 <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> ul{ display: flex; ...
  • Grid布局天然有gap间隙,且天然格子对齐排布,因此,实现最后一行左对齐可以认为是天生的效果。 <div class="box"> <div class="list"></div> <div class="list"></div> <div ...

    场景 : 无法确定flex 换行后列表个数又不固定,直接调试html特别麻烦,使用Grid布局
    Grid布局天然有gap间隙,且天然格子对齐排布,因此,实现最后一行左对齐可以认为是天生的效果。

    <div class="box">
                <div class="list"></div>
                <div class="list"></div>
                <div class="list"></div>
                <div class="list"></div>
                <div class="list"></div>
                <div class="list"></div>
                <div class="list"></div>
            </div>
    
    .box {
                width: 200px;
                display: grid;
                justify-content: space-between;
                grid-template-columns: repeat(auto-fill, 200px);
                grid-gap: 10px;
                .list {
                    width: 100px; height:100px;
                    background-color: skyblue;
                    margin-top: 5px;
                }
            }
    
    展开全文
  • flex 弹性布局,最后一行数量不足一行 列表项目左对齐的解决办法,经过实际测试,亲自有效,一行的数量可以随意设置。非常有用!
  • flex布局实现最后一行左对齐

    千次阅读 2020-07-07 21:08:56
    justify-content: flex-start; flex-wrap: wrap; max-width: 37.5rem; margin: 0 auto; padding: 2rem 0; 关键代码标红,如果justify-content为center,那么效果是 不规定左右自适应 效果是(因为这页面本身...

     最终效果如下:

    源代码使用vue开发:

    其中 keyboard_word_wrap样式如下:

    1. display: flex;
    2. justify-content: flex-start;
    3. flex-wrap: wrap;
    4. max-width: 37.5rem;
    5. margin: 0 auto;
    6. padding: 2rem 0;

    关键代码标红,如果 justify-content为center,那么效果是

    不规定左右自适应 效果是(因为这页面本身没做font-size自适应 所以我也懒得处理了,就强行实现最终效果)

    而不写最外层的max-width等于2被设计图宽度,margin: 0 auto;是不起作用的。

    展开全文
  • 最后一项margin-right:auto .container { display: flex; justify-content: space-between; flex-wrap: wrap; } .list { background-color: skyblue; margin: 10px; } /* 最后一项margin-right:auto */ .list:...

    每个子项宽度不确定

    1 .最后一项margin-right:auto

    .container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .list {
        background-color: skyblue;
        margin: 10px;
    }
    /* 最后一项margin-right:auto */
    .list:last-child {
        margin-right: auto;
    }
    

    2 .创建伪元素并设置flex:auto或者flex:1

    .container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .list {
        background-color: skyblue;
        margin: 10px;
    }
    /* 使用伪元素辅助左对齐 */
    .container::after {
        content: '';
        flex: auto;    /* 或者flex: 1 */
    }
    

    每一行列数是固定的

    1 .根据个数最后一个元素动态margin

    //每一行都有四列,宽度确定为24% 则剩余总计4%的宽度 最后一行四列的话有3个间隙
    //每个间隙为4%/3
    .list{
    	margin-right: calc(4% / 3)
    }
    //第二列  右边有两个间隙
    .list:last-child:nth-child(4n - 2) {
        margin-right: calc(48% + (4% * 2 / 3));
    }
    //第三列 右边有一个间隙
    .list:last-child:nth-child(4n - 1) {
        margin-right: calc(72% + 4% / 3);
    }
    
    展开全文
  • flex布局最后一行左对齐

    千次阅读 2020-06-20 16:43:09
     有时候会遇到这样的情况,最后一行不够,用了弹性布局,居中了 解决方法: .contact { display: flex; flex-wrap: wrap; justify-content: flex-start;/*靠对其*/ } .contact > view:nth-child(odd) { margin...
  • 点击上方 "程序员小乐"关注,星标或置顶一起成长每天凌晨00点00分,第时间与你相约每日英文Nothing in this world no wounds peop...
  • flex布局 设置justify-content: space-between后最后一行会如下这样: 解决:可以在父元素添加after伪类,并在子元素里添加动态类名,proList.content.length是子元素总数,判断最后一行余几个,以下是一行四个为例...
  • 那么如何实现最后一行左对齐呢? 现有的几个方案 使用标签元素补全缺的item 使用grid 使用伪类 伪类的情况,如果最后一个元素是满的,会有占位,grid会有兼容问题,又不想新增标签。 每一行固定列数的情况实现左...
  • display: flex; flex-wrap: wrap; justify-content: space-between; &::after{ content: ""; width: 180px; /*与子元素的宽度一致*/ } .item{ width: 180px; height: 180px; background: #ddd; margin-bottom: 20px...
  • 给父容器加after或者befor .furongqi:after { content:""; display:block; width: 32%; height:0px; }
  • 实现一行中内容靠边对齐,则需要设置justify-content:space-between; 这样的话,最后一行不填满的情况下,就会出现下面的问题: 此时则需要对最后一行单独设置了: 下面我分几种情况进行分析: 对应的html部分代码...
  • 微信小程序解决flex布局,最后一行左对齐问题 需求:使用flex布局,每行固定三个元素,元素间距自适应,向左对齐 实际效果与代码如下: wxml <view class="con-list"> <view class="con-item" wx:for=...
  • 如图一行显示6个 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .parent { width: 400px; height: 300px; display: flex; justify-content: ...
  • flex布局最后一行列表左对齐的N种方法 方法一、如果子元素的宽度不固定(对于一些数据是后台传过来的,最后一行也不知道多少条数据) 因为宽度不固定不能根据宽度计算出margin的值 (1)最后一项margin-right:auto...
  • display: flex; flex-flow: wrap; } ul.box-list>li{ width: 200px; height: 250px; border: 1px solid red; border-radius: 10px; list-style: none; margin-left: 39px; margin-top: 30px; } style> head> <body>...
  • 效果如图 WXML <div class="item"></div> <div class="item"></div> ... display: flex; flex-wrap: wrap; justify-content: space-between; } .upload_wrapper:after { content: ""; flex: auto; }
  • 需求:元素高度不固定,总数不固定,一行 6 个元素 方案一(×): 使用justify-content: space-between;自动设置列间距的情况 <template> <div class="ft"> <div class="div-flex"> <div ...
  • flex弹性盒布局,最后一行左对齐

    千次阅读 2020-05-07 09:34:31
    使用flex布局,如果是九宫格的话正好可以平分,如图 如果是我们只需要八块,如图 但是我们想让最后一左对齐,依次排列 在这里插入代码片
  • 但是,如果最后一行的列表的个数不满,则就会出现最后一行没有完全垂直对齐的问题 .container { display: flex; justify-content: space-between; flex-wrap: wrap; } .list { width: 24%; height
  • 方法: /* 相同数量的i元素(高度为0),设置相同跨度 */ .box::after { content: ""; width: 30%; display: block; height: 0; } .div { flex: 0 0 30%; margin: 10px 0; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,461
精华内容 5,384
关键字:

flex最后一行左对齐