使 flex 尊重引导列属性答案

【问题标题】：Make flex respect bootstrap column properties使 flex 尊重引导列属性
【发布时间】：2018-05-24 06:16:50
【问题描述】：

我使用display: flex; 是为了确保在使用class="col-md-6" 时我的单元格具有相同的高度。但是，这导致我的单元格在查看不同屏幕尺寸的内容时不会改变。那么我应该如何编写 flex 代码来保持高度并尊重 bootstrap 的列属性呢？

Here is the fiddle

【问题讨论】：

这个周末会出现 flex 有点有趣。我一直在“编码”一个 flexbox.css 文件，以使我自己的工作流程更快（在我的工作场所和外部工作中）。我已经把它上传到了github，所以我可以随时得到它，所以我想我也可以把它的链接给你：github.com/fexell/Felix-Lib/tree/master/Flexbox。希望它有所帮助。
首先，代码 sn-p 应该在问题内，其次，使用 Bootstrap 4。它基于 Flexbox，旧的 3.xx 不是。

标签： html css twitter-bootstrap twitter-bootstrap-3 flexbox

【解决方案1】：

最好放弃预制课程并自己做。 flex 属性允许您选择一个宽度，并根据容器中的空间大小为其提供缩小或增长的选项。这样，如果一列被删除，其他列将增长/缩小以填充其余空间。

当 Flexbox 变得对浏览器友好并且我没有回头时，我放弃了引导程序。它为我节省了大量时间和代码。这里有一篇文章可以进一步了解 flex 的神奇之处：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

请注意，在屏幕大于 500 像素之前，媒体查询不会让 flex 启动。这就是我做移动设备的方式，因为它只是按照自然的方式堆叠 div。您可以执行多个媒体查询来控制各种屏幕尺寸的 .col 宽度，以便为不同的设备定制外观。

请注意：stackoverflow 上的代码编辑器需要扩展，以便在您调整浏览器大小时启动媒体查询。

@media(min-width:500px){
  .flex{ display:flex; }
  .col{ flex: 1 1 16.6666667%; }
}

<div class="flex">

  <div class="col">
    <p>Column 1</p>
  </div><!-- col -->
  
    <div class="col">
      <p>Column 2</p>
    </div><!-- col -->
  
    <div class="col">
     <p>Column 3</p>
   </div><!-- col -->
  
    <div class="col">
     <p>Column 4</p>
    </div><!-- col -->
  
    <div class="col">
      <p>Column 1</p>
    </div><!-- col -->
  
    <div class="col">
      <p>Column 5</p>
    </div><!-- col -->
    
    <div class="col">
      <p>Column 6</p>
    </div><!-- col -->
    
</div><!-- flex -->

【讨论】：