1.背景介绍

传统的布局解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。(display: flex)

目前flex布局的兼容性如下:

2.flex的六属性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

3.详解flex的六大属性

3.1flex-direction属性(flex-direction属性决定主轴的方向(即项目的排列方向))
  1. 它可能有四个值:
  2.  
  3. row(默认值):主轴为水平方向,起点在左端。
  4. row-reverse:主轴为水平方向,起点在右端。
  5. column:主轴为垂直方向,起点在上沿。
  6. column-reverse:主轴为垂直方向,起点在下沿。

3.2  flex-wrap属性(默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。)
  1. 它可能取三个值。
  2.  
  3. 1nowrap(默认):不换行。
  4. 2wrap:换行,第一行在上方
  5. 3wrap-reverse:换行,第一行在下方。

3.3  flex-flow(flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap)
  1. flex-flow: <flex-direction> || <flex-wrap>;
  2. 例如:
  3. flex-flow:row-reverse wrap;表示布局方向为水平右端,布局换行为换行。
3.4 justify-content属性(justify-content属性定义了项目在主轴上的对齐方式)
  1. 它的取值为:
  2.  
  3. flex-start(默认值):左对齐
  4. flex-end:右对齐
  5. center 居中
  6. space-between:两端对齐,组件之间的间隔都相等。
  7. space-around:距边界两侧的间隔相等,元素之间的间隔比项目与边框的间隔大一倍。

3.5  align-items属性(align-items属性定义项目在交叉轴上如何对齐)
  1. 它可能的取值为:
  2.  
  3. flex-start:交叉轴的起点(顶部)对齐。
  4. flex-end:交叉轴的终点(底部)对齐。
  5. center:交叉轴的中点(中间)对齐。
  6. baseline: 项目的第一行文字的基线(即根据内容对齐,不再根据容器)对齐。
  7. stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
  8.  
  9. 备注:align-item主要用于垂直方向的项目的对齐方式,如果设置为center则,项目内容在垂直方向的中间部分。

3.6  align-content属性(align-content属性定义了多根轴线的对齐方式(多行多列形式)。如果项目只有一根轴线,该属性不起作用。)
  1. 它可能的取值:
  2.  
  3. flex-start:与交叉轴的起点对齐。
  4. flex-end:与交叉轴的终点对齐。
  5. center:与交叉轴的中点对齐。
  6. space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  7. space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  8. stretch(默认值):轴线占满整个交叉轴
  9.  
  10. 备注:align-content主要用于多跟轴线的对齐方式,它跟allign-item的区别在于它试用于多跟对称轴,例如下图中的项目内容都是三行,三根对称轴,他们全部的对称方式跟allign-item一样,
  1.  

4.flex布局 项目中的一些常用属性

1.  flex-grow 属性

  1. 该属性来设置,当父元素的宽度大于所有子元素的宽度的和时(即父元素会有剩余空间),子元素如何分配父元素的剩余空间。
    flex-grow的默认值为0,意思是该元素不索取父元素的剩余空间,如果值大于0,表示索取。值越大,索取的越厉害。
    举个例子: 父元素宽400px,有两子元素:ABA宽为100pxB宽为200px 则空余空间为 400-(100+200)= 100px
    如果AB都不索取剩余空间,则有100px的空余空间。 如果A索取剩余空间:设置flex-grow1B不索取。
    则最终A的大小为 自身宽度(100px)+ 剩余空间的宽度(100px)= 200px 如果AB都设索取剩余空间,A设置flex-grow1B设置flex-grow2.
    则最终A的大小为 自身宽度(100px)+ A获得的剩余空间的宽度(100px (1/(1+2))),最终B的大小为 自身宽度(200px)+ B获得的剩余空间的宽度(100px (2/(1+2)))

2.flex-shrink属性

  1. 该属性来设置,当父元素的宽度小于所有子元素的宽度的和时(即子元素会超出父元素),子元素如何缩小自己的宽度的。
    flex-shrink的默认值为1,当父元素的宽度小于所有子元素的宽度的和时,子元素的宽度会减小。值越大,减小的越厉害。如果值为0,表示不减小。
    举个例子: 父元素宽400px,有两子元素:ABA宽为200pxB宽为300px AB总共超出父元素的宽度为(200+300)- 400 = 100px
    如果AB都不减小宽度,即都设置flex-shrink0,则会有100px的宽度超出父元素。
      如果A不减小宽度:设置flex-shrink0B减小,设置flex-sharnk:1。则最终B的大小为 自身宽度(300px)- 总共超出父元素的宽度(100px)= 200px,而A的宽度则仍然为200px不变

注意:

  1. flex-grow的默认值为0,是不索取父元素的剩余宽度,
    flex-sharink的默认值为1,子元素会均摊超出父元素的宽度,(等比例均分)
    flex-basis的默认值是auto,会使用该元素上的width
  2.  
  3. 3.flex-basis属性
  1. 该属性来设置该元素的宽度。当然,width也可以用来设置元素宽度。如果元素上同时设置了widthflex-basis,那么flex-basis会覆盖width的值。width的值会无效
    如果flex-basis设置的值为auto,则会使用该元素上的width的值,如果该元素上的width也为auto,则使用值为content

4.flex属性

  1.  
  1. flex属性是 flex-grow属性、flex-shrink属性、flex-basis属性的简写。默认值为:0 1 auto
  2.  
  3. .item{
    flex:(0 1 auto) | auto(1 1 auto) | none (0 0 auto)
    }
    flex属性常用的三种简写方式:
    1.flex:0 1 auto //默认值 跟我们平常不设置flex时浏览器会自动按这种方式排列样式 即:子元素不会索取父元素的剩余宽度,子元素会均摊超出父元素的宽度,宽度取width值
    2.flex: atuo (1 1 auto) //即子元素会索取父元素的剩余宽度,子元素会均摊超出父元素的宽度,宽度取width值
    3.flex: none (0 0 auto) //即子元素不会索取父元素的剩余宽度,子元素不会均摊超出父元素的宽度,宽度取width值
  1.    注意:
    子元素会根据flex-grow flex-shrink的值,按比例分摊父元素的宽度,不管是超出还是剩余。
    flex-basis的值会替换子元素的width的值,使其无效
    1. flex 取值为一个非负数字,则该数字为 flex-grow 值,flex-shrink  1,flex-basis:0% ,例如:flex:1(常用)
    2. flex 取值为一个长度或百分比,则视为 flex-basis 值,flex-grow  1flex-shrink  1,例如:flex:5%或flex:50px
    3. flex 取值为两个非负数字,则分别视为 flex-grow  flex-shrink 的值,flex-basis  0%,例如:flex:(2 3)
    4. flex 取值为一个非负数字和一个长度或百分比,则分别视为 flex-grow  flex-basis 的值,flex-shrink  1,例如:flex:(2 50%)
  2.  
  3. 总结:flex-shrink的值默认都是1,如果传入的值是非负数字,则优先赋予flex-grow,如果传入的值是长度或百分比,则优先赋予flex-basis
    flex-grow的默认值也是1,如果不传入数字,则默认为1----这与不设置flex值的默认值不同,不设置flex值时,默认为0
  4.  
  5. 5.order属性
  1. order属性设置项目排序的位置,默认值为0,数值越小越靠前
  1.  
  1.  

flex布局详解的更多相关文章

  1. css flex布局详解

    来源:https://blog.csdn.net/liveinmylife/article/details/51838939 1,flex布局是个什么东西? 官方说法:Flex是Flexible Bo ...

  2. display:flex 布局详解(2)

    1.  flex设置元素垂直居中对齐 在之前的一篇文章中记载过如何垂直居中对齐,方法有很多,但是在学习了flex布局之后,垂直居中更加容易实现 HTML代码: <div class=" ...

  3. react-native flex 布局 详解

    而在React Native中,有4个容器属性,2个项目属性,分别是: 容器属性:flexDirection   flexWrap   justifyContent  alignItems 项目属性( ...

  4. css3 flex布局详解

    原文链接: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool https://www.cnblog ...

  5. 弹性盒布局详解(display: flex;)

    弹性盒布局详解 弹性盒介绍 弹性盒的CSS属性 开启弹性盒 弹性容器的CSS属性 flex-direction设置弹性元素在弹性容器中的排列方向 主轴与侧轴(副轴) flex-wrap设置弹性容器空间 ...

  6. Grid 网格布局详解

    Grid网格布局详解: Grid布局与Flex布局有着一定的相似性,Grid布局是将容器划分成行和列,产生单元格,可以看做是二维布局. 基本概念: 采用网格布局的区域,称为"容器" ...

  7. Android开发重点难点1:RelativeLayout(相对布局)详解

    前言 啦啦啦~博主又推出了一个新的系列啦~ 之前的Android开发系列主要以完成实验的过程为主,经常会综合许多知识来写,所以难免会有知识点的交杂,给人一种混乱的感觉. 所以博主推出“重点难点”系列, ...

  8. 【翻译】Anatomy of a Program in Memory—剖析内存中的一个程序(进程的虚拟存储器映像布局详解)

    [翻译]Anatomy of a Program in Memory—剖析内存中的一个程序(进程的虚拟存储器映像布局详解) . . .

  9. Android布局详解之一:FrameLayout

      原创文章,如有转载,请注明出处:http://blog.csdn.net/yihui823/article/details/6702273 FrameLayout是最简单的布局了.所有放在布局里的 ...

随机推荐

  1. 浪潮服务器NF84260M3安装Windows server 2012 R2 RAID配置

    这里是已经做了RAID6,再做系统 浪潮服务器NF84260M3 U盘启动,光盘刻录 Windows server 2012 R2 镜像,地址:迅雷下载,ed2k://|file|cn_windows ...

  2. Kubernetes---Pod重启策略

    PodSpec中有一个restartPolicy 字段,可能的值为Always.OnFailure和Never.默认为Always.restartPolicy 适用于Pod 中的所有容器.restar ...

  3. java日志框架系列(3):logback框架配置详解

    1.Logback配置 1.配置步骤及默认配置 logback即可以通过编程式配置,也可以通过xml的形式配置. logback配置步骤: 1. 尝试在 classpath 下查找文件 logback ...

  4. (十四)springMvc 对 restful 的支持

    文章目录 restful 的概念 配置支持 restful 的前端控制器 配置不拦截静态资源 restful 的概念 restful 是一种开发理念: 对 url 进行规范 每个 url 代表一个资源 ...

  5. JavaScript之二分法

    二分法:   二分查找,又称为折半查找.   注意:二分法查找的数组必须是有序的. /* 获取元素88在数组中第一次出现的索引位置 如果数组元素中存在88,则直接返回88在数组中的索引位置即可. 如果 ...

  6. 最长回文 HDU - 3068(马拉车算法)

    Problem Description 给出一个只由小写英文字符a,b,c...y,z组成的字符串S,求S中最长回文串的长度. 回文就是正反读都是一样的字符串,如aba, abba等 Input 输入 ...

  7. Centos7下永久修改mysql5.6最大连接数

    由于解除系统限制,设置最大连接数时,量力而行.https://blog.csdn.net/five3/article/details/79671317

  8. VS2017生成一个简单的DLL文件 和 LIB文件——C语言

    下面我们将用两种不同的姿势来用VS2017生成dll文件(动态库文件)和lib文件(静态库文件),这里以C语言为例,用最简单的例子,来让读者了解如何生成dll文件(动态库文件) 生成动态库文件 姿势一 ...

  9. 6.Linux查看哪个进程占用磁盘IO

    $ iotop -oP命令的含义:只显示有I/O行为的进程

  10. 【数据结构】P1449 后缀表达式

    [题目链接] https://www.luogu.org/problem/P1449 [题目描述] 所谓后缀表达式是指这样的一个表达式:式中不再引用括号,运算符号放在两个运算对象之后,所有计算按运算符 ...