flex布局(非常重要)
首先明确一点是, flex
是 flex-grow
、flex-shrink
、flex-basis
的缩写。故其取值可以考虑以下情况:
flex
的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值,则 flex
的默认值是 0 1 auto。同理,如下是等同的:
.item {flex: 2333 3222 234px;}
.item {
flex-grow: 2333;
flex-shrink: 3222;
flex-basis: 234px;
}
当 flex
取值为 none
,则计算值为 0 0 auto,如下是等同的:
.item {flex: none;}
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
当 flex
取值为 auto
,则计算值为 1 1 auto,如下是等同的:
.item {flex: auto;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
当 flex
取值为一个非负数字,则该数字为 flex-grow
值,flex-shrink
取 1,flex-basis
取 0%,如下是等同的:
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
当 flex
取值为一个长度或百分比,则视为 flex-basis
值,flex-grow
取 1,flex-shrink
取 1,有如下等同情况(注意 0% 是一个百分比而不是一个非负数字):
.item-1 {flex: 0%;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;
}
当 flex
取值为两个非负数字,则分别视为 flex-grow
和 flex-shrink
的值,flex-basis
取 0%,如下是等同的:
.item {flex: 2 3;}
.item {
flex-grow: 2;
flex-shrink: 3;
flex-basis: 0%;
}
当 flex
取值为一个非负数字和一个长度或百分比,则分别视为 flex-grow
和 flex-basis
的值,flex-shrink
取 1,如下是等同的:
.item {flex: 2333 3222px;}
.item {
flex-grow: 2333;
flex-shrink: 1;
flex-basis: 3222px;
}
flex-basis
规定的是子元素的基准值。所以是否溢出的计算与此属性息息相关。flex-basis
规定的范围取决于 box-sizing
。这里主要讨论以下 flex-basis
的取值情况:
auto
:首先检索该子元素的主尺寸,如果主尺寸不为auto
,则使用值采取主尺寸之值;如果也是auto
,则使用值为content
。content
:指根据该子元素的内容自动布局。有的用户代理没有实现取content
值,等效的替代方案是flex-basis
和主尺寸都取auto
。百分比:根据其包含块(即伸缩父容器)的主尺寸计算。如果包含块的主尺寸未定义(即父容器的主尺寸取决于子元素),则计算结果和设为
auto
一样。
举一个不同的值之间的区别:
<div class="parent">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
</div>
<style type="text/css">
.parent {
display: flex;
width: 600px;
}
.parent > div {
height: 100px;
}
.item-1 {
width: 140px;
flex: 2 1 0%;
background: blue;
}
.item-2 {
width: 100px;
flex: 2 1 auto;
background: darkblue;
}
.item-3 {
flex: 1 1 200px;
background: lightblue;
}
</style>
主轴上父容器总尺寸为 600px
子元素的总基准值是:0% + auto + 200px = 300px,其中
- 0% 即 0 宽度
- auto 对应取主尺寸即 100px故剩余空间为 600px - 300px = 300px
伸缩放大系数之和为: 2 + 2 + 1 = 5
剩余空间分配如下:
- item-1 和 item-2 各分配 2/5,各得 120px
- item-3 分配 1/5,得 60px各项目最终宽度为:
- item-1 = 0% + 120px = 120px
- item-2 = auto + 120px = 220px
- item-3 = 200px + 60px = 260px当 item-1 基准值取 0% 的时候,是把该项目视为零尺寸的,故即便声明其尺寸为 140px,也并没有什么用,形同虚设
而 item-2 基准值取
auto
的时候,根据规则基准值使用值是主尺寸值即 100px,故这 100px 不会纳入剩余空间
flex布局(非常重要)的更多相关文章
- 30分钟彻底弄懂flex布局
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由elson发表于云+社区专栏 目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布 ...
- 弄懂flex布局
目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布局以及它的好处,这里就不再赘述. 在这篇文章里,想说说flex布局的属性语法及其细节.那么网上也 ...
- CSS flex 布局快速入门
以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...
- Flex 布局教程:语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- Flex 布局教程:实例篇
该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...
- 在移动端中的flex布局
flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...
- css flex布局
关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...
- FLEX布局的一些问题和解决方法
前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...
- CSS之flex布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- flex布局示例
来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...
随机推荐
- aarch64架构下安装tensorflow详细过程
本人使用的是: EAIDK-610开发板,Redhat的Linux系统,arm64架构,python3.6环境. 重要的: 一定要下载符合自己环境架构相同的tensorflow安装包. 三种架构: x ...
- 使用python同时替换json多个指定key的value
1.如何同时替换json多个指定key的value import json from jsonpath_ng import parse def join_paths(regx_path,new_val ...
- IIS-7.5 第一次加载慢的 解决办法
问题焦点 Win2008R2,Win7 下面IIS部署的.NET站点第一次加载比较慢. 解决办法: 1.基本原理: 在第一个请求到达之前加载Web应用程序,从而提高其网站的响应性.通过主动加载和初始化 ...
- 初始css一
初始CSS 一.form表单补充 form表单关键性的属性补充 form表单 关键性的属性 action 控制的是数据的提交路径 1.不写 默认是朝着当前页面所在的地址提交 2.全路径 3.后缀(/i ...
- python+树莓派实现IoT(物联网)数据上传到服务器
环境:raspbian-stretch(2018-06-27) 树莓派:3代B型 1.树莓派设备,需要在野外也能拥有独立联网能力,那必不可少的需要使用物联网模块. 这里使用的是微雪的SIM868通讯模 ...
- hibernate并发时的事务处理
两个方法 方法一: public void saveTest() { try { System.out.println("saveTest start"); User user = ...
- input输入框type设置为number,maxlength无效
一个小细节,以前很少注意,直到最近做的一个项目,当我把一个输入数字的input框的类型设置为number时,input框还是可以无限输入,设置maxlengh=10就不起作用了.然后我就去百度了一下, ...
- Emprie 使用基础笔记
0x01 简介 empire 是一个后渗透攻击框架,具有加密通信和灵活框架的功能.Empire可以在不需要Powershell.exe的情况下执行PowerShell代理,后期利用的模块很强大,如sc ...
- openjudge(POJ)-1664 放苹果
对于n个盘子,m个苹果,我们要么在每个盘子上都放苹果,要么至少有一个盘子不放. 一个盘子不放就是f(m,n-1),全部都放的时候苹果就变成了n-m个,但是盘子的数目是不变的,因为此时还没有产生方案数, ...
- [LeetCode] 735. Asteroid Collision
行星碰撞. 题意是给一个数组 asteroids,表示在同一行的行星.对于数组中的每一个元素,其绝对值表示行星的大小,正负表示行星的移动方向(正表示向右移动,负表示向左移动).每一颗行星以相同的速度移 ...