<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. 环境安装-Centos7.4安装及配置

    环境安装-Centos7.4安装及配置 〇.资料汇总 一.虚拟机安装 1.下载地址 https://pan.baidu.com/s/1zcOp06HX4OxPdsCCGkHbXQ 提取码:7777 2 ...

  2. 【day01】redis

    〇.思维导图 1.解决缓存数据库双写不一致 延迟双删(中间sleep一段时间)--写性能下降 内存队列:同一个key(线程)的所有操作丢到队列,串行化执行--实现麻烦&大量内存队列,队列宕机 ...

  3. 详解 Redis 中 big keys 发现和解决

    在使用 Redis 时,可能会出现请求响应慢.网络卡顿.数据丢失的情况.排查问题的时候,发现是 big keys 的问题. 什么是 big keys 在 Redis 中,一个字符串类型最大可以达到 5 ...

  4. 线上服务异常的定位、处理与优化的探索 - 第三章 Java虚拟机

    Java虚拟机   之所以引入关于JVM的篇章,是发现多数项目发生的线上问题很大的几率源自JVM调优配置不当引起.对JVM的内存模型.GC垃圾回收机制.调优方式有一个系统化的了解后,可以快速处理或避免 ...

  5. 【Java】从头开始学新的编程语言

    本文自用,Java入门笔记 -每个类都要在自己的单独文件中-我大为震撼 能运行的最小的Java程序要有main函数 public static void main(String[] args) (id ...

  6. 周结之json补充、正则re模块、hashlib模块、logging模块

    周结 目录 周结 json补充 正则表达式 re模块 第三方模块的下载 request模块 办公自动化openpyxl模块 hashlib加密模块 subprocess模块 logging日志模块 j ...

  7. EXACT函数

    EXACT函数:EXACT函数是一个文本函数,通过这个函数可以将不同的字符串进行对比,通常用于信息核对. EXACT函数的功能:比较两个字符串是否一致,返回不同的结果. EXACT函数的语法结构:EX ...

  8. 知识分享-消息中间件详解+rabbitMQ

    知识分享-消息中间件详解+rabbitMQ 消息中间件 概述 消息中间件是基于队列与消息传递技术,在网络环境中为应用系统提供同步或异步.可靠的消息传输的支撑性软件系统. 应用场景 异步处理 对于电商a ...

  9. 第七节 VOR/DME进近程序保护区的绘制

    飞行程序设计软件实践 通过前面六节的练习,2023社区版插件的主要功能都已经使用到了.今天通过VOR/DME非精密进近程序,再将这些功能串起来使用一下.今天的软件,我们使用浩辰CAD2023版(过期后 ...

  10. Asp-Net-Core-搭建ELK日志平台-Docker-Compose版本

    title: Asp.Net Core 搭建ELK日志平台(Docker-Compose版本) date: 2022-09-27 15:16:59 tags: - .NET 由于暂时用不上Logsta ...