flex实现三栏等分布局
前言
在实际开发中，我们经常会想要实现的一种布局方式就是三栏等分布局，那么我们如何来解决这个问题呢？
解决
方法一：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实现三栏等分布局的更多相关文章
- css实现等高布局 两栏自适应布局 三栏自适应布局
等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...
- css实现三栏自适应布局（两边固定，中间自适应）以及优缺点
方法一:绝对定位(absolute + margin) 原理:给左右两边的元素设置absolute,这样左右两边的元素脱离标准文档流的控制,中间的元素自然会上来,然后给中间的元素设置margin留出左 ...
- 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...
- CSS 三栏自适应布局
CSS布局 这个很基础,方法也很多,要留意的知识点还是有一些. 比如IE6的触发layout *zoom:1 比如使用浮动后的清除浮动 clear:both 需求的延伸也会有一些: 比如三栏等高 ...
- css实现三栏水平布局双飞翼与圣杯布局
作为布局的入门级选手,网上也查看了很多信息和资源 双飞翼的html结构 <div class="container"> <div class="main ...
- 使用display:flex;实现两栏布局和三栏布局
一.使用display:flex;实现两栏布局 body,div{margin:0px;padding:0px;} .flex-container{display:flex;height:300px; ...
- 从三栏自适应宽度布局到css布局的讨论
如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...
- css三栏布局方案整理
日常开发中,经常会用到css三栏布局,现将工作中常用的css 三栏布局整理如下: 什么是三栏布局: 三栏布局,顾名思义就是两边固定,中间自适应. 一. float布局 <!DOCTYPE htm ...
- 【CSS】三栏/两栏宽高自适应布局大全
页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...
随机推荐
- 「AHOI / HNOI2017」单旋
「AHOI / HNOI2017」单旋 题目链接 H 国是一个热爱写代码的国家,那里的人们很小去学校学习写各种各样的数据结构.伸展树(splay)是一种数据结构,因为代码好写,功能多,效率高,掌握这种 ...
- 设计模式のSingleton Pattern（单例模式）----创建模式
单例模式没有什么好讲的,我们 举个例子 #region 单例定义 /// <summary> /// 类单例 /// </summary> private static Win ...
- Android中实现短信发送的一种方式
SendSmsActivity.java: package com.test.smsmangerdemo.sendsmsactivity; import android.support.v7.app. ...
- console命令的其他强大用法
阅读目录 谷歌控制台Elements面板查看元素上绑定的事情样式操作总况console.logconsole.infoconsole.errorconsole.warnconsole.debugcon ...
- day1 计算机组成、操作系统
一:编程与编程的目的 1.什么是语言?什么是编程语言? 语言是一个事物与另一个事物沟通的介质. 编程语言是程序员与计算机沟通的介质. 2.什么是编程?为什么要编程? 编程是程序员将自己想要让计算机做的 ...
- day07----字符编码解码、文件操作（1）
字符编码: 什么是字符编码? 字符编码是将人识别的字符转换成计算机能识别的二进制字符(01),转换的规则就是编码表. 人能识别的字符串 与 计算机能识别的二进制字符 两者之间对应关系构成的结构称为 ...
- Linux中断管理 (3)workqueue工作队列
目录: <Linux中断管理> <Linux中断管理 (1)Linux中断管理机制> <Linux中断管理 (2)软中断和tasklet> <Linux中断管 ...
- JS表格分页(封装版)
HTML代码: <html> <head> <meta charset='utf-8'> <script type="text/javascript ...
- 第一部分牛刀小试：启动GDB开始调试
当程序被停住了,你需要做的第一件事就是查看程序是在哪里停住的.当你的程序调用了一个函数,函数的地址,函数参数,函数内的局部变量都会被压入“栈”(Stack)中.你可以用GDB命令来查看当前的栈中的信息 ...
- 吉特日化MES-日化生产称料基本步骤
在日化行业称料是一个非常重要的环节,整个生产过程中称料所占据的时间也比较长,特别是遇到对料体精度高,量大的情况下称料都比较困难,汇总一下人工称料的基本过程: (1) 称量任务准备:根据生产工单或者生产 ...