了解Flexbox如何与Bootstrap配合使用

Question

我有以下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

但是,在移动视图中,列不再堆叠.有什么方法可以纠正这个吗？

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

Answer 1

删除行元素时,.col元素将成为flex-items.要使flex-items包装在flex容器中,您需要使用该flex-wrap属性.但是,我不认为删除行元素和使用flex-wrap是你真正想要的.

关于你的问题.它在你的第一个例子中看起来粗短的原因是因为你将row元素作为'flex-item'.然后行项的宽度会调整其内容的大小,因为您尚未设置控制其大小的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-grow: 1;如果flex-item的大小小于flex容器中的可用空间,则将其设置为大于0的值会使项目伸展以填充可用空间.如果同一容器中有多个flex项,则它们会增长以与其flex-grow属性值成比例共享可用空间.
• flex-shrink: 1;如果flex-item的大小大于flex容器中的可用空间,则将其设置为大于0的值会使项目缩小以适合可用空间.如果同一容器中有多个flex项,它们将缩小以与其flex-shrink属性值成比例共享可用空间.
• flex-basis: 0%; 在"弯曲"之前定义元素的起始大小.

有关使用flex-box的一般信息,请参阅Chris Coyier 撰写的关于css技巧的文章.他很好地解释了柔性盒的工作原理.

如果您正在寻找有关使用bootstrap和flex-box的信息,我也建议您阅读本文!

我希望这有帮助.