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 (左右浮动,中间不用给宽,设置 ...
随机推荐
- AJAX问题 XMLHttpRequest.status = 0是什么含义
在调用AJAX的时候遇到了XMLHttpRequest. status为0 的情况,http协议里可是没这个状态码的,众所周知,XMLHttpRequest. Status为HTTP请求状态码,一般为 ...
- golang 开发gui
可能因为我电脑上的mingw下只有gcc,没有g++的原因,之前用walk和andlabs都不成功 最后用github上gxui的sample代码终于编译出来一个丑陋的GUI,但编译过程也提示了一堆类 ...
- 静默安装Oracle12.2数据库
实验环境: 操作系统:Redhat 6.4 64位 数 据 库:Oracle 12c R2 一. 安装前准备 1. 创建用户和组 [root@wjq ~]# groupadd -g 1000 o ...
- php微信生成微信公众号二维码扫描进入公众号带参数
https://blog.csdn.net/qq_22823581/article/details/80248555 <?php namespace app\api\model; set_tim ...
- （4）HomeAssistant 语言控制
中文教程:https://www.hachina.io/docs/2073.html 英文网教程:https://www.home-assistant.io/components/conversati ...
- Sphinx 生成 Windows 帮助文件 (.chm文件)
本文不介绍 Sphinx 的用法,只简要罗列 Windows 下生成 .chm 文件的步骤. 0. 首先检查机器是否安装了 HTML Help Workshop 软件,一般安装路径应该是 C:\Pro ...
- Luogu2792 [JSOI2008]小店购物
Luogu2792 [JSOI2008]小店购物 重题 bzoj4349 最小树形图 有 \(n\) 个物品,每个物品有价格 \(c_i\) 和所需个数 \(k_i\) ,所有物品必须恰好买 \(k_ ...
- [TPYBoard - Micropython之会python就能做硬件 8] 学习使用超声波模块制作避障小车
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 一.实验器材 1.TPYboard V102板 一块 2.电机驱动模块L2 ...
- MvcPager帮助文档 — PagerOptions 类
http://www.webdiyer.com/mvcpager2/docs/pageroptions/ MvcPager帮助文档 — PagerOptions 类 表示包含MvcPager分页控件相 ...
- Recurrent Neural Network[Content]
下面的RNN,LSTM,GRU模型图来自这里 简单的综述 1. RNN 图1.1 标准RNN模型的结构 2. BiRNN 3. LSTM 图3.1 LSTM模型的结构 4. Clockwork RNN ...