了解 Flexbox 如何与 Bootstrap 配合使用

Posted 2023-03-06

【中文标题】了解 Flexbox 如何与 Bootstrap 配合使用

【英文标题】：Understanding how Flexbox works with Bootstrap

【发布时间】：2017-02-04 07:41:18

【问题描述】：

我有以下 html 和 CSS 布局：

html 
  position: relative;
  min-height: 100%;

body 
  /* Margin bottom by footer height */
  margin-bottom: 100px;

.col-md-6 
  display: flex;
  justify-content: center;

.container_flex 
  display: flex;
  align-items: center;
  justify-content: center;
  /* vh refers to viewport height. Very useful! */
  height: 100vh;
  width: 100%;

<div class="container-fluid">
  <div class="container_flex">
    <div class="row">
      <div class="col-md-6 col-xs-12" style="border:solid">
        <h1>Column 1</h1>
      </div>
      <div class="col-md-6 col-xs-12" style="border:solid">
        <h1>Column 2</h1>
      </div>
    </div>
  </div>
</div>

提供以下结果：

Bootply

我使用 Flexbox 的目的是在容器流体中垂直居中“行”的内容。但是，这会导致列在桌面模式下采用压缩外观。在移动视图中，列会按预期堆叠。如果有人能解释为什么会出现这种压缩/粗短的外观，我将不胜感激？

相反，如果我删除行类，则不再出现如图所示的这种粗短的压缩外观：

Bootply

但是，在移动视图中，列不再堆叠。有什么办法可以改正吗？

如果有人对如何有效地使用带有 Bootstrap 的 FlexBox 以比我在这里尝试的更有效的方式垂直和水平居中有任何提示/指针，我将非常感激。

【参考方案1】：

当您删除行元素时，.col 元素将成为您的弹性项目。为了让弹性项目包装在弹性容器中，您需要使用flex-wrap 属性。但是，我不认为删除行元素并使用 flex-wrap 是您真正想要的。

关于你的问题。在您的第一个示例中它看起来很短的原因是因为您将 row 元素设为您的“弹性项目”。然后行项目的宽度会根据其内容调整大小，因为您尚未设置控制其大小的 flex 属性。正确设置 flex 属性后，您将看到所需的结果：

.container_flex         
    display: flex;       
    align-items: center;
    justify-content:center; 
    
    /* vh refers to viewport height. Very useful! */ 
    height: 100vh;
    width: 100%;       	


.row 
    flex: 1;

<div class="container-fluid">
  <div class="container_flex">
    <!-- Note that if using Flexbox, then do not need to wrap col- in row class but then does not stack columns on mobile... use @media? -->	
    <div class="row">
      <div class="col-md-6 col-xs-12" style="border:solid">
        <h1>Column 1</h1>
      </div>
      <div class="col-md-6 col-xs-12" style="border:solid">
        <h1>Column 2</h1>
      </div>
    </div>
  </div>
</div>

这里简要解释一下原因：flex:1 是一个快捷方式属性，它将三个单独的 flex-item 属性设置为：

flex-grow: 1;

如果 flex-item 的大小小于 flex 容器内的可用空间，则将其设置为大于 0 的值会使项目拉伸以填充可用空间。如果同一个容器中有多个弹性项目，它们会按其flex-grow 属性值的比例增长以共享可用空间。

flex-shrink: 1;

如果 flex-item 的大小大于 flex 容器内的可用空间，则将其设置为大于 0 的值会使项目缩小以适应可用空间。如果同一个容器中有多个弹性项目，它们将按其flex-shrink 属性值的比例缩小以共享可用空间。

flex-basis: 0%;

定义元素在“弯曲”之前的起始尺寸。

有关使用 flex-box 的一般信息，请查看 this article 以及 Chris Coyier 的 css 技巧；他很好地解释了 flex-box 的工作原理。

如果您正在寻找有关同时使用 bootstrap 和 flex-box 的信息，我建议您也阅读this article！

我希望这会有所帮助。

【参考方案2】：

您需要将flex:1 提供给.row，它是flex-grow、flex-shrink 和flex-basis 组合的简写。默认为0 1 auto，使用flex:1表示为1 1 0

html 
  position: relative;
  min-height: 100%;

body 
  /* Margin bottom by footer height */
  margin-bottom: 100px;

.row 
  flex: 1

.col-md-6 
  display: flex;
  justify-content: center;

.container_flex 
  display: flex;
  align-items: center;
  justify-content: center;
  /* vh refers to viewport height. Very useful! */
  height: 100vh;
  width: 100%;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="container_flex">
    <div class="row">
      <div class="col-md-6 col-xs-12" style="border:solid">
        <h1>Column 1</h1>
      </div>
      <div class="col-md-6 col-xs-12" style="border:solid">
        <h1>Column 2</h1>
      </div>
    </div>
  </div>
</div>

【参考方案3】：

您也可以使用 bootsrap 中的 flex 内置库（它也将是响应式的）：

http://v4-alpha.getbootstrap.com/layout/flexbox-grid/#responsive-flexbox

.col-md-6.col-xs-12border:solid/* CSS neede cause border are not set by default in bootsrap :) */

<link href="http://v4-alpha.getbootstrap.com/assets/css/docs-flexbox.min.css" rel="stylesheet"/>
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <p>To see cols side by side, run snippet in full page mode and reduce it down to average 720px width to see col stacking </p>
  <div class="row">
    <div class="col-md-6 col-xs-12" >
     col 1 
    </div>
    <div class="col-md-6 col-xs-12" >
     col 2
    </div>
  </div>
</div>