<html>

<head>

  <style>

    html,

    body,

    ul {

      margin: 0;

      padding: 0;

    }

    ul {

      width: 100%;

      display: flex;

      flex-wrap: wrap;

      /* justify-content: space-between; */

    }

    li {

      width: 33%;

      background: #ededee;

      margin-top: 1rem;

      list-style: none;

    }

    ul:after {

      content: "";

      width: 30%;

      height: 0px;

      visibility: hidden;

    }

  </style>

</head>

<body>

  <ul>

    <li>1</li>

    <li>1</li>

    <li>1</li>

    <li>1</li>

    <li>1</li>

    <li>1</li>

    <li>1</li>

    <li>1</li>

    <li>1</li>

    <li>1</li>

    <li>1</li>

  </ul>

</body>

</html>

主要代码：

父：

 ul {

      width: 100%;

      display: flex;

      flex-wrap: wrap;

      justify-content: space-between;

  }

子：

li {

      width: 33%;

}

使用flex布局（多行，一行三个），换行后最后一行左右对齐问题的更多相关文章

  1. CSS中的flex布局

    1.flex 布局的概念 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为 Flex 布局,行内元素也可以通过 ...

  2. Flex布局语法与实践

    一.参考文献 阮一峰 Flex布局的语法 阮一峰 Flex布局的实践 二.Flex语法 (一)Flex是什么 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状 ...

  3. flex布局小记

    越来越深刻的感到日事日毕的必要性,很久之前就做了备忘说要深刻学习flex布局,没想到一拖就拖到了这个时候! 一,什么是flex布局: flex布局即flexible box布局,也就是弹性盒模型或者弹 ...

  4. 2-4 【接口Interface Flex布局】让顶部导航滚动

    可以把复杂的类型做命名.例如接口中没有定义年龄,在定义person的时候 如果写了age那么就会报错.因为我们接口中并没有定义年龄. 可选属性,只读属性 新的布局方式 下面这里menu设置类型为Top ...

  5. 小程序Flex布局

    容器属性 容器支持的属性有:display:通过设置display属性,指定元素是否为Flex布局.flex-direction:指定主轴方向,决定了项目的排列方式.flex-wrap:排列换行设置. ...

  6. flex布局知识点（阮一峰博客）

    任何一个容器都可以指定为flex布局: 行内元素也可以使用flex布局: 设为flex布局以后,子元素的float,clear,vertical-align属性都将失效: flex容器的属性: fle ...

  7. flex布局笔记

    flex布局: 容器: 容器主轴方向: 项目的主轴对齐方式: space-between:两端对齐,项目之间的间隔都相等. space-around:每个项目两侧的间隔相等.所以,项目之间的间隔比项目 ...

  8. flex布局小结

    2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持. Flex 是 Flexible Box 的缩写,意为&qu ...

  9. flex布局，最后一行左对齐

    拥抱flex 网上查找资料解决办法都是操作数据,个人感觉css问题还是用css来解决(当然问题不同,解决方案不同,这里只是针对某个问题的解决方法,不能解决所有问题,大家视情况而定,如果还是不行欢迎沟通 ...

  10. CSS3 Flex布局整理(三)-项目属性

    一.Flex布局中 Flex Item属性控制,可以指定显示顺序.剩余空间的放大,缩小.交叉轴的排列 1.order:定义项目的排列顺序,数值越小,排列越靠前,默认为0.类似z-index 2.fle ...

随机推荐

  1. 控制台运行java

    控制台执行java 新建java代码 新建一个记事本文件,将文件名改为HelloWorld.java,注意:后缀是.java. 若没有显示文件后缀,可以在资源管理器打开显示后缀,然后再次修改文件名,一 ...

  2. [深度学习] tf.keras入门3-回归

    目录 波士顿房价数据集 数据集 数据归一化 模型训练和预测 模型建立和训练 模型预测 总结 回归主要基于波士顿房价数据库进行建模,官方文档地址为:https://tensorflow.google.c ...

  3. python之路51 聚合查询 分组查询

    图书管理系统 1.表设计 先考虑普通字段再考虑外键字段 数据库迁移.测试数据录入 2.首页展示 3.书籍展示 4.书籍添加 5.书籍编辑 后端如何获取用户想要编辑的数据.前端如何展示出待编辑的数据 6 ...

  4. python进阶之路18 os、sys、json模块

    os模块与sys模块 os模块主要与操作系统打交道 sys模块主要与python解释器打交道 os模块(重要) os模块主要与代码运行所在的操作系统打交道 import os os.path.spli ...

  5. [Leetcode]寻找峰值

    题目 思路 如果常规解法不考虑时间复杂度,直接遍历即可得到峰值,时间复杂度为O(n),题目要求O(logn),因此我们需要使用二分法. 首先考虑题目要求:nums[-1]=nums[n]=-∞,因此在 ...

  6. 《机器人SLAM导航核心技术与实战》第1季：第4章_机器人传感器

    <机器人SLAM导航核心技术与实战>第1季:第4章_机器人传感器 视频讲解 [第1季]4.第4章_机器人传感器-视频讲解 [第1季]4.1.第4章_机器人传感器_惯性测量单元-视频讲解 [ ...

  7. antd 3.x升4.x踩坑之路～

    我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品.我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值. 兼容性问题 第三方依赖兼容问题 React - 最低 v16.9,部 ...

  8. Unity之GPS定位（腾讯sdk）

    Unity之GPS定位(腾讯sdk) 目录 Unity之GPS定位(腾讯sdk) 前言 Unity版本及使用插件 正题 编写脚本 Run运行, 跑起来就行,具体要什么,去相关类找就好了. 没有腾讯地图 ...

  9. postman的安装与使用

    一.在浏览器搜索postman找到官网 二.选择自己电脑的操作系统 三.点击下载按钮 完成下载之后双击安装程序即可完成安装操作自动下载到C盘,无法自定义安装 四.安装完成之后自动跳出该页面 我们在学习 ...

  10. 怎么把Java,PHP,Vue等项目上传到GitHub,码云等

    一.到github或者码云上建立一个私有或公开仓库(这里以github为例) 创建成功后我们得到了一个仓库地址,github上的操作完成,现在去项目内捣鼓 二.提交本地文件并推送 1.我是用命令的格式 ...