前言

在实际开发中，我们经常会想要实现的一种布局方式就是三栏等分布局，那么我们如何来解决这个问题呢？

解决

方法一：flex

外层容器也就是ul设置display:flex，对项目也就是li设置flex：auto，代表 flex: 1 1 auto

<style>

        * {

            list-style: none;

            border: ;

            padding: ;

            margin:

        }

        ul {

            width: 500px;

            height: 200px;

            background: red;

            display: flex; 

            margin: auto;

            margin-top: 100px;

            padding:  10px;

            align-items: center;

        }

        li {

            background: green;

            height: 100px;

            width: 500px;

            display: inline-block;

            margin: 2px;
            line-height: 100px;
            text-align: center;
　　　　　　　flex: auto
        }

</style>
<body>

    <ul>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</body>

效果图：

解析：我们注意到width的设置，外层ul是500，li也是500，但是实际看到的确实li平分了ul的宽度，这是因为设置了flex：auto，代表有剩余空间的话项目等分剩余空间放大，空间不足项目等比例缩小

方法二：flex

同上，只不过将flex设置为 1 1 33.33%

<style>

        * {

            list-style: none;

            border: ;

            padding: ;

            margin:

        }

        ul {

            width: 500px;

            height: 200px;

            background: red;

            display: flex; 

            margin: auto;

            margin-top: 100px;

            padding:  10px;

            align-items: center;

        }

        li {

            background: green;

            height: 100px;

            width: 500px;

            display: inline-block;

            margin: 2px;

            line-height: 100px;

            text-align: center;

　　　　 　　 flex: 1 1 33.33%;

        }

</style>

<body>

    <ul>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</body>

效果图：

flex实现三栏等分布局的更多相关文章

  1. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  2. css实现三栏自适应布局（两边固定，中间自适应）以及优缺点

    方法一:绝对定位(absolute + margin) 原理:给左右两边的元素设置absolute,这样左右两边的元素脱离标准文档流的控制,中间的元素自然会上来,然后给中间的元素设置margin留出左 ...

  3. 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  4. CSS 三栏自适应布局

    CSS布局 这个很基础,方法也很多,要留意的知识点还是有一些. 比如IE6的触发layout  *zoom:1 比如使用浮动后的清除浮动  clear:both 需求的延伸也会有一些: 比如三栏等高 ...

  5. css实现三栏水平布局双飞翼与圣杯布局

    作为布局的入门级选手,网上也查看了很多信息和资源 双飞翼的html结构 <div class="container"> <div class="main ...

  6. 使用display:flex;实现两栏布局和三栏布局

    一.使用display:flex;实现两栏布局 body,div{margin:0px;padding:0px;} .flex-container{display:flex;height:300px; ...

  7. 从三栏自适应宽度布局到css布局的讨论

    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...

  8. css三栏布局方案整理

    日常开发中,经常会用到css三栏布局,现将工作中常用的css 三栏布局整理如下: 什么是三栏布局: 三栏布局,顾名思义就是两边固定,中间自适应. 一. float布局 <!DOCTYPE htm ...

  9. 【CSS】三栏/两栏宽高自适应布局大全

    页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...

随机推荐

  1. js原生动态创建表格

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. ES5-ES6-ES7_数值的扩展

    二进制与八进制数值表示法: 二进制用0b, 八进制用0o console.log(0b1010) console.log(0o56) Number.isFinite(i) 判断是否是有限大的数 con ...

  3. Java学习笔记（四）——好记性不如烂键盘（答答租车）

    根据所学知识,编写一个控制台版的租车系统. 功能: 1. 展示所有可租车辆 2. 选择车型.租车辆 3. 展示租车清单,包含:总金额.总载货量及其车型.总载人量及其车型 代码参考imooc中Java课 ...

  4. 安全管理器SecurityManager

    一.文章的目的 这是一篇对Java安全管理器入门的文章,目的是简单了解什么是SecurityManager,对管理器进行简单配置,解决简单问题. 比如在阅读源码的时候,发现这样的代码,想了解是做什么的 ...

  5. 第5章 Java中的锁

    5.1 Lock接口 并发编程安全性需要使用到锁,synchronized是一种隐式的获得与释放锁的关键字,除此之外还有Lock接口及其实现类,该接口及实现类提供了显示获取和释放锁的方式. 除了上述编 ...

  6. Vim 去除因为 Unix 和 Windows 换行符不同带来的 ^M 问题

    由于各操作系统对换行符的处理不同, Unix: \n Windows : \r\n Mac : \r 所以有时 Vim 打开的文件会有如下情况: 解决方法为:在 Vim 中执行命令 :%s/\r//g ...

  7. koa2中间件koa和koa-compose源码分析原理(一)

    koa是基于nodejs平台的下一代web开发框架,它是使用generator和promise,koa的中间件是一系列generator函数的对象.当对象被请求过来的时候,会依次经过各个中间件进行处理 ...

  8. PAT A1055 The World's Richest （25 分）——排序

    Forbes magazine publishes every year its list of billionaires based on the annual ranking of the wor ...

  9. AI 概率图模型

    概率图模型(Probabilistic Graphical Model) 有向图模型 信念网络 贝叶斯网络 无向模型 马尔科夫随机场 马尔科夫网络

  10. Java IO（四）——字符流

    一.字符流 字节流提供了处理任何类型输入/输出操作的功能(因为对于计算机而言,一切都是0和1,只需把数据以字节形式表示就够了),但它们不可以直接操作Unicode字符,因为一个Unicode字符占用2 ...