标签归档：flex

CSS弹性盒子Flex：flex-grow、flex-shrink、flex-basis属性

flex-grow、flex-shrink、flex-basis三个属性的作用：

在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。

(注意：这三个属性都是在子元素上设置的，下面小编要讲的是父元素，指以flex布局的元素(display:flex))

小编这里先教一下大家如何快速记住这三个属性：

首先是 flex-basis ，basis英文意思是<主要成分>，所以他和width放在一起时,肯定把width干掉，basis遇到width时就会说我才是最主要的成分，你是次要成分，所以见到我的时候你要靠边站。

其次是 flex-grow，grow英文意思是<扩大，扩展，增加>,这就代表当父元素的宽度大于子元素宽度之和时，并且父元素有剩余，这时，flex-grow就会说我要成长，我要长大，怎么样才能成长呢，当然是分享父元素的空间了。见下面第二个属性的内容

最后是 flex-shrink， shrink英文意思是<收缩，>，这就代表当父元素的宽度小于子元素宽度之和时，并且超出了父元素的宽度，这时，flex-shrink就会说外面的世界太苦了，我还是回到父亲的怀抱中去吧！因此，flex-shrink就会按照一定的比例进行收缩。

Bootstrap 4的新布局——弹性盒子

04 Bootstrap4的新布局——弹性盒子(flex)

4.1 定义弹性盒子(.d-flex|.d-inline-flex)

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

采用Flex布局的元素，被称为Flex容器，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。

应用display工具创建一个flex box容器，并将直接子元素转换为flex项。Flex容器和项目可以通过附加的Flex属性进行进一步修改。

在bootstrap 4中有两个类来创建弹性盒子，分别为.d-flex和.d-inline-flex。.d-flex类设置对象为弹性伸缩盒子；.d-inline-flex类设置对象为内联块级弹性伸缩盒子。

bootstrap 中定义的.d-flex和.d-inline-flex样式类：

 .d-flex {
   display: -ms-flexbox !important;
   display: flex !important;
 }
 .d-inline-flex {
   display: -ms-inline-flexbox !important;
   display: inline-flex !important;
 }
 <body class="container">
 <h3 class="mb-4">定义弹性盒子</h3>
 <h4>d-flex</h4>
 <!--使用d-flex类创建弹性盒子-->
 <div class="d-flex p-3 bg-warning text-white">
     <div class="p-2 bg-primary">d-flex item 1</div>
     <div class="p-2 bg-success">d-flex item 2</div>
     <div class="p-2 bg-danger">d-flex item 3</div>
 </div><br/>
 <h4>d-inline-flex</h4>
 <!--使用d-inline-flex类创建弹性盒子-->
 <div class="d-inline-flex p-3 bg-warning text-white">
     <div class="p-2 bg-primary">d-inline-flex item 1</div>
     <div class="p-2 bg-success">d-inline-flex item 2</div>
     <div class="p-2 bg-danger">d-inline-flex item 3</div>
 </div>
 </body>

提示：对于.d-flex和.d-inline-flex也存在响应变化，可根据不同的断点来设置。

 .d-{sm|md|lg|xl}-flex
 .d-{sm|md|lg|xl}-inline-flex

4.2 排列方向

4.2.1 水平方向排列(.flex-row)

对于水平方向的排列，使用.flex-row设置子项目从左到右进行排列，是默认值；使用.flex-row-reverse设置子项目从右侧开始排列。

 <body class="container">
 <h3 class="mb-4">水平方向</h3>
 <h4>flex-row（从左侧开始）</h4>
 <div class="d-flex flex-row p-3 bg-warning text-white">
     <div class="p-2 bg-primary">d-flex item 1</div>
     <div class="p-2 bg-success">d-flex item 2</div>
     <div class="p-2 bg-danger">d-flex item 3</div>
 </div><br/>
 <h4>flex-row-reverse（从右侧开始）</h4>
 <div class="d-flex flex-row-reverse bg-warning p-3 text-white">
     <div class="p-2 bg-primary">d-flex item 1</div>
     <div class="p-2 bg-success">d-flex item 2</div>
     <div class="p-2 bg-danger">d-flex item 3</div>
 </div>
 </body>

提示：水平方向布局还可以添加响应式的设置，响应式类如下。

 .flex-{sm|md|lg|xl}-row
 .flex-{sm|md|lg|xl}-row-reverse

4.2.2 垂直方向排列(.flex-column)

使用.flex-column设置垂直方向布局，或使用.flex-column-reverse实现垂直方向的反转布局（从底向上铺开）。

 <body class="container">
 <h3 class="mb-4">垂直方向</h3>
 <h4>flex-column（从上往下）</h4>
 <div class="d-flex flex-column p-3 bg-warning text-white">
     <div class="p-2 bg-primary">Flex item 1</div>
     <div class="p-2 bg-success">Flex item 2</div>
     <div class="p-2 bg-danger">Flex item 3</div>
 </div><br/>
 <h4>flex-column-reverse（从下往上）</h4>
 <div class="d-flex flex-column-reverse bg-warning p-3 text-white">
     <div class="p-2 bg-primary">Flex item 1</div>
     <div class="p-2 bg-success">Flex item 2</div>
     <div class="p-2 bg-danger">Flex item 3</div>
 </div>
 </body>

提示：垂直方向布局也可以添加响应式的设置，响应式类如下。

 .flex-{sm|md|lg|xl}-column
 .flex-{sm|md|lg|xl}-column-reverse

4.3 内容排列( justify-content-*)

使用flexbox弹性布局容器上的 justify-content-*通用样式可以改变flex项目在主轴上的对齐（以x轴开始，如果是flex-direction: column，则以y轴开始)，可选方向值包括：start(浏览器默认值)、end、center、between和around，说明如下：

† .justify-content-start：项目位于容器的开头。

† .justify-content-center：项目位于容器的中心。

† .justify-content-end：项目位于容器的结尾。

† .justify-content-between：项目位于各行之间留有空白的容器内。

† .justify-content-around：项目位于各行之前、之间、之后都留有空白的容器内。

 <body class="container">
 <h3 class="mb-4">内容排列</h3>
 <!--justify-content-start-->
 <div class="d-flex justify-content-start mb-3 bg-warning text-white">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
 </div>
 <!--justify-content-center-->
 <div class="d-flex justify-content-center mb-3 bg-warning text-white">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
 </div>
 <!--justify-content-end-->
 <div class="d-flex justify-content-end mb-3 bg-warning text-white">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
 </div>
 <!--justify-content-between-->
 <div class="d-flex justify-content-between mb-3 bg-warning text-white">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
 </div>
 <!--justify-content-around-->
 <div class="d-flex justify-content-around bg-warning text-white">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
 </div>
 </body>

4.4 项目对齐(align-items-*)

使用align-items-*通用样式可以在flexbox容器上实现flex项目的对齐（以y轴开始，如果选择flex-direction: column，则从x轴开始)，可选值有： start、end、center、baseline和stretch (浏览器默认值)。

  <style>
         .box{
             width: 100%;   /*设置宽度*/
             height: 50px;   /*设置高度*/
         }
     </style>
 </head>
 <body class="container">
 <h3 class="mb-4">项目对齐</h3>
 <div class="d-flex align-items-start bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex align-items-end bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex align-items-center bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex align-items-baseline bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex align-items-stretch bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 </body>

4.5 自动对齐(align-self-*)

使用align-self-*通用样式，可以使Flexbox上的项目单独改变在横轴上的对齐方式（y值开始，如果是flex-direction:column则为x轴开始)，其拥有与align-items相同的可选子项:start、end、center、baseline、和stretch(浏览器默认值)。

  <style>
         .box{
             width: 100%;   /*设置宽度*/
             height: 50px;   /*设置高度*/
             }
  </style>
 </head>
 <body class="container">
 <h3 class="mb-4">指定项目对齐</h3>
 <div class="d-flex bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success align-self-start">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success align-self-center">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success align-self-end">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success align-self-baseline">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success align-self-stretch">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 </body>

4.6 自动相等(.flex-fill)

在一系列子元素上使用.flex-fill类，来强制它们平分剩下的空间。

 <body class="container">
 <h3 class="mb-4">平均分配剩下的空间</h3>
 <div class="d-flex bg-warning text-white">
     <div class="flex-fill p-2 bg-primary ">Flex item1（包含大量内容）</div>
     <div class="flex-fill p-2 bg-success">Flex item 2</div>
     <div class="flex-fill p-2 bg-danger">Flex item 3</div>
 </div>
 </body>

4.7 等宽变换(.flex-grow-*)

使用.flex-grow-*实用程序切换弹性项目的增长能力以填充可用空间。在下面的案例中，.flex-grow-1元素使用它可以使用的所有可用空间，同时允许剩余的两个Flex项目具有必要的空间。

 <body class="container">
 <h5>增长</h5>
 <div class="d-flex bg-warning text-white mb-4">
     <div class="p-2 flex-grow-1 bg-primary">Flex item1</div>
     <div class="p-2 bg-success">Flex item 2</div>
     <div class="p-2 bg-danger">Flex item 3</div>
 </div>
 <h5>收缩</h5>
 <div class="d-flex bg-warning text-white">
     <div class="p-2 w-100 bg-primary">Flex item1</div>
     <div class="p-2 bg-success">Flex item2</div>
     <div class="p-2 w-100 bg-danger">Flex item3</div>
 </div>
 </body>

4.8 自动浮动（Auto margins）

4.8.1 水平方向浮动(.mr|.ml-auto)

以下是通过auto margin来控制flex项目的三种案例，分别是预设（无margin）、向右推两个项目(.mr-auto)、向左推两个项目(.ml-auto)。

 <body class="container">
 <h3 class="mb-4">水平方向</h3>
 <div class="d-flex bg-warning text-white mb-3">
     <div class="p-2 bg-primary">Flex item</div>
     <div class="p-2 bg-success">Flex item</div>
     <div class="p-2 bg-danger">Flex item</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3">
     <div class="mr-auto p-2 bg-primary">Flex item</div>
     <div class="p-2 bg-success">Flex item</div>
     <div class="p-2 bg-danger">Flex item</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3">
     <div class="p-2 bg-primary">Flex item</div>
     <div class="p-2 bg-success">Flex item</div>
     <div class="ml-auto p-2 bg-danger">Flex item</div>
 </div>
 </body>

4.8.2 垂直方向浮动(margin-top|bottom:auto)

结合align-items、flex-direction:column、margin-top:auto或margin-bottom:auto，可以垂直移动一个Flex子容器到顶部或底部。

 <body class="container">
 <h3 class="mb-4">垂直方向</h3>
 <div class="d-flex align-items-start flex-column bg-warning text-white mb-4" style="height: 200px;">
     <div class="mb-auto p-2 bg-primary">Flex item</div>
     <div class="p-2 bg-success">Flex item</div>
     <div class="p-2 bg-danger">Flex item</div>
 </div>
 <div class="d-flex align-items-end flex-column bg-warning text-white" style="height: 200px;">
     <div class="p-2 bg-primary">Flex item</div>
     <div class="p-2 bg-success">Flex item</div>
     <div class="mt-auto p-2 bg-danger">Flex item</div>
 </div>
 </body>

4.9 弹性布局——包裹(.flex-wrap)

改变flex项目在flex容器中的包裹方式（可以实现弹性布局），其中包括无包裹.flex-nowrap（浏览器默认）、包裹.flex-wrap，或者反向包裹.flex-wrap-reverse。

 <body class="container">
 <h3 class="mb-4">包装</h3>
 <div class="d-flex bg-warning text-white mb-4  flex-wrap-reverse" >
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
     <div class="p-2 bg-primary">Flex项目4</div>
     <div class="p-2 bg-success">Flex项目5</div>
     <div class="p-2 bg-danger">Flex项目6</div>
 </div>
 <div class="d-flex bg-warning text-white mb-4 flex-wrap">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
     <div class="p-2 bg-primary">Flex项目4</div>
     <div class="p-2 bg-success">Flex项目5</div>
     <div class="p-2 bg-danger">Flex项目6</div>
 </div>
 </body>

4.10 排列顺序(order-*)

使用一些order实用程序可以实现弹性项目的可视化排序。bootstrap仅提供将一个项目排在第一或最后，以及重置DOM顺序，由于order只能使用整数值（例如：5），因此对于任何额外值需要自定义CSS样式。

 <body class="container">
 <h3 class="mb-4">排列顺序</h3>
 <div class="d-flex bg-warning text-white">
     <div class="order-3 p-2 bg-primary">Flex项目1</div>
     <div class="order-2 p-2 bg-success">Flex项目2</div>
     <div class="order-1 p-2 bg-danger">Flex项目3</div>
 </div>
 </body>

4.11 对齐内容(align-content)

使用flexbox容器上的align-content通用样式定义，可以将flex项对齐到横轴上。可选方向有start(浏览器默认值)、end、center、between、around和stretch。

 <h5>align-content-between</h5>
 <div class="d-flex align-content-between bg-warning text-white flex-wrap" style="height: 150px;">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
     <div class="p-2 bg-primary">Flex项目4</div>
     <div class="p-2 bg-success">Flex项目5</div>
     <div class="p-2 bg-danger">Flex项目6</div>
     <div class="p-2 bg-primary">Flex项目7</div>
     <div class="p-2 bg-success">Flex项目8</div>
     <div class="p-2 bg-danger">Flex项目9</div>
     <div class="p-2 bg-primary">Flex项目10</div>
     <div class="p-2 bg-success">Flex项目11</div>
     <div class="p-2 bg-danger">Flex项目12</div>
 </div>