浏览器之间的 flexbox 布局不一致（Chrome & Safari）
Inconsistent flexbox layout between browsers (Chrome & Safari)
我一直在组装一个块，该块将在网格中显示来自 WordPress 的最新帖子 (Twitter Bootstrap)，我决定第一次 'play' 使用 flexbox。
我正在慢慢了解它，但我发现 Chrome 和 Safari 显示的内容不同。
我是不是漏掉了什么？
HTML
<div class="col-xs-12 forcontent element-contents element-latest-posts" role="document">
<div class="content row">
<div class="latest-posts ">
<div class="row">
<article class="col-xs-12 col-md-4">
<header>
<h2 class="entry-title"><a href="/stc/holidays/uncategorized/yet-another-test-post/">Yet another test post</a></h2>
</header>
<section class="featured-image">
<a href="/stc/holidays/uncategorized/yet-another-test-post/" class="featured-image-link">
<img src="/stc/wp-content/uploads/2015/05/180H.jpg" class="attachment-post-thumbnail wp-post-image" alt="180H"> </a>
</section>
<section class="entry-summary">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non me</p> </section>
<footer>
<p class="byline author vcard"><time class="updated" datetime="2015-10-16T14:03:00+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="16th October, 2015"><i class="fa fa-clock-o"></i> Posted 23 mins ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p>
<a href="/stc/holidays/uncategorized/yet-another-test-post/" class="btn btn-default btn-block featured-image-link">
Continued </a>
</footer>
</article>
<article class="col-xs-12 col-md-4">
<header>
<h2 class="entry-title"><a href="/stc/holidays/uncategorized/another-test-post/">Another Test Post</a></h2>
</header>
<section class="featured-image">
<a href="/stc/holidays/uncategorized/another-test-post/" class="featured-image-link">
<img src="/stc/wp-content/uploads/2015/05/188H.jpg" class="attachment-post-thumbnail wp-post-image" alt="188H"> </a>
</section>
<section class="entry-summary">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </section>
<footer>
<p class="byline author vcard"><time class="updated" datetime="2015-10-16T14:02:29+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="16th October, 2015"><i class="fa fa-clock-o"></i> Posted 24 mins ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p>
<a href="/stc/holidays/uncategorized/another-test-post/" class="btn btn-default btn-block featured-image-link">
Continued </a>
</footer>
</article>
<article class="col-xs-12 col-md-4">
<header>
<h2 class="entry-title"><a href="/stc/holidays/uncategorized/a-large-post/">A large Post</a></h2>
</header>
<section class="featured-image">
<a href="/stc/holidays/uncategorized/a-large-post/" class="featured-image-link">
<img src="/stc/wp-content/uploads/2015/04/slide-3.jpg" class="attachment-post-thumbnail wp-post-image" alt="slide-3"> </a>
</section>
<section class="entry-summary">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </section>
<footer>
<p class="byline author vcard"><time class="updated" datetime="2015-05-21T13:16:54+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="21st May, 2015"><i class="fa fa-clock-o"></i> Posted 5 months ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p>
<a href="/stc/holidays/uncategorized/a-large-post/" class="btn btn-default btn-block featured-image-link">
Continued </a>
</footer>
</article>
<article class="col-xs-12 col-md-4">
<header>
<h2 class="entry-title"><a href="/stc/holidays/uncategorized/test/">test</a></h2>
</header>
<section class="featured-image">
<a href="/stc/holidays/uncategorized/test/" class="featured-image-link">
<img src="/stc/wp-content/uploads/2015/05/168H.jpg" class="attachment-post-thumbnail wp-post-image" alt="168H"> </a>
</section>
<section class="entry-summary">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </section>
<footer>
<p class="byline author vcard"><time class="updated" datetime="2015-05-21T13:14:06+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="21st May, 2015"><i class="fa fa-clock-o"></i> Posted 5 months ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p>
<a href="/stc/holidays/uncategorized/test/" class="btn btn-default btn-block featured-image-link">
Continued </a>
</footer>
</article>
<article class="col-xs-12 col-md-4">
<header>
<h2 class="entry-title"><a href="/stc/holidays/uncategorized/hello-world/">Hello world!</a></h2>
</header>
<section class="featured-image">
<a href="/stc/holidays/uncategorized/hello-world/" class="featured-image-link">
<img src="/stc/wp-content/uploads/2015/04/slide-6.jpg" class="attachment-post-thumbnail wp-post-image" alt="slide-6"> </a>
</section>
<section class="entry-summary">
<p>Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit ali</p> </section>
<footer>
<p class="byline author vcard"><time class="updated" datetime="2015-03-19T14:48:48+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="19th March, 2015"><i class="fa fa-clock-o"></i> Posted 7 months ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p>
<a href="/stc/holidays/uncategorized/hello-world/" class="btn btn-default btn-block featured-image-link">
Continued </a>
</footer>
</article>
</div>
少
.element-latest-posts {
.latest-posts .row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
article {
flex: 0 auto;
// flex: 1 auto;
margin-bottom: 15px;
&:first-of-type {
flex: 1 auto;
}
&:last-of-type {
flex: 0 auto;
}
display: flex;
flex-flow: column;
justify-content: flex-start;
section {
flex: 1 auto;
&.featured-image {
// display: none;
a {
display: block;
&:hover {
transform: scale(0.8);
outline-width: 0 !important;
}
img { max-width: 100%; }
}
}
&.entry-summary {
display: flex;
flex-flow: column;
justify-content: center;
&.no-featured-image {}
span {
flex: 1 auto;
}
}
}
footer {
a {
&.btn {
&:hover { border-color: transparent; }
}
}
}
}
}
屏幕截图
知道这是为什么吗？
谢谢
我注意到您没有将外部列 (bootstrap col) 包装在 div 和 class=row 中。我很确定在使用 bootstrap.
时你应该总是让行换行
首先，你的Bootstrap做错了。你不应该在一行中有一行而中间没有一列。而且你永远不应该有没有一行的列。您也不应该在每个断点处添加总计超过 12 的列。
这是错误的：
<div class="row">
<div class="row"></div>
</div>
这也是错误的：
<div class="col-xs-8">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
<div class="col-xs-4"></div>
为了保持 Bootstrap 正常工作，唯一可以作为行子项的 是列，并且列的直接父级必须成为一排。这是因为列是浮动的，行清除浮动。
这是正确的：
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
</div>
<div class="col-xs-4"></div>
</div>
</div>
其次，您不需要在此处指定col-xs-12：<article class="col-xs-12 col-md-4">。 col-xs-12 所做的只是说 "width: 100%"，它已经通过作为块级元素应用。
第三，您应该使用 container 或 container-fluid 将左右填充添加到边缘（而不是 col-xs-12）。
第四，::before 和 ::after（该行的 clearfix 的一部分）算作该行的子项。这意味着如果你在行上使用 display: flex，它也会将 flexbox 应用于 ::before 和 ::after 伪元素。
最后，Safari 仍然需要供应商前缀。
这是在 Safari 中工作的更新笔：http://codepen.io/anon/pen/rOYxNG（请注意 "Autoprefixer" 在 CSS 选项中选中）
我一直在组装一个块，该块将在网格中显示来自 WordPress 的最新帖子 (Twitter Bootstrap)，我决定第一次 'play' 使用 flexbox。
我正在慢慢了解它，但我发现 Chrome 和 Safari 显示的内容不同。
我是不是漏掉了什么？
HTML
<div class="col-xs-12 forcontent element-contents element-latest-posts" role="document">
<div class="content row">
<div class="latest-posts ">
<div class="row">
<article class="col-xs-12 col-md-4">
<header>
<h2 class="entry-title"><a href="/stc/holidays/uncategorized/yet-another-test-post/">Yet another test post</a></h2>
</header>
<section class="featured-image">
<a href="/stc/holidays/uncategorized/yet-another-test-post/" class="featured-image-link">
<img src="/stc/wp-content/uploads/2015/05/180H.jpg" class="attachment-post-thumbnail wp-post-image" alt="180H"> </a>
</section>
<section class="entry-summary">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non me</p> </section>
<footer>
<p class="byline author vcard"><time class="updated" datetime="2015-10-16T14:03:00+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="16th October, 2015"><i class="fa fa-clock-o"></i> Posted 23 mins ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p>
<a href="/stc/holidays/uncategorized/yet-another-test-post/" class="btn btn-default btn-block featured-image-link">
Continued </a>
</footer>
</article>
<article class="col-xs-12 col-md-4">
<header>
<h2 class="entry-title"><a href="/stc/holidays/uncategorized/another-test-post/">Another Test Post</a></h2>
</header>
<section class="featured-image">
<a href="/stc/holidays/uncategorized/another-test-post/" class="featured-image-link">
<img src="/stc/wp-content/uploads/2015/05/188H.jpg" class="attachment-post-thumbnail wp-post-image" alt="188H"> </a>
</section>
<section class="entry-summary">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </section>
<footer>
<p class="byline author vcard"><time class="updated" datetime="2015-10-16T14:02:29+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="16th October, 2015"><i class="fa fa-clock-o"></i> Posted 24 mins ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p>
<a href="/stc/holidays/uncategorized/another-test-post/" class="btn btn-default btn-block featured-image-link">
Continued </a>
</footer>
</article>
<article class="col-xs-12 col-md-4">
<header>
<h2 class="entry-title"><a href="/stc/holidays/uncategorized/a-large-post/">A large Post</a></h2>
</header>
<section class="featured-image">
<a href="/stc/holidays/uncategorized/a-large-post/" class="featured-image-link">
<img src="/stc/wp-content/uploads/2015/04/slide-3.jpg" class="attachment-post-thumbnail wp-post-image" alt="slide-3"> </a>
</section>
<section class="entry-summary">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </section>
<footer>
<p class="byline author vcard"><time class="updated" datetime="2015-05-21T13:16:54+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="21st May, 2015"><i class="fa fa-clock-o"></i> Posted 5 months ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p>
<a href="/stc/holidays/uncategorized/a-large-post/" class="btn btn-default btn-block featured-image-link">
Continued </a>
</footer>
</article>
<article class="col-xs-12 col-md-4">
<header>
<h2 class="entry-title"><a href="/stc/holidays/uncategorized/test/">test</a></h2>
</header>
<section class="featured-image">
<a href="/stc/holidays/uncategorized/test/" class="featured-image-link">
<img src="/stc/wp-content/uploads/2015/05/168H.jpg" class="attachment-post-thumbnail wp-post-image" alt="168H"> </a>
</section>
<section class="entry-summary">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </section>
<footer>
<p class="byline author vcard"><time class="updated" datetime="2015-05-21T13:14:06+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="21st May, 2015"><i class="fa fa-clock-o"></i> Posted 5 months ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p>
<a href="/stc/holidays/uncategorized/test/" class="btn btn-default btn-block featured-image-link">
Continued </a>
</footer>
</article>
<article class="col-xs-12 col-md-4">
<header>
<h2 class="entry-title"><a href="/stc/holidays/uncategorized/hello-world/">Hello world!</a></h2>
</header>
<section class="featured-image">
<a href="/stc/holidays/uncategorized/hello-world/" class="featured-image-link">
<img src="/stc/wp-content/uploads/2015/04/slide-6.jpg" class="attachment-post-thumbnail wp-post-image" alt="slide-6"> </a>
</section>
<section class="entry-summary">
<p>Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit ali</p> </section>
<footer>
<p class="byline author vcard"><time class="updated" datetime="2015-03-19T14:48:48+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="19th March, 2015"><i class="fa fa-clock-o"></i> Posted 7 months ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p>
<a href="/stc/holidays/uncategorized/hello-world/" class="btn btn-default btn-block featured-image-link">
Continued </a>
</footer>
</article>
</div>
少
.element-latest-posts {
.latest-posts .row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
article {
flex: 0 auto;
// flex: 1 auto;
margin-bottom: 15px;
&:first-of-type {
flex: 1 auto;
}
&:last-of-type {
flex: 0 auto;
}
display: flex;
flex-flow: column;
justify-content: flex-start;
section {
flex: 1 auto;
&.featured-image {
// display: none;
a {
display: block;
&:hover {
transform: scale(0.8);
outline-width: 0 !important;
}
img { max-width: 100%; }
}
}
&.entry-summary {
display: flex;
flex-flow: column;
justify-content: center;
&.no-featured-image {}
span {
flex: 1 auto;
}
}
}
footer {
a {
&.btn {
&:hover { border-color: transparent; }
}
}
}
}
}
屏幕截图
知道这是为什么吗？
谢谢
我注意到您没有将外部列 (bootstrap col) 包装在 div 和 class=row 中。我很确定在使用 bootstrap.
时你应该总是让行换行首先，你的Bootstrap做错了。你不应该在一行中有一行而中间没有一列。而且你永远不应该有没有一行的列。您也不应该在每个断点处添加总计超过 12 的列。
这是错误的：
<div class="row">
<div class="row"></div>
</div>
这也是错误的：
<div class="col-xs-8">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
<div class="col-xs-4"></div>
为了保持 Bootstrap 正常工作，唯一可以作为行子项的 是列，并且列的直接父级必须成为一排。这是因为列是浮动的，行清除浮动。
这是正确的：
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
</div>
<div class="col-xs-4"></div>
</div>
</div>
其次，您不需要在此处指定col-xs-12：<article class="col-xs-12 col-md-4">。 col-xs-12 所做的只是说 "width: 100%"，它已经通过作为块级元素应用。
第三，您应该使用 container 或 container-fluid 将左右填充添加到边缘（而不是 col-xs-12）。
第四，::before 和 ::after（该行的 clearfix 的一部分）算作该行的子项。这意味着如果你在行上使用 display: flex，它也会将 flexbox 应用于 ::before 和 ::after 伪元素。
最后，Safari 仍然需要供应商前缀。
这是在 Safari 中工作的更新笔：http://codepen.io/anon/pen/rOYxNG（请注意 "Autoprefixer" 在 CSS 选项中选中）