CSS3 Flexbox 弹性布局

Posted 2020-07-29

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 Flexbox 弹性布局相关的知识，希望对你有一定的参考价值。

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

1、先看一下这些属性对应的值

display: flex | inline-flex; flex-direction: row | row-reverse | column | column-reverse; //指定了弹性容器中子元素的排列方式

flex-wrap:wrap-reverse; //设置弹性盒子的子元素超出父容器时是否换行。

flex-flow:row-reverse | warp; justify-content:cnter | flex-end | flex-start | space-around | space-between; //设置弹性盒子元素在主轴（横轴）方向上的对齐方式。

align-items:flex-start | flex-end | stretch | baseline | center; //设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

align-content:stretch | space-around | space-between ; //修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 order: -1 | number; //设置弹性盒子的子元素排列顺序。

flex-grow: 1; //flex-grow属性的值表示的是当容器有多余的空间时，这些空间在不同条目之间的分配比例。

flex-shrink: 0; flex-basis: number+px; flex-self:flex-end; //属性定义了单个弹性项目在侧轴上应当如何对齐，这个定义覆盖由 align-items 所确立的默认值。

flex-flow: //属性是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布

2、轴(Axis)

每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴 (main axis )。垂直于主轴的那根轴称为侧轴(cross axis)。

flex-direction 属性确立主轴。
justify-content 属性定义了在当前行上弹性项目沿主轴如何排布。
align-items 属性定义了在当前行上弹性项目沿侧轴默认如何排布。
align-self 属性定义了单个弹性项目在侧轴上应当如何对齐，这个定义覆盖由align-items 所确立的默认值。

3、方位(Direction)

弹性容器的各个边（主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)）描述了弹性条目流的起点与终点。它们具体取决于弹性容器的主轴与侧轴以及由 writing-mode 确立的方向（从左到右、从右到左，等等）。

order 属性将元素与序号组关联起来，并决定哪些元素先出现。
flex-flow 属性是flex-direction和 flex-wrap 属性的简写，决定弹性项目如何排布。
行(Line)
根据flex-wrap 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。

4、尺寸(Dimension)

根据弹性容器的主轴与侧轴，弹性项目的宽和高相应称为主轴尺寸(main size) 与侧轴尺寸(cross size)。

flex-grow 设置或检索弹性盒的扩展比率 ,默认是0。
flex-basis 设置项目初始的宽度，默认是auto
flex-shrink 设置或检索弹性盒的收缩比率。

flex-grow、flex-shrink 和 flex-basis 可以用flex :flex-grow、flex-shrink flex-basis 代替

5、指派flex弹性框

 display : flex  或   display : inline-flex


6、flex-direction属性的可选值及其含义

　　flex-direction属性确立主轴

row（默认值）主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是，则排列顺序是从左到右；如果文档顺序是 rtl，则排列顺序是从右到左。

row-reverse 主轴为水平方向。排列顺序与页面的文档顺序相反。

column 主轴为垂直方向。排列顺序为从上到下。

column-reverse 主轴为垂直方向。排列顺序为从下到上。

7、flex-wrap属性的可选值及其含义

　　flex-wrap设置弹性盒子的子元素超出父容器时是否换行。

nowrap（默认值）容器中的条目只占满容器在主轴方向上的一行，可能出现条目互相重叠或超出容器范围的现象。

wrap 当容器中的条目超出容器在主轴方向上的一行时，会把条目排列到下一行。下一行的位置与交叉轴的方向一致。

wrap-reverse 与 wrap 的含义类似，不同的是下一行的位置与交叉轴的方向相反。

8、 justify-content属性的可选值和含义

　　justify-content属性定义了在当前行上弹性项目沿主轴如何排布。

flex-start 条目集中于该行的起始位置。第一个条目与其所在行在主轴起始方向上的边界保持对齐，其余的条目按照顺序依次排列。

flex-end 条目集中于该行的结束方向。最后一个条目与其所在行在主轴结束方向上的边界保持对齐，其余的条目按照顺序依次排列。

center 条目集中于该行的中央。条目都往该行的中央排列，在主轴起始方向和结束方向上留有同样大小的空白空间。如果空白空间不足，则条目会在两个方向上超出同样的空间。

space-between 第一个条目与其所在行在主轴起始方向上的边界保持对齐，最后一个条目与其所在行在主轴结束方向上的边界保持对齐。空白空间在条目之间平均分配，使得相邻条目之间的空白尺寸相同。

space-around 类似于 space-between，不同的是第一个条目和最后一个条目与该行的边界之间同样存在空白空间，该空白空间的尺寸是条目之间的空白空间的尺寸的一半。

9、align-items属性的可选值和含义

flex-start 条目与其所在行在交叉轴起始方向上的边界保持对齐。

flex-end 条目与其所在行在交叉轴结束方向上的边界保持对齐。

center 条目的空白边盒子margin box在交叉轴上居中。如果交叉轴尺寸小于条目的尺寸，则条目会在两个方向上超出相同大小的空间。

baseline 条目在基准线上保持对齐。在所有条目中，基准线与交叉轴起始方向上的边界距离最大的条目，它与所在行在交叉轴方向上的边界保持对齐。

stretch 如果条目的交叉轴尺寸的计算值是“auto”，则其实际使用的值会使得条目在交叉轴方向上尽可能地占满。

10、 align-content属性的可选值和含义

(修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐)

flex-start 行集中于容器的交叉轴起始位置。第一行与容器在交叉轴起始方向上的边界保持对齐，其余行按照顺序依次排列。

flex-end 行集中于容器的交叉轴结束位置。第一行与容器在交叉轴结束方向上的边界保持对齐，其余行按照顺序依次排列。

center 行集中于容器的中央。行都往容器的中央排列，在交叉轴起始方向和结束方向上留有同样大小的空白空间。如果空白空间不足，则行会在两个方向上超出同样的空间。

space-between 行在容器中均匀分布。第一行与容器在交叉轴起始方向上的边界保持对齐，最后一行与容器在交叉轴结束方向上的边界保持对齐。空白空间在行之间平均分配，使得相邻行之间的空白尺寸相同。

space-around 类似于 space-between，不同的是第一行条目和最后一个行目与容器行的边界之间同样存在空白空间，而该空白空间的尺寸是行目之间的空白空间的尺寸的一半。

stretch 伸展行来占满剩余的空间。多余的空间在行之间平均分配，使得每一行的交叉轴尺寸变大。

来看一个demo

?<!DOCTYPE html>
<meta charset="UTF-8"/>
<html>
  <head>
    <style>
  *{ margin: 0; padding: 0;}
  body {
   font: 24px Helvetica;
   background: #999999;
  }

  #main {
   min-height: 800px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:  flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }

  #main > article {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
   background: #dddd88;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
   }

  #main > nav {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
   }

  #main > aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
   }

  header, footer {
       display: block;
       margin: 4px;
       padding: 5px;
       min-height: 100px;
       border: 1px solid #eebb55;
       border-radius: 7pt;
       background: #ffeebb;
   }

  /* 窄到已不足以支持三栏 */
  @media all and (max-width: 640px) {

   #main{
    -webkit-flex-flow: column;
            flex-direction: column;
   }

   #main > article, #main > nav, #main > aside {
    /* 恢复到文档内的自然顺序 */
    -webkit-order: 0;
            order: 0;
   }

   #main > nav, #main > aside, header, footer {
    min-height: 50px;
    max-height: 50px;
   }
  }
 </style>
  </head>
  <body>
 <header>header</header>
 <div id=‘main‘>
    <nav>nav</nav>
    <article>article</article>
    <aside>aside</aside>
 </div>
 <footer>footer</footer>
  </body>
</html>

以上是关于CSS3 Flexbox 弹性布局的主要内容，如果未能解决你的问题，请参考以下文章

CSS3 Flexbox 弹性布局

每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴 (main axis )。垂直于主轴的那根轴称为侧轴(cross axis)。

根据弹性容器的主轴与侧轴，弹性项目的宽和高相应称为主轴尺寸(main size) 与 侧轴尺寸(cross size)。

7、flex-wrap属性的可选值及其含义

8、 justify-content属性的可选值和含义

9、align-items属性的可选值和含义

10、 align-content属性的可选值和含义

根据弹性容器的主轴与侧轴，弹性项目的宽和高相应称为主轴尺寸(main size) 与侧轴尺寸(cross size)。