前言

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

解决

方法一：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. wangedit

    <template> <el-row id="AddRoom"> <el-col :span="5">.</el-co ...

  2. cf 20190307 Codeforces Round #543 (Div. 2, based on Technocup 2019 Final Round)

    B. Mike and Children time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  3. [CQOI2017]老C的键盘

    [CQOI2017]老C的键盘 题目描述 额,网上题解好像都是用的一大堆组合数,然而我懒得推公式. 设\(f[i][j]\)表示以\(i\)为根,且\(i\)的权值为\(j\)的方案数. 转移: \[ ...

  4. 绝版珍珍藏：web前端技术学习指南

    绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...

  5. Android studio中布局文件出现render problem问题

    当做layout时,可能会出现render problem的情况.意思就是无法预览当前布局页面,这种情况是因为API版本太高造成的.只需要修改API为更低版本即可.

  6. [Git] Git操作命令

    基础操作 git配置 git config --global user.name "Your Name" git config --global user.email " ...

  7. HTTP协议中GET和POST的区别（详细描述）

    HTTP协议在现代网络通信中被广泛应用,在HTTP 1.0版本中有7种请求方式,在HTTP 1.1版本中有8种请求方式,而这些请求方式中最常用的就是GET和POST,网上关于GET与POST请求方式的 ...

  8. WPF中修改DataGrid单元格值并保存

    编辑DataGrid中的单元格的内容然后保存是非常常用的功能.主要涉及到的方法就是DataGrid的CellEditEnding  和BeginningEdit .其中BeginningEdit 是当 ...

  9. object detection[YOLOv2]

    接着扯YOLO v2 相比较于YOLO v1,作者在之前模型上,先修修补补了一番,提出了YOLO v2模型.并基于imagenet的分类数据集和coco的对象检测数据集,提出了wordnet模型,并成 ...

  10. 如何备份和恢复你的TFS服务器（一）

    备份和恢复一个TFS(Team Foundation Server)服务器常常令人心生畏惧.因为这会涉及到很多服务和步骤.TFS(Team Foundation Server)2010一发布,我就知道 ...