【1】需求：

【2】解决方案：

最近遇到布局上要求item两端对齐，且最后一行在列不满的情况下要求左对齐，使用flex的justify-content: space-between;
实现时发现最后一行不能左对齐，而是两端对齐方式。

 
不是项目上想要的效果

# 网上查了一些资料，有两种方法可以实现效果：
**1.添加几个空item**（对我来说最有效的，适用于大多数场景）
   根据布局列数添加空item，比如每行最大n列，那么在最后添加n-2个空item即可

<html>

<style>

.box {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

}

.item {

    width: %;

    height: 50px;

    background-color: #f1f8ff;

    margin-bottom: 10px;

}

.placeholder {

    width: %;

    height: 0px;

}

</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="placeholder"></div>

  </div>

</body>

</html>
 
实现效果

**2.利于after或者before（适用于每行3或者4列）**

.box:after {

    display:block;

    content:"";

    width: %;

    height:0px;

}

.

弹性盒模型：flex多行多列两端对齐，列不满左对齐的更多相关文章

  1. 弹性盒模型 flex box

    弹性盒子模型 布局方案 传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项. 而因 ...

  2. css3弹性盒模型flex快速入门与上手(align-content与align-items)

    接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...

  3. 深入理解CSS弹性盒模型flex

    × 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...

  4. CSS弹性盒模型flex在布局中的应用

    × 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...

  5. CSS弹性盒模型(flex box)

    本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...

  6. CSS弹性盒模型flex概念

    盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模型. 先说CSS的伸缩盒模型:flex模型是CSS3引入的新的布局模型,是flexible box的缩写,一般称之为弹性盒模型.和CSS ...

  7. css3之弹性盒模型(Flex Box)

    CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...

  8. CSS3弹性盒模型flex box快速入门 2016.03.16

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  9. css3弹性盒模型flex快速入门与上手1

    一.什么是flex? flex是css3中引入的一种布局方式,可以非常灵活高效控制元素的排列与对齐方式,大多人称之为弹性布局. 二.怎么使用flex? 任何一个容器都可以指定为flex布局 #box ...

  10. 弹性盒模型flex

    一.flex flex是flexible box的缩写,意为“弹性布局”: 定义弹性布局 display:flex; box{ display:flex; } 二.基本定义 我只简单的说一下容器和项目 ...

随机推荐

  1. 第2部分 Elasticsearch查询-请求体查询、排序

    一.请求体查询 请求体 search API, 之所以称之为请求体查询(Full-Body Search),因为大部分参数是通过http请求体而非查询字符串来传递的. 请求体查询:不仅可以处理自身的查 ...

  2. ubantu系统安装ssh

    ssh连接ubantu系统 描述:新安装的ubantu系统,ssh连接发现22端口拒绝,登陆服务器发现没有ssh 1.安装ssh服务 apt-get install openssh-server 报错 ...

  3. 【视频开发】Gstreamer框架中使用gst-launch进行流媒体播放

    Gstreamer框架中使用gst-launch进行流媒体播放 Gstreamer是一套开源的流媒体框架,用其也可以进行流媒体开发,Gstreamer是基于glib库编写的,需要将多个不同功能的元件( ...

  4. 【miscellaneous】编码格式简介（ANSI、GBK、GB2312、UTF-8、GB18030和 UNICODE）

    转发:http://blog.jobbole.com/30526/ 来源:潜行者m 的博客 编码一直是让新手头疼的问题,特别是 GBK.GB2312.UTF-8 这三个比较常见的网页编码的区别,更是让 ...

  5. linux设置root密码&进入不了root

    刚装的linux无法使用root需要初始化密码 1.设置密码 sudo passwd root 点击回车,然后输入两次你想设置的密码,比如123456 2.切换用户 su root 再输入你刚才设置的 ...

  6. 读文件时出现这个错误 'utf-8' codec can't decode byte 0xba in position 21: invalid start byte

    ''' file2 文件内容: 很任性wheniwasyoung ''' 源代码: f = open("file2",'r',encoding="utf-8") ...

  7. AVR单片机教程——旋转编码器

    好久没写这个系列了.今天讲讲旋转编码器. 旋转编码器好像不是单片机玩家很常用的器件,但是我们的开发板上有,原因如下: 旋转编码器挺好用的.电位器能旋转的角度有限,旋转编码器可以无限圈旋转:旋转时不连续 ...

  8. MSSQLSERVER 服务运行内存设置较小导致启动服务失败

    问题产生原因: 手动设置MSSQLSERVER 运行内存,设置值未达到MSSQLSERVER 服务运行内存最低值(max server memory 所允许的最小内存量是 128 MB.),导致MSS ...

  9. nginx通过自定义header属性来转发不同的服务

    一.背景 因为需要上线灰度发布,只要nginx接收到头部为: wx_unionid: 就会跳转到另外一个url,比如: 通过配置nginx 匹配请求头wx_unionid 来转发到灰度环境.核心:客户 ...

  10. linux 释放系统内存命令

    1.sync 因为系统在操作的过程当中,会把你的操作到的文件资料先保存到buffer中去,因为怕你在操作的过程中因为断电等原因遗失数据,所以在你操作过程中会把文件资料先缓存.所以我们执行sync命令, ...