超详细的Flex布局教程

Flexbox布局(Flexible Box)模块(目前处于W3C工作草案)旨在提供一个更佳有效的布局方式,更好的控制项目的对齐和自由分配容器空间,即使它们的大小是未知的或动态的。因此得其名”flex“。著作权归作者所有。

Flex布局背后的主要思想是给容器控制项目(Flex项目)的宽度、高度的能力,使用Flex项目可以自动填满容器的可用空间(主要是适应所有类型的显示设备和屏幕大小)。Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间。

最重要的是Flexbox布局的direction-agnostic与常规则布局(块的vertically-based和内联horizontally-based)不同。而那些好的页面缺乏灵活性,特别是方向的改变,大小的调整,伸展,收缩等等。

注:Flexbox布局比较适合Web应用程序的一些小组件和小规模的布局,而Grid布局更适合用于一些大规模的布局。

对于一个拥有丰富组件的GUI设计工具来说,界面的布局技术成为界面美化的一个重要方面。Flex从控件的功能上大致提供了两种方法:容器(控制布局),组件(提供GUI实质功能处理)。使用容器分层次管理GUI是当前的趋势,Flex也使用了此种方式,主观上我们认为它把我们界面上的组件通过容器进行了分组或分类布局管理。

原文链接:http://caibaojian.com/flexbox-guide.html

属性介绍
display: flex | inline-flex; (适用于父类容器元素上)

定义一个flex容器,内联或者根据指定的值,来作用于下面的子类容器。·

  • box:将对象作为弹性伸缩盒显示。(伸缩盒最老版本)(css3
  • inline-box:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3
  • flexbox:将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
  • inline-flexbox:将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
  • flex:将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
  • inline-flex:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
请注意:

1.css 列(CSS columns)在弹性盒子中不起作用

2.float, clear and vertical-align 在flex项目中不起作用

flex-direction (适用于父类容器的元素上)

定义:设置或检索伸缩盒对象的子元素在父容器中的位置。

//code from http://caibaojian.com/flexbox-guide.html
flex-direction: row | row-reverse | column | column-reverse
  • row:横向从左到右排列(左对齐),默认的排列方式。
  • row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。
  • column:纵向排列。
  • column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。

flex生效需定义其父元素display为flex或inline-flex(box或inline-box,这是旧的方式)

兼容性处理

/* 子元素-平均分栏 */
      .flex1 {
          -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
          -moz-box-flex: 1;         /* OLD - Firefox 19- */
          width: 20%;               /* For old syntax, otherwise collapses. */
          -webkit-flex: 1;          /* Chrome */
          -ms-flex: 1;              /* IE 10 */
          flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
      }
      /* 父元素-横向排列(主轴) */
      .flex-h {
          display: box;              /* OLD - Android 4.4- */
          display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
          display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
          display: -ms-flexbox;      /* TWEENER - IE 10 */
          display: -webkit-flex;     /* NEW - Chrome */
          display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
          /* 09版 */
          -webkit-box-orient: horizontal;
          /* 12版 */
          -webkit-flex-direction: row;
          -moz-flex-direction: row;
          -ms-flex-direction: row;
          -o-flex-direction: row;
          flex-direction: row;
      }

      /* 父元素-横向换行 */
      .flex-hw {
          /* 09版 */
          /*-webkit-box-lines: multiple;*/
          /* 12版 */
          -webkit-flex-wrap: wrap;
          -moz-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
          -o-flex-wrap: wrap;
          flex-wrap: wrap;
      }
      /* 父元素-水平居中(主轴是横向才生效) */
      .flex-hc {
          /* 09版 */
          -webkit-box-pack: center;
          /* 12版 */
          -webkit-justify-content: center;
          -moz-justify-content: center;
          -ms-justify-content: center;
          -o-justify-content: center;
          justify-content: center;
          /* 其它取值如下:
            align-items     主轴原点方向对齐
            flex-end        主轴延伸方向对齐
            space-between   等间距排列,首尾不留白
            space-around    等间距排列,首尾留白
           */
      }

      /* 父元素-纵向排列(主轴) */
      .flex-v {
          display: box;              /* OLD - Android 4.4- */
          display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
          display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
          display: -ms-flexbox;      /* TWEENER - IE 10 */
          display: -webkit-flex;     /* NEW - Chrome */
          display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
          /* 09版 */
          -webkit-box-orient: vertical;
          /* 12版 */
          -webkit-flex-direction: column;
          -moz-flex-direction: column;
          -ms-flex-direction: column;
          -o-flex-direction: column;
          flex-direction: column;
      }
      /* 父元素-纵向换行 */
      .flex-vw {
          /* 09版 */
          /*-webkit-box-lines: multiple;*/
          /* 12版 */
          -webkit-flex-wrap: wrap;
          -moz-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
          -o-flex-wrap: wrap;
          flex-wrap: wrap;
      }
      /* 父元素-竖直居中(主轴是横向才生效) */
      .flex-vc {
          /* 09版 */
          -webkit-box-align: center;
          /* 12版 */
          -webkit-align-items: center;
          -moz-align-items: center;
          -ms-align-items: center;
          -o-align-items: center;
          align-items: center;
      }

      /* 子元素-显示在从左向右(从上向下)第1个位置,用于改变源文档顺序显示 */
      .flex-1 {
          -webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
          -moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
          -ms-flex-order: 1;              /* TWEENER - IE 10 */
          -webkit-order: 1;               /* NEW - Chrome */
          order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
      }
      /* 子元素-显示在从左向右(从上向下)第2个位置,用于改变源文档顺序显示 */
      .flex-2 {
          -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
          -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
          -ms-flex-order: 2;              /* TWEENER - IE 10 */
          -webkit-order: 2;               /* NEW - Chrome */
          order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
      }

      /* 父元素-flex容器 */
      .flex {
          display: box;              /* OLD - Android 4.4- */
          display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
          display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
          display: -ms-flexbox;      /* TWEENER - IE 10 */
          display: -webkit-flex;     /* NEW - Chrome */
          display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
      }

你会看到,不管是什么布局,Flex往往都可以几行命令搞定。
这里写图片描述

我只列出代码,

1. Flex布局是什么? #

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

是css3规范中引入的新的布局模型,用最简单的方式满足复杂布局需求,提供了一种高效的方式来对容器中项目进行布局、对齐和分配空间。

flexbox布局的主体思想是元素可以改变大小以适应可用空间,当可用空间变大,flex元素将伸展以填充可用空间,当flex元素超过可用空间时将自动缩小。总之,flex元素是可以让你的布局根据浏览器大小变化进行自动伸缩 。

通过给元素增加display属性可以指定此容器是否是伸缩容器

块级伸缩容器

.box{
  display: flex;
}
行内元素也可以使用Flex布局。
行内伸缩容器
.box{
  display: inline-flex;
}

Webkit内核的浏览器,必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

2. 基本概念 #

采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

伸缩容器有主轴和交叉轴组成,主轴即可以是水平轴,也可以是垂直轴。

  • 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)
  • 主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end
  • 交叉轴的开始位置叫做cross start,结束位置叫做cross end
  • 项目默认沿主轴排列
  • 单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

3. 容器的属性 #

3.1 flex-direction属性 #

flex-direction属性决定主轴的方向(即项目的排列方向)

.box {
  flex-direction: column-reverse | column | row | row-reverse;
}

这张图分别分应4个值

    1. column-reverse:主轴为垂直方向,起点在下沿
    1. column:主轴为垂直方向,起点在上沿
    1. row(默认值):主轴为水平方向,起点在左端
    1. row-reverse:主轴为水平方向,起点在右端

3.2 flex-wrap属性 #

默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,伸缩容器在主轴方向空间不足的情况下,是否换行以及该如何换行,默认不换行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值。

3.2 1. nowrap(默认):不换行。 #

3.2.2. wrap:换行,第一行在上方。 #

3.2.3. wrap-reverse:换行,第一行在下方。 #

3.3 flex-flow #

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

3.4 justify-content属性 #

justify-content属性定义了项目整体在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
  • space-between:两端对齐,项目之间的间隔都相等。

3.5 align-items属性 #

align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
  • baseline: 项目的第一行文字的基线对齐。

3.6 align-content属性 #

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。默认值是stretch
用来调整伸缩项目出现换行后在交叉轴上的对齐方式,要求flex-wrap设置为wrapwrap-reverse

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该属性可能取6个值。

  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • stretch(默认值):轴线占满整个交叉轴。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

4. 项目的属性 #

4.1 order属性 #

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

.item {
  order: <integer>;
}

4.2 flex-grow属性 #

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}


如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

4.3 flex-shrink属性 #

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

.item {
  flex-shrink: <number>; /* default 1 */
}

4.4 flex-basis属性 #

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
定义伸缩项目的基准值,剩余的空间按比率进行伸缩

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

4.5 flex属性 #

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值:

  • flex: auto ->(1 1 auto)
  • flex: none ->(0 0 auto)
  • flex: 1 -> (flex:1 1 0%)

建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

4.6 align-self属性 #

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

4.7 拉伸和收缩的计算方法 #

4.7.1 拉伸时的主轴空间计算 #

  1. 先根据各个项目大小计算出剩余的空间
  2. 计算出扩展系数总和
  3. 每个项目占据空间=本身大小+(项目的扩展系数/扩展系数总和)乘以总剩余空间

4.7.2 收缩时的主轴空间计算 #

  1. 计算总的溢出的内容
  2. 计算出所有项目基准值乘以收缩系数的总占用值
  3. 计算每个项目基准值乘以收缩系数的值
  4. 每个项目占据空间=本身大小-(项目占用值/总占用值)乘以溢出的内容

4.7.3 代码示例 #

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 200px;
            margin:0 auto;
            background: pink;
            display: flex;
        }
        .item{
            height: 200px;
        }
        .item:nth-child(1){
            width: 140px;
            flex:3 1 0%;/*如果设置flex-basis除auto以外的值,则width不起作用*/
            background: red;
        }
        .item:nth-child(2){
            width: 100px;
            flex: 2 2 auto;/*如果flex-basis值为auto,则宽度以width值为准*/
            background: yellow;
        }
        .item:nth-child(3){
            flex: 1 3 200px;
            background: blue;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<!--
flex-grow 扩展比例 当有多余内容时,这个属性起作用  默认值:0
flex-shrink 收缩比例 当内容溢出时,这个属性起作用  默认值:1
flex-basis 子元素扩展内容或者收缩内容时以flex-basis的值为基准  默认值:auto
flex:0 1 auto 默认值

flex:1 ->flex:1 1 0%
flex:none ->flex:0 0 auto
flex:auto ->flex:1 1 auto
-->

<!--
剩余的空间:600 - 300 = 300 flex-grow
扩展系数之和:3+2+1 = 6
1. 0%*600+3*50 = 150
2. 100+2*50 = 200
3.  200+50 = 250

溢出的空间:300-200 = 100  flex-shrink
  每个子元素算上收缩比例的基准值/所有子元素算上收缩比例的基准值 = 收缩的空间/溢出的内容
   第一个子元素需要收缩的大小 = 0
    第二个子元素需要收缩的大小 = 200/800 = x/100 x->25
    第二个子元素最终的大小 = 100-25 = 75

    第三个  600/800 = x/100 ->x = 75
    第三个子元素最终的大小 = 200 -75 = 125


-->
</body>
</html>

5. 默认值 #

5.1 容器默认值 #

flex-direction:row
flex-wrap:nowrap;
flex-flow:row nowrap;
justify-content:flex-start;
align-items:stretch;
align-content:stretch;

5.2 项目默认值 #

order:0;
flex-grow:0;
flex-shrink:1;
flex-basis:auto;
flex:0 1 auto;
align-self:auto;

6. 水平垂直居中的兼容性写法 #

/*指定元素为flex容器*/
          display: -webkit-box;/*老版本 Safari IOS Android Browswer older Webkit browsers*/
          display: -moz-box;/*老版本语法 Firefox(buggy)*/
          display: -ms-flexbox; /*混合版本语法 IE10*/
          display: -webkit-flex; /*新版本语法 Chrome 21+*/
          display:flex; /*新版本语法 Opera12.1 Firefox22+*/

          /*垂直居中*/
          /*老版本语法*/
          -webkit-box-align:center;
          -moz-box-align:center;
          /*混合版本语法*/
          -ms-flex-align:center;
          /*新版本语法*/
          -webkit-align-items:center;
          align-items: center;

          /*水平居中*/
          /*老版本语法*/
          -webkit-box-pack:center;
          -moz-box-pack:center;
          /*混合版本语法*/
          -ms-flex-pack:center;
          /*新版本语法*/
          -webkit-justify-content: center;
          justify-content: center;

参考链接 #

未经允许不得转载:WEB前端开发 » 超详细的Flex布局教程

赞 (0)