Flex布局的详细总结

1.认识flex布局

flex布局(flexible布局,弹性布局),是目前web开发中使用的最多的布局方案。

  • 两个重要概念:

    • 开启flex布局的元素叫flex container
    • flex container里面的直接子元素叫做flex items
  • 设置display属性为flex或者inline-flex可以成为flex container:
    • flex:使得flex container以块级形式存在;
    • inline-flex:使得flex container以行内级形式存在;

2.flex布局模型

当元素开启flex布局时,会沿着两个轴来进行布局。

  • 主轴(main axis):沿着flex元素放置的方向延伸的轴;
  • 交叉轴(cross axis):垂直于flex元素放置方向的轴;
  • main startmain end:分别为主轴的开始位置和结束位置;
  • cross startcross end:分别为交叉轴的开始位置和结束位置;
  • main sizecross size:分别为主轴的大小和交叉轴的大小;

3.flex相关的属性

应用在flex container上的属性 应用在flex items上的属性
flex-flow flex
flex-direction flex-grow
flex-wrap flex-basis
justify-content flex-shrink
align-items order
align-content align-self

4.flex container

4.1.flex-direction

  • flex items默认都是沿着main axis(主轴)从main start往main end方向进行排布;

  • flex-direction决定了main axis的方向,有以下四个取值:

    • row(默认值)
    • row-reverse
    • column
    • column-reverse

4.2.justify-content

justify-content决定了flex items在main axis上的对齐方式,有以下取值:

  • flex-start:默认值,与main start对齐;
  • flex-end:与main end对齐;
  • center:居中对齐;

  • space-between:flex items之间的距离相等,与main start、main end两端对齐;
  • space-evenly:flex items之间的距离相等,与main start、main end之间的距离等于flex items之间的距离;
  • space-around:flex items之间的距离相等,与main start、main end之间的距离是flex items之间距离的一半;

4.3.align-items

align-items决定了flex items在cross axis上的对其方式,有以下取值:

  • normal:在弹性布局中,效果和stretch一样;

  • stretch:当flex items在cross axis方向的size为auto时,会自动拉伸至填充flex container;

  • flex-start:与cross start对齐;

  • flex-end:与cross end对齐;

  • center:居中对齐;

  • baseline:与基准线对齐;

4.4.flex-wrap

flex-wrap决定了flex container是单行还是多行,有以下取值:

  • nowrap:默认值,单行;
  • wrap:多行;
  • wrap-reverse:多行(对比wrap,cross start和cross end相反);

4.5.flex-flow

  • flex-flow是flex-direction | flex-wrap的简写;
  • 可以省略,顺序任意;

4.6.align-content

align-content决定了多行flex items在cross axis上的对齐方式,用法与justify-content类似,有以下取值:

  • stretch:默认值;
  • flex-start:与cross start对齐;
  • flex-end:与cross end对齐;
  • center:居中对齐;

  • space-between:flex items之间的距离相等,与cross start、cross end两端对齐;
  • space-around:flex items之间的距离相等,与cross start、cross end之间的距离是flex items之间距离的一半;
  • space-evenly:flex items之间的距离相等,与cross start、cross end之间的距离等于flex items之间的距离;

5.flex items

5.1.order

order决定了flex items的排布顺序。

  • 可以设置任意整数(正整数、负整数、0),值越小就越排在前面
  • 默认值是0;

5.2.align-self

flex items可以通过align-self覆盖flex container设置的align-items属性。

  • auto:默认值,使用flex container设置的align-items属性;
  • stretch、flex-start、flex-end、center、baseline属性值效果跟align-items一致;
  • 如果想单独某些items在cross axis上的对齐方式,就可以单独给某个flex item设置align-self;

5.3.flex-grow

  • flex-grow决定了flex items如何扩展;

    • 可以设置任意非负数字(正小数、正整数、0),默认值为0;
    • 当flex container在main axis方向上有剩余的空间时,flex-grow属性才会生效;
  • 如果所有flex items的flex-grow总和超过1,每个flex item扩展的size为:flex container剩余size * 当前flex item的flex-grow值 / sum
  • 如果所有flex items的flex-grow总和不超过1,每个flex item扩展的size为:flex container剩余size * 当前flex item的flex-grow值
  • 注意:flex itmes扩展后的最终size不能超过max-widht、max-height;

示例代码:

.box {
display: flex;
flex-wrap: wrap;
width: 500px;
height: 400px;
background-color: skyblue;
color: #fff;
} .inner {
width: 100px;
height: 100px;
} .inner1 {
background-color: #f00;
flex-grow: 0.1;
} .inner2 {
background-color: #0f0;
flex-grow: 0.1;
} .inner3 {
background-color: #00f;
flex-grow: 0.1;
} .inner4 {
background-color: #f0f;
flex-grow: 0.1;
}
<div class="box">
<div class="inner inner1">inner1</div>
<div class="inner inner2">inner2</div>
<div class="inner inner3">inner3</div>
<div class="inner inner4">inner4</div>
</div>

运行结果:

  • 如果给每个inner设置flex-grow: 0.1;,在剩余的100px空间中,每个盒子各分100px * 0.1 = 10px的size;

  • 如果给每个inner设置flex-grow: 1;,在剩余的100px中,每个盒子各分100px * 1 / 4 = 25px

5.4.flex-shrink

  • flex-shrink决定了flex items如何收缩;

    • 可以设置任意非负数字(正小数、正整数、0),默认值是1;
    • 当flex items在mian axis方向上超过了flex container的size,flex-shrink属性才会有效;
  • 如果所有flex items的flex-shrink总和sum超过1,每个flex item收缩size为:flex items超出flex container的size * 当前flex item的flex-shrink值 / sum
  • 如果所有的flex items的flex-shrink总和sum不超过1,每个flex item收缩size为:flex items超出flex container的size * sum * 收缩比例 / 所有flex items的收缩比例之和
    • 收缩比例 = 当前item的flex-shrink * flex item的base size,base size就是flex item放入flex container之前的size;
  • flex items收缩后的最终size不能小于min-width、min-height;

示例代码:设置flex container的大小为300px,每个flex items的大小为100px,一共4个超过了flex container的100px。

.box {
display: flex;
width: 300px;
height: 400px;
background-color: skyblue;
color: #fff;
} .inner {
width: 100px;
height: 100px;
} .inner1 {
background-color: #f00;
flex-shrink: 1;
} .inner2 {
background-color: #0f0;
flex-shrink: 1;
} .inner3 {
background-color: #00f;
flex-shrink: 1;
} .inner4 {
background-color: #f0f;
flex-shrink: 1;
}
<div class="box">
<div class="inner inner1">inner1</div>
<div class="inner inner2">inner2</div>
<div class="inner inner3">inner3</div>
<div class="inner inner4">inner4</div>
</div>

运行结果:

  • 当设置flex-shrink: 1,或者不设置(默认值为1),每个flex item的大小收缩:100px * 1 / 4 = 25px,最终大小为100px - 25px = 75px

  • 当设置flex-shrink: 0.1;,每个flex item的大小收缩:100px * 0.4 * 100px * 0.1 / 40px = 10px,最终大小为100px - 10px = 90px

5.5.flex-basis

flex-basis用来设置flex items在main axis方向上的base size。

  • auto:默认值;
  • 设置具体的宽度数值:会覆盖之前给flex items设置的width;

决定flex items最终base size的因素,优先级高到低排列如下:

  • max-width\max-height\min-width\min-height;
  • flex-basis;
  • width\height;
  • 内容本身的size;

5.6.flex

flex是flex-grow | flex-shrink | flex-basis的简写属性,可以指定1、2或3个值。

  • 指定1个值:

    • 一个无单位数:会被当做flex-grow的值;
    • 一个有效的宽度值:会被当做flex-basis的值;
    • 关键字none、auto或initial;
  • 指定2个值:
    • 第一个值必须为一个无单位数,并且作为flex-grow的值;
    • 第二个值必须为以下之一:
      • 一个无单位数:会被当做flex-shrink的值;
      • 一个有效的宽度值:会被当做flex-basis的值;
  • 指定3个值:
    • 第一个值必须为无单位数:会被当做flex-grow的值;
    • 第二个值必须为无单位数:会被当做flex-shrink的值;
    • 第三个值必须为有效宽度值:会被当做flex-basis的值;

Flex布局的详细总结的更多相关文章

  1. FLEX布局的一些问题和解决方法

    前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...

  2. Flex 布局2

    Flex 布局2     你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Sch ...

  3. flex布局浅谈和实例

    阿基米德曾说给我一个支点我可以撬动地球,而拥有flex基本可以撬动所有的布局. 1.flex布局基本介绍及效果展示 工欲善其事必先利其器,来来来,一起看下基础知识先(呵~,老掉牙,但是有用啊). ** ...

  4. Flex 布局教程:实例篇(转)

    你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Schropp的文章和Solve ...

  5. Flex布局实践

    介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon S ...

  6. 微信小程序前置课程:flex布局(二)

    原文:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到 ...

  7. 学习flex布局(弹性布局)

    Flex是Flexible Box的缩写,意为弹性布局.是W3C早期提出的一个新的布局方案.可以便捷的实现页面布局,目前较高版本的主流浏览器都能兼容,兼容情况如下: Flex在移动端开发上已是主流,比 ...

  8. flex盒模型 详细解析

    flex盒模型 详细解析 移动端页面布局,采用盒模型布局,效果很好 /* ============================================================    ...

  9. css3 深入理解flex布局

    一.简要介绍 css3最喜欢的新属性之一便是flex布局属性,用六个字概括便是简单.方便.快速. flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性 ...

随机推荐

  1. SSRF的原理和防范

    背景 最近做的安全测评主要是SSRF,发现自己在这一块有挺大知识盲点,抓紧补一下. 1.介绍 SSRF(Server-Side Request Forgery:服务器端请求伪造),是一种攻击者利用服务 ...

  2. 解决sourceforge下载文件慢的方法

    Sourceforge是一些开源软件经常用到的网站,然而国内的网站一直不稳定,如今是可以访问,但是一直无法下载,或者是下载速度慢,导致下载中断 镜像源:http://sourceforge.mirro ...

  3. 【swift】CoreData Crash(崩溃)(Failed to call designated initializer on NSManagedObject class)

    感谢另一篇博客:https://blog.csdn.net/devday/article/details/6577985 里面的图片和介绍,发现问题如他描述的一样,没有bundle 我的Xcode版本 ...

  4. Shell学习(三)——Shell条件控制和循环语句

    参考博客: [1]Shell脚本的条件控制和循环语句 一.条件控制语句 1.if语句 1.1语法格式: if [ expression ] then Statement(s) to be execut ...

  5. vim使用配置(转)

    在终端下使用vim进行编辑时,默认情况下,编辑的界面上是没有行号的.语法高亮度显示.智能缩进等功能的. 为了更好的在vim下进行工作,需要手动配置一个配置文件: .vimrc 在启动vim时,当前用户 ...

  6. IntentFilter,PendingIntent

    1.当Intent在组件间传递时,组件如果想告知Android系统自己能够响应那些Intent,那么就需要用到IntentFilter对象. IntentFilter对象负责过滤掉组件无法响应和处理的 ...

  7. Oracle trunc和round的区别

    1.关于trunc 和round函数比较 整体概括: round函数 四舍五入trunc函数 直接截取 对于时间: Round函数对日期进行"四舍五入",Trunc函数对日期进行截 ...

  8. Servlet(2):通过servletContext对象实现数据共享

    一,ServletContext介绍 web容器在启动时,它会为每一个web应用程序都创建一个ServletContext对象,它代表当前web应用 多个Servlet通过ServletContext ...

  9. 移动端(App)项目进行满屏高度的设置

    做移动端App的时候 高度一般会根据页面的元素进行自动设置,不会铺满整个屏幕.通过以下代码实现满屏高度. #app{ width: 100%; height: 100%; position: abso ...

  10. AD设置过孔盖油

    设置所有的过孔盖油 ==> 先选中一个过孔,然后根据对象类型查找相似器件,选中所有的过孔,然后勾选过孔盖油选项即可. 上述这种方法不是太好,每次修改完PCB后都要确认下新增的过孔是否已经过孔盖油 ...