Question

我有以下HTML和CSS布局：

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

其中提供了以下结果：

Bootply

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

相反，如果删除行类，则不再显示此粗短压缩外观，如下所示：

Bootply

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

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

Answer 1

删除行元素后，.col元素将成为您的flex项。要使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; 如果弹性项目的大小大于弹性容器中的可用空间，则将此值设置为大于0的值会使项目缩小以适应可用的大小空间。如果同一容器中有多个flex项，它们将缩小以与flex-shrink属性的值成比例共享可用空间。
flex-basis: 0%; 在“弯曲”之前定义元素的起始大小。

关于使用flex-box的一般信息，请查看Chris Coyier撰写的this article css技巧;他很好地解释了柔性盒的工作原理。

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

我希望这会有所帮助。

Answer 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>

Answer 3

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

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

.col-md-6.col-xs-12{border: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>

了解Flexbox如何与Bootstrap配合使用

3 个答案: