<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. 丧心病狂，竟有Thread.sleep(0)这种神仙写法？

    前言 最近在网上看到了一段代码,让我感到很迷茫.他在代码中使用了 Thread.sleep(0),让线程休眠时间为0秒,具体代码如下. int i = 0; while (i<10000000) ...

  2. [0x11] 130.火车进站问题【卡特兰数】

    题意 link(more:129.,P1044) 简化题意:给定严格从 \(1\thicksim n\) 这 \(n(n\leqslant 6\times10^4)\) 个整数,规定每个数都要进出栈各 ...

  3. Hadoop详解(01)-概论

    Hadoop详解(01)概论 概念 大数据(Big Data):指无法在一定时间范围内用常规软件工具进行捕捉.管理和处理的数据集合,是需要新处理模式才能具有更强的决策力.洞察发现力和流程优化能力的海量 ...

  4. 实现简单的csv文件上传和bootstrap表格的下载

    一.写一个简单的页面并发送文件 引入bootstrap.js,jQuery.js等,具体的网页就不细写了,很简单. 加入input框,button控件,进度条.如下: <li class=&qu ...

  5. 探究SQL SERVER 更改跟踪

    1.介绍 SQL SERVER在2008以上的版本提供两个用于数据库中跟踪数据更改的功能:变更数据捕获(CDC)与更改跟踪(CT).这两个功能使应用程序能够确定对数据库中的用户表所做的 DML 更改( ...

  6. 就dispatch_source_t写的计时器

    直接上干货,我这里用的是Xcode12.4,macOS:11.2.3 OC版本:               swift版本:        

  7. 路由分发、名称空间、虚拟环境、视图层三板斧、JsonResponse对象、request对象获取文件、视图层FBV与CBV的源码剖析、模版层简介

    今日内容详细 路由分发 ​ django的每一个应用都可以有自己独立的路由层(urls.py)静态文件(static文件夹)模板层(templates文件夹) ​ 基于这个特性多人开发项目就可以完全解 ...

  8. 【力扣】反转链表I和II（迭代和递归）

    前言 有句话叫做:如果面试官跟你看顺眼的话,就给你出一道反转链表,否则就出一道 hard. 所以反转链表不能不会吧,要不面试官想要你都没有机会了. 206. 反转链表 class Solution { ...

  9. vue学习笔记（一） ---- vue指令（总体大纲）

    一.什么是Vue 官方文档:https://cn.vuejs.org/v2/guide/ 关键字: 渐进式框架 自底向上增量开发 视图层 单文件组件 复杂的单页应用 复杂的单页应用: 顾名思义,单页应 ...

  10. 淘宝数据采集之js采集

    搜索页面采集,数据在控制台哦!!! 搜索页面采集,数据在控制台哦!!! 搜索页面采集,数据在控制台哦!!! 既然能打到控制台,当然也能传到系统!!! 既然能打到控制台,当然也能传到系统!!! 既然能打 ...