弹性盒模型：flex多行多列两端对齐，列不满左对齐
【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多行多列两端对齐，列不满左对齐的更多相关文章
- 弹性盒模型 flex box
弹性盒子模型 布局方案 传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项. 而因 ...
- css3弹性盒模型flex快速入门与上手(align-content与align-items)
接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...
- 深入理解CSS弹性盒模型flex
× 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...
- CSS弹性盒模型flex在布局中的应用
× 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...
- CSS弹性盒模型(flex box)
本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...
- CSS弹性盒模型flex概念
盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模型. 先说CSS的伸缩盒模型:flex模型是CSS3引入的新的布局模型,是flexible box的缩写,一般称之为弹性盒模型.和CSS ...
- css3之弹性盒模型(Flex Box)
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...
- CSS3弹性盒模型flex box快速入门 2016.03.16
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
- css3弹性盒模型flex快速入门与上手1
一.什么是flex? flex是css3中引入的一种布局方式,可以非常灵活高效控制元素的排列与对齐方式,大多人称之为弹性布局. 二.怎么使用flex? 任何一个容器都可以指定为flex布局 #box ...
- 弹性盒模型flex
一.flex flex是flexible box的缩写,意为“弹性布局”: 定义弹性布局 display:flex; box{ display:flex; } 二.基本定义 我只简单的说一下容器和项目 ...
随机推荐
- express脚手架重建node项目
安装express 和express-generator cnpm install express express-generator -g express demo1 创建demo1项目, 进入项目 ...
- spring boot2.x中集成H2数据库
H2数据库介绍 查看 在spring boot中集成 1.添加依赖 <dependency> <groupId>org.springframework.boot</gr ...
- laravel操作mongo详细说明
原文地址:http://returnc.com/detail/3728 一个Eloquent模型和Query构建器,支持MongoDB,使用原始的Laravel API.该库扩展了原始的Larav ...
- Apache Kafka® is a distributed streaming platform
Kafka Connect简介 我们知道过去对于Kafka的定义是分布式,分区化的,带备份机制的日志提交服务.也就是一个分布式的消息队列,这也是他最常见的用法.但是Kafka不止于此,打开最新的官网. ...
- (CSDN迁移) JAVA多线程实现-可控最大并发数线程池(newFixedThreadPool)
上篇文章中介绍了单线程化线程池newSingleThreadExecutor,可控最大并发数线程池(newFixedThreadPool)与其最大的区别是可以通知执行多个线程,可以简单的将newSin ...
- JS系列：三元运算符与循环
三元运算符 语法: 条件?成立做的事情:不成立做的事情:<=>相当于简单的if/else判断(简化写法) var num = 12; if(num>10){ num ++; }el ...
- Ng-Alain-mock 运用
Ng-Alain Ng-Alian 是基于 Antd 实现的一个前端框架.它基于 Angular 和 NG-ZORRO,在此基础上进行进一步封装,是中后台的前端解决方案,为我们提供更多通用性业务模块, ...
- 手撕面试官系列（四 ）：MongoDB+Redis 面试专题
MongoDB (面试题+答案领取方式见侧边栏) 你说的 NoSQL 数据库是什么意思?NoSQL 与 RDBMS 直接有什么区别?为什么要使用和不使用NoSQL 数据库?说一说 NoSQL 数据 ...
- Mesh网格简化
Mesh简化算法: 1. 通过mesh简化,可以将一个多边形的网格A转化成另一个网格B 网格B相比A,有更少的三角形面.边.顶点. 2. 简化的过程是受到一定的约束的.会有一系列自定义的质量标准来控制 ...
- day01——python初始、变量、常量、注释、基础数据类型、输入、if
python的历史: 04年Django框架诞生了 内存回收机制是什么(面试题) python2:源码不统一,有重复的功能代码 python3:没有重复的功能代码 python是一个什么的编程语言 编 ...