<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. 使用PyLint分析评估代码质量

    什么是PyLint PyLint是一款用于评估Python代码质量的分析工具,它诞生于2003年,其最初十年的主要作者和维护者是Sylvain Thénault.PyLint可以用来检查代码是否错误. ...

  2. SpringBoot 自动装配的原理分析

    关于 SpringBoot 的自动装配功能,相信是每一个 Java 程序员天天都会用到的一个功能,但是它究竟是如何实现的呢?今天阿粉来带大家看一下. 自动装配案例 首先我们通过一个案例来看一下自动装配 ...

  3. uniapp微信小程序 原生底部导航栏

    在pages.json文件中写  "tabBar": { "color": "#333333", "selectedColor&q ...

  4. MyBatis是如何初始化的？

    摘要:我们知道MyBatis和数据库的交互有两种方式有Java API和Mapper接口两种,所以MyBatis的初始化必然也有两种:那么MyBatis是如何初始化的呢? 本文分享自华为云社区< ...

  5. 基于redis乐观锁实现并发排队 - 基于scrapy运行数量的控制

    有个需求场景是这样的,使用redis控制scrapy运行的数量.当系统的后台设置为4时,只允许scapry启动4个任务,多余的任务则进行排队. 概况 最近做了一个django + scrapy + c ...

  6. kafka详解(03) - kafka JAVA API

    kafka详解(03) - kafka JAVA API Producer (生产者)API 消息发送流程 Kafka的Producer发送消息采用的是异步发送的方式.在消息发送的过程中,涉及到了两个 ...

  7. day05-Vue02

    Vue02 7.修饰符 7.1基本说明 修饰符(Modifiers)是以.指明的后缀,指出某个指令以特殊方式绑定 官方文档:修饰符 Vue中的修饰符有: 事件修饰符 按键修饰符 系统修饰符 事件修饰符 ...

  8. 发布了一个jar包到中央仓库，我的心好累…

    原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 哈喽大家好啊,我是Hydra. 前几天我在网上冲浪的时候,看见有一个老铁在git上给我提了一个issue: 万万没想到,有一天我写的烂代码居然也 ...

  9. Mybatis用List接收返回值

    Mybatis 用 List 接收返回值 以 List<Map<String, Object>> 为例 1.XML内 resultType 为单条记录对应类型,设置成 java ...

  10. python进阶之路2——解释器软件安装

    内容概要 计算机五大组成部分 计算机三大核心硬件 操作系统 编程与编程语言 编程语言发展史 编程语言的分类 python解释器下载与安装 python解释器多版本共存 pycharm安装 计算机五大组 ...