苹果浏览器：

Chrome(& others)：

码：

<div>
  <div>
    <div>
      <img src="img.jpg" alt="">
      <h3>Name</h3>
      <p>Description</p>
    </div>
  </div>
</div>
<style>
  .flexthis{
    display: -webkit-Box;
    display: -webkit-flex;
    display: -ms-flexBox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .flexthis .col-md-4{
    display: -webkit-Box;
    display: -webkit-flex;
    display: -ms-flexBox;
    display: flex;
  }
</style>

<div>
  <div>
    <div>
      <img src="img.jpg" alt="">
      <h3>Name</h3>
      <p>Description</p>
    </div>
  </div>
</div>
<style>
  .flexthis{
    display: -webkit-Box;
    display: -webkit-flex;
    display: -ms-flexBox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .flexthis .col-md-4{
    display: -webkit-Box;
    display: -webkit-flex;
    display: -ms-flexBox;
    display: flex;
  }
</style>

为什么要删除行？答案很简单，引导行中还有一些其他属性，如：after，before，content。所以删除行减少了这个开销，并允许flex正常工作。

它根本不支持IE10,这在不久的将来不是很好,我只是看不到任何好处超过表布局.但是,互联网仍然开始充满这种新的CSS布局方法的“崇拜者”,我看到的所有例子都可以轻松地用正常的CSS完成,没有问题.

更新25.12.15：
自从引入到现代浏览器以来,我一直在使用flexBoxes,并停止使用display：table等,因为flexBoxes更强大,易于使用.

>无论HTML源代码如何,都能够重新排序元素,同时保持正常流程中的元素 – 您可以通过使用order属性指定整数值来执行此操作.
>它比传统的浮动布局(您不需要所有的伪元素来清除目的)需要更少的打字,而且更为语义,而对于布局使用浮点数或表格显然不是.
>通过使用flex-grow和flex-shrink属性,Flex项目可以根据祖先元素的尺寸进行生长和缩小以填充水平和垂直空间的能力.

问题(正如你所指出的),支持还是不错的;事实上,Firefox仍然在实现较早版本的flexBox模块,因此您必须根据您使用的浏览器来解释语法和行为的微小差异.不过,已经说了很多,这是布局的未来,特别是复杂的网络应用程序更频繁地出现.如果您能够做出不可避免的明智投资,这是值得学习的 – 以现在不能真正使用的代价.

我还建议你看看this smashing magazine article,以便对flexBox进行友好的介绍(这是最近写的)

<footerrole="contentinfo">

            <!-- copyright -->
            <div id="Box1"https://www.jb51.cc/tag/Box/" target="_blank">Box">
                <aid="btn-donate" href="#">Donate</a>
                <aid="btn-news" href="#">Get News</a>
            </div>
            <div id="Box2"https://www.jb51.cc/tag/Box/" target="_blank">Box">
                <h2>quill Theatre</h2>
                <p>P.O. Box 7265<br>
                Richmond,VA 23221</p>
                <p>Info@quillTheatre.org<br>
                804.340.0115</p>
                <span>Social goes here</span>

            </div>
            <div id="Box3"https://www.jb51.cc/tag/Box/" target="_blank">Box">3</div>
            <!-- /copyright -->

</footer>

我的CSS如下…它有点脏了我曾经尝试过一堆东西来工作：

.footer {
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -webkit-flex-flow: row wrap;
  width: 100%;
}
.footer .Box {
  order: 1;
  min-width: 50%;
  flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  flex-shrink: 1;
  flex-basis: auto;
  -webkit-flex-shrink: 1;
  -webkit-flex-basis: auto;
}
.footer #Box2 {
  order: 0;
  min-width: 100%;
  flex: 2 2 auto;
  -webkit-flex: 2 2 auto;
  -ms-flex: 2 2 auto;
  text-align: center;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  padding-bottom: 2em;
}
.footer #Box2 h2 {
  text-transform: uppercase;
}

这适用于除Safari之外的每个浏览器 – 不会发生包装.我在这里缺少什么不允许包装？

我可能已经过多了前缀,这就是扔掉了Safari的webkit.我能够通过使用适当的flexBox规则来解决这个问题(例如,使用flex作为速记而不是声明flex-grow或flex-shrink)并使用Autoprefixer来处理供应商前缀.

如果有人能对此有所了解,我将不胜感激.

谢谢！

Webkit

是最受欢迎的浏览器引擎,由chrome safari等使用.因此,这些供应商的优惠用于告诉浏览器我们应该使用哪些css属性.