前言

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

解决

方法一：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. eclipse使用CXF3.1.*创建webservice服务端客户端以及客户端手机APP（一）

    eclipse使用CXF3.1.*创建webservice服务端客户端以及客户端手机APP(一) 本篇博客主要包含五个内容: 1.CXF换将搭建以及eclipse配置CXF. 2.eclipse创建w ...

  2. 05.Python网络爬虫之三种数据解析方式

    引入 回顾requests实现数据爬取的流程 指定url 基于requests模块发起请求 获取响应对象中的数据 进行持久化存储 其实,在上述流程中还需要较为重要的一步,就是在持久化存储之前需要进行指 ...

  3. ubuntu 环境下编译 hadoop 2.6.0的简单方法

    由于服务器一般都64位系统, hadoop网站的release版本32位native库不能运行,所以需要自己在编译一下.以下是我采用的一个编译的过程,比较简单,不用下载各种版本及环境配置,通过命令就能 ...

  4. Jenkins+Ansible+Gitlab自动化部署三剑客-Jenkins本地搭建

    后面需要shell基础,目前没有,等有了,再更

  5. springboot统一异常处理类及注解参数为数组的写法

    统一异常处理类 package com.wdcloud.categoryserver.common.exception; import com.wdcloud.categoryserver.commo ...

  6. 8.02-json_use

    import json # 1.字符串和 dic list转换 # 字符串(json)----dict list data = '[{"name":"张三",& ...

  7. 如何在excel单元格中插入图片批注

    在excel单元格中插入图片批注的方法: 1.选定要插入图片的单元格,然后右键选择插入批注. 2.然后会插入一个批注框,为了不影响图片效果,可以将批注文字都删除.然后鼠标移动到批注框边角再右键. 3. ...

  8. UVA129-Krypton Factor(搜索剪枝)

    Problem UVA129-Krypton Factor Accept:1959  Submit:10261 Time Limit: 3000 mSec  Problem Description 通 ...

  9. P1824 进击的奶牛（二分）

    思路:把检验的函数说一下,就是检测的距离x时,是否存在c个隔断相离大于等于x,如果是则返回1,不是则返回0 #include<iostream> #include<cstdio> ...

  10. 日幣匯率 ( Node-Red 爬蟲 )

    https://tutorials.webduino.io/zh-tw/docs/socket/useful/exchange-node-red.html