标签归档:Bootstrap

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>