前言

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

解决

方法一：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. 《Java大学教程》--第3章 迭代

    迭代(iteration).重复(repetition):三种循环* for: 重复执行固定次数* while: 重复执行不固定次数* do...while: 比while至少多一次 1.答:P47迭 ...

  2. WPF自定义控件（四）の自定义控件

    在实际工作中,WPF提供的控件并不能完全满足不同的设计需求.这时,需要我们设计自定义控件. 这里LZ总结一些自己的思路,特性如下: Coupling UITemplate Behaviour Func ...

  3. Linux的目录结构--一切从根开始

    Linux目录结构的特点 # 举例-linux下面使用光盘 ###.把光盘放入到光驱中 ###.linux中使用光盘 /dev/cdrom [root@oldboyedu- ~]# ll /dev/c ...

  4. 【vue】饿了么项目的相关笔记链接

    http://www.mtons.com/content/1819.htm http://www.tuicool.com/articles/F7BnaiY https://segmentfault.c ...

  5. 微信硬件平台（七）微信开发--如何存储并定时更新access_token

    https://blog.csdn.net/sct_t/article/details/53002611 我们知道请求access_Token会返回这样一个json,包括access_token(凭证 ...

  6. Kali-linux使用Metasploit基础

    Metasploit是一款开源的安全漏洞检测工具.它可以帮助用户识别安全问题,验证漏洞的缓解措施,并对某些软件进行安全性评估,提供真正的安全风险情报.当用户第一次接触Metasploit渗透测试框架软 ...

  7. layui之确认框

    要使用layui的确认框,需要导入layui的两个库,分别为layer.js和layer.css,除此之外layui.js和layui.css的库也是要导入,这个请注意.所有说你需要分别导入四个库la ...

  8. 管理篇：测试Leader应该做哪些事

    基于前面的2篇分享:基础篇和进阶篇,这篇博客,整理了之前大佬的分享:作为一个测试leader,应该做那些事情... 一.负责测试组的工作组织和管理 1.参加软件产品开发前的需求调研和分析: 2.根据需 ...

  9. 面试笔记--HashMap扩容机制

    转载请注明出处 http://www.cnblogs.com/yanzige/p/8392142.html 扩容必须满足两个条件: 1. 存放新值的时候当前已有元素的个数必须大于等于阈值 2. 存放新 ...

  10. JS表格分页(封装版)

    HTML代码: <html> <head> <meta charset='utf-8'> <script type="text/javascript ...