CSS3 Flexbox 弹性布局教程 & 实操案例

创客云

我们知道在 Web 短暂的历史中,设计师用过多种不同的网页布局方式。一开始,设计师依靠 HTML表格组织内容,把页面分成多行和多列。可是,HTML中的 table 标签原本就不是为页面布局而生的。后来出现了 CSS盒基于浮动的布局,使用这种方法控制页面布局更简单,也更加符合逻辑。

如今,基于浮动的布局仍然是最常用的方法,而且设计师一直在改进其用法。例如,栅格系统就是创建布局的得力工具,不过其背后仍然使用的是浮动。再往后,万维网联盟引入了 CSS定位模块,可以使用相对定位和绝对定位来辅助页面的布局了。至此,在布局的传统解决方案中,有很长一段时间都是基于盒状模型,依赖 display、position 以及 float 属性来进行布局。

但是,这种方式对于那些特殊布局非常的不方便,比如:垂直居中就不容易实现。2009 年,W3C 提出了一种新的方案,Flex布局----可以简便,完整,响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能了。

Flex布局已经成为当前布局的首选方案。本文,将从以下几个方面来介绍 Flex 弹性盒布局:

一、Flex 布局是什么?

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

  1. .box{
  2.   display: flex;
  3. }

行内元素也可以使用 Flex 布局。

  1. .box{
  2.   display: inline-flex;
  3. }

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

  1. .box{
  2.   display: -webkit-flex; /* Safari */
  3.   display: flex;
  4. }

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

二、基本概念

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

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。

主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;

交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴空间叫做cross size。

为了演示上面的属性效果,我们首先建立一个页面,其 HTML代码片段:

  1. <body>
  2.     <!-- 容器盒子 -->
  3.     <div class="container">
  4.         <!-- 项目盒子 -->
  5.         <div class="one item">one</div>
  6.         <div class="two item">two</div>
  7.         <div class="three item">three</div>
  8.         <div class="four item">for</div>
  9.     </div>
  10. </body>

CSS代码片段:

  1. <style>
  2.     * {
  3.         margin: 0;
  4.         padding: 0;
  5.     }
  6.  
  7.     /* 容器 css */
  8.     .container {
  9.         width: 300px;
  10.         height: 300px;
  11.         outline: 1px solid;
  12.         margin: 100px;
  13.     }
  14.  
  15.     /* 项目 css */
  16.     .item {
  17.         width: 60px;
  18.         height: 60px;
  19.         text-align: center;
  20.         line-height: 60px;
  21.         color: white;
  22.     }
  23.  
  24.     /* 每个项目背景颜色 */
  25.     .one {
  26.         background-color: red;
  27.     }
  28.  
  29.     .two {
  30.         background-color: skyblue;
  31.     }
  32.  
  33.     .three {
  34.         background-color: gray;
  35.     }
  36.  
  37.     .four {
  38.         background-color: pink;
  39.     }
  40. </style>

当前的效果如下:

接下来我们给外层的容器添加 display:flex 后,此时容器就变成了一个弹性盒子。

  1. /* 容器 css */
  2. .container {
  3.     width: 300px;
  4.     height: 300px;
  5.     outline: 1px solid;
  6.     margin: 100px;
  7.     display: flex;  /* 设置该盒子为弹性盒 */
  8. }

当我们设置外层盒子为弹性盒之后,里面的子元素排列成了一行。效果如下:

至此,准备工作已经完成。接下来我们就来具体看一下容器属性和项目属性。

三、容器的属性

以下6个属性设置在容器上:

  1. • flex-direction:设置内部项目的排列方向
  2.  
  3. • flex-wrap:设置一行放不下的话是否换行
  4.  
  5. • flex-flow:上面两种属性的简写,推荐使用
  6.  
  7. • justify-content:项目在主轴( x 轴)上的对齐方式
  8.  
  9. • align-items:项目在交叉轴( y 轴)上的对齐方式
  10.  
  11. • align-content:有多根轴线时的对齐方式。如果项目只有一根轴线,那么该属性不起作用

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

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


(上图对应的属性值依次为 column-reverse,column,row,row-reverse)

它可能有4个值。

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

flex-direction属性案例展示,flex-direction属性值为 row-reverse:

  1. /* 容器 css */
  2. .container {
  3.     width: 300px;
  4.     height: 300px;
  5.     outline: 1px solid;
  6.     margin: 100px;
  7.     display: flex;  /* 设置该盒子为弹性盒 */
  8.     flex-direction: row-reverse;  /* 设置弹性盒主轴方向 */
  9. }


flex-direction 属性值为 column 时的效果如下:

flex-direction 属性值为 column-reverse 时的效果如下:

3.2 flex-wrap 属性
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

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

它可能取三个值。

(1)nowrap(默认):不换行。

(2)wrap:换行,第一行在上方。

(3)wrap-reverse:换行,第一行在下方。

flex-wrap属性案例展示,接下来我们来进行实际的代码演示。首先将项目的宽度设置为 100px,如下所示:

  1. /* 项目 css */
  2. .item {
  3.     width: 100px;
  4.     height: 60px;
  5.     text-align: center;
  6.     line-height: 60px;
  7.     color: white;
  8. }

由于默认情况下 flex-wrap 的属性值为 no-wrap,所以空间不足的情况下会压缩每一个项目,如下图所示:

将容器属性 flex-wrap 设置为 wrap:

  1.  /* 容器 css */
  2. .container {
  3.     width: 300px;
  4.     height: 300px;
  5.     outline: 1px solid;
  6.     margin: 100px;
  7.     display: flex;  /* 设置该盒子为弹性盒 */
  8.     flex-wrap: wrap;  /* 设置盒子换行 */
  9. }


flex-wrap 属性值为 wrap-reverse 时的效果如下:

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

  1. .box {
  2.   flex-flow: <flex-direction> || <flex-wrap>
  3. }

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

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


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

  1. flex-start(默认值):左对齐
  2. flex-end:右对齐
  3. center: 居中
  4. space-between:两端对齐,项目之间的间隔都相等。
  5. space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
  6. space-evenly:均匀排列每个元素,每个元素之间的间隔相等

space-between、space-around、space-evenly,这三个属性都需要容器有剩余空间。

justify-content属性案例展示,接下来我们来看一下每一种属性值所对应的不同效果。justify-content 属性值为 flex-start 时,代表以左对齐的方式排列。

  1. /* 容器 css */
  2. .container {
  3.     width: 300px;
  4.     height: 300px;
  5.     outline: 1px solid;
  6.     margin: 100px;
  7.     display: flex;  /* 设置该盒子为弹性盒 */
  8.     justify-content: flex-start;  /* 设置项目的水平对齐方式 */
  9. }
  10. /* 项目 css */
  11. .item {
  12.     width: 60px;  /* 将项目的值重新还原为 60px */
  13.     height: 60px;
  14.     text-align: center;
  15.     line-height: 60px;
  16.     color: white;
  17. }


justify-content 属性值为 flex-end 时,效果如下:

justify-content 属性值为 center 时,效果如下:

justify-content 属性值为 space-between 时,效果如下:

justify-content 属性值为 space-around 时,效果如下:

justify-content 属性值为 space-evenly 时,效果如下:

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

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


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

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

align-items属性案例展示,该属性的默认值为 stretch,这是在项目没有高度的情况下,会撑满整个容器。示例如下:

  1. /* 容器 css */
  2. .container {
  3.     width: 300px;
  4.     height: 300px;
  5.     outline: 1px solid;
  6.     margin: 100px;
  7.     display: flex;  /* 设置该盒子为弹性盒 */
  8. }
  9. /* 项目 css */
  10. .item {
  11.     width: 60px;
  12.     text-align: center;
  13.     line-height: 60px;
  14.     color: white;
  15. }


接下来我们来看一下其他值所对应的效果。首先将项目的高度还原为 60px,然后将 align-items 属性值设置为 flex-start,如下:

  1. /* 容器 css */
  2. .container {
  3.     width: 300px;
  4.     height: 300px;
  5.     outline: 1px solid;
  6.     margin: 100px;
  7.     display: flex;  /* 设置该盒子为弹性盒 */
  8.     align-items: flex-start;
  9. }
  10. /* 项目 css */
  11. .item {
  12.     width: 60px;
  13.     height: 60px;  /* 高度还原为 60px */
  14.     text-align: center;
  15.     line-height: 60px;
  16.     color: white;
  17. }


align-items 属性值设置为 flex-end 时的效果如下:

align-items 属性值设置为 center 时的效果如下:

值为 baseline 时,将以第一行文字的基线来进行对齐。这里我们对第一个项目的字体进行设置,将 font-size 设置为 32px。示例如下:

  1. /* 容器 css */
  2. .container {
  3.     width: 300px;
  4.     height: 300px;
  5.     outline: 1px solid;
  6.     margin: 100px;
  7.     display: flex;  /* 设置该盒子为弹性盒 */
  8.     align-items: baseline;  /* 对齐方式设置为 baseline */
  9. }
  10. /* 项目 css */
  11. .item {
  12.     width: 60px;
  13.     height: 60px;
  14.     text-align: center;
  15.     line-height: 60px;
  16.     color: white;
  17. }
  18. /* 每个项目背景颜色 */
  19. .one {
  20.     background-color: red;
  21.     font-size: 32px;  /* 第一个项目字体变大 */
  22. }


3.6 align-content 属性
align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

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


该属性可能取6个值。

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

align-content属性案例展示,接下来,我们来看一下实际的代码演示。首先我们将项目的 width 设置为 150px,然后设置 flex-wrap 属性值为 wrap,从而得到多个主轴。最后设置 align-content 属性值为 flex-end,如下所示:

  1.  /* 容器 css */
  2. .container {
  3.     width: 300px;
  4.     height: 300px;
  5.     outline: 1px solid;
  6.     margin: 100px;
  7.     display: flex;  /* 设置该盒子为弹性盒 */
  8.     flex-wrap: wrap;  /* 设置 wrap 使盒子有多根轴线 */
  9.     align-content: flex-end;  /* 多根轴线时的对齐方式 */
  10. }
  11. /* 项目 css */
  12. .item {
  13.     width: 150px;  /* 项目宽度设置为 150px */
  14.     height: 60px;
  15.     text-align: center;
  16.     line-height: 60px;
  17.     color: white;
  18. }


align-content 属性值为 flex-start 时的效果:

align-content 属性值为 center 时的效果:

align-content 属性值为 space-between 时的效果:

align-content 属性值为 space-around 时的效果:

align-content 属性值为 stretch 时的效果:

四、项目的属性

以下6个属性设置在项目上。

  1.     • order:项目的排列顺序,数字越小越靠前
  2.     • flex-grow:项目放大的比例
  3.     • flex-shrink:项目缩小的比例
  4.     • flex-basis:项目占据的主轴空间
  5.     • flex:flex-grow,flex-shrink 和 flex-basis 的简写,推荐使用
  6.     • align-self:设置个别项目在交叉轴( y 轴)上的对齐方式

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

  1. .item {
  2.   order: <integer>;
  3. }


order属性案例展示,来看一个具体的示例:

  1.  /* 容器 css */
  2. .container {
  3.     width: 300px;
  4.     height: 300px;
  5.     outline: 1px solid;
  6.     margin: 100px;
  7.     display: flex;  /* 设置该盒子为弹性盒 */
  8. }
  9. /* 项目 css */
  10. .item {
  11.     width: 60px; 
  12.     height: 60px;
  13.     text-align: center;
  14.     line-height: 60px;
  15.     color: white;
  16. }
  17. /* 每个项目背景颜色 */
  18. .one {
  19.     background-color: red;
  20.     order: 1;  /* 将该项目的 order 设置为 1 */
  21. }

在上面的代码中,我们将项目中的其中一个项目 order 值设置为 1,由于其他项目的 order 值默认都是 0,所以该项目会跑到最后面。效果如下:

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

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


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

  1. /* 容器 css */
  2. .container {
  3.     width: 300px;
  4.     height: 300px;
  5.     outline: 1px solid;
  6.     margin: 100px;
  7.     display: flex;  /* 设置该盒子为弹性盒 */
  8. }
  9. /* 项目 css */
  10. .item {
  11.     width: 30px; 
  12.     height: 60px;
  13.     text-align: center;
  14.     line-height: 60px;
  15.     color: white;
  16.     flex-grow: 1;  /* 设置项目的扩展属性为 1 */
  17. }
  18. /* 每个项目背景颜色 */
  19. .one {
  20.     background-color: red;
  21.     flex-grow: 11;  /* 单独设置这个项目的扩展属性为 11 */
  22. }


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

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

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小,负值对该属性无效。

flex-shrink属性案例展示,这里我们首先将项目的宽度设置为 150px,这样容器空间不够会自动压缩项目的宽度。然后我们对其中一个项目的 flex-shrink 属性设值为 0,可以理解为缩小设置为假(false),让该项目不压缩。具体的代码如下:

  1.  /* 容器 css */
  2. .container {
  3.     width: 300px;
  4.     height: 300px;
  5.     outline: 1px solid;
  6.     margin: 100px;
  7.     display: flex;  /* 设置该盒子为弹性盒 */
  8. }
  9. /* 项目 css */
  10. .item {
  11.     width: 150px;  /* 将盒子宽度改为 150px,默认一排装不下就会压缩盒子 */
  12.     height: 60px;
  13.     text-align: center;
  14.     line-height: 60px;
  15.     color: white;
  16. }
  17. /* 每个项目背景颜色 */
  18. .one {
  19.     background-color: red;
  20.     flex-shrink: 0;  /* 该盒子的 flex-shrink 值设置为 0,表示不压缩该盒子 */
  21. }


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

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

它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。flex-basis属性案例展示,来看一个具体的示例。在下面的例子中,我们将项目的宽度设置为 30px,这样一行就会产生剩余空间。接下来我们指定一个项目的 flex-basis 值为 50%,那么该项目就只会伸展至 50% 的空间。

注:可以理解为相比 flex-grow,flex-basis 能够设置分配剩余空间的一部分,而不是全部分配。

  1. /* 容器 css */
  2. .container {
  3.     width: 300px;
  4.     height: 300px;
  5.     outline: 1px solid;
  6.     margin: 100px;
  7.     display: flex;  /* 设置该盒子为弹性盒 */
  8. }
  9. /* 项目 css */
  10. .item {
  11.     width: 30px;  /* 将盒子宽度改为 30px,这样一行就会产生剩余空间 */
  12.     height: 60px;
  13.     text-align: center;
  14.     line-height: 60px;
  15.     color: white;
  16. }
  17. /* 每个项目背景颜色 */
  18. .one {
  19.     background-color: red;
  20.     flex-basis: 50%;  /* 该项目就只会伸展至 50% 的空间 */
  21. }


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

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

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

注:建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
4.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

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

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

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

align-self属性案例展示,首先我们设置容器的 align-items 属性为 center,表示所有项目的垂直对齐方式为居中对齐。然后单独设置某一个项目的 align-self 属性为 flex-end,和其他盒子的垂直对齐方式不同。具体代码如下:

  1. /* 容器 css */
  2. .container {
  3.     width: 300px;
  4.     height: 300px;
  5.     outline: 1px solid;
  6.     margin: 100px;
  7.     display: flex;  /* 设置该盒子为弹性盒 */
  8.     align-items: center;  /* 设置项目的垂直对齐方式为 center */
  9. }
  10. /* 项目 css */
  11. .item {
  12.     width: 60px;
  13.     height: 60px;
  14.     text-align: center;
  15.     line-height: 60px;
  16.     color: white;
  17. }
  18. /* 每个项目背景颜色 */
  19. .one {
  20.     background-color: red;
  21.     align-self: flex-end;  /* 设置该盒子的垂直对齐方式为 flex-end */
  22. }

总结

1. Flex布局可以简便,完整,响应式地实现各种页面布局,它已经成为当前布局的首选方案。

2. 任何一个容器都可以指定为弹性盒,只需要将 display 属性设置为 Flex即可。

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

4. 学习弹性盒子,其实主要就是学习容器上面可以设置的属性,以及项目上面可以设置的属性。

5. 容器上常见的可设置的属性有 6 个,分别是 flex-direction、flex-wrap、flex-flow、justify-content、align-items 以及 align-content。

6. 项目上常见的可设置的属性也有 6 个,分别是 order、flex-grow、flex-shrink、flex-basis、flex 以及 align-self。

本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/60056.html
云模板

发表评论