Question

我是尝试使用flexbox的新手。我将它与bootstrap结合起来也有一般流体网格。问题是每当我在行上放置flexwrap时，列会移动到下一行，即使％等于100％或接近取决于您使用的网格。 html：

<section class="row">
  <article class="block col-lg-6 img btm-right-title">
    <div class="content">
      <h1>Hello</h1><img src="assets/images/prod-grid-sq-mbrace.jpg" alt="Verizon Vehicle delivers next generation pinpoint roadside assistance, mechanics hotline, vehicle diagnostics">
    </div>
  </article>
  <article class="block col-lg-6 img btm-left-title">
    <div class="content">
      <h1>Goodbye</h1><img src="assets/images/prod-grid-wide-vv.jpg" alt="Verizon Vehicle delivers next generation pinpoint roadside assistance, mechanics hotline, vehicle diagnostics">
    </div>
  </article>
  <article class="block col-lg-4 title top-right-title">
    <div class="content">
      <h1>Title Block 1</h1>
    </div>
  </article>
  <article class="block col-lg-4 title top-left-title position-1">
    <div class="content">
      <h1>Title Block 2</h1>
    </div>
  </article>
  <article class="block col-lg-4 title center-title">
    <div class="content">
      <h1>Title Block 3</h1>
    </div>
  </article>
</section>

我故意将这些放在一行，因为POC需要根据屏幕大小重新排列每个块，所以我将使用flexbox来实现这一目标。

CSS：

*, html {
    margin: 0;
    padding: 0;
    line-height: .9em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.row {
    display: flex;
    max-width: 960px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.block {
    display: flex;
    position: relative;
    margin-bottom: 30px;
    order: 1;
}

.block .content {
    padding: 15px;
    display: flex;
    flex: 1 100%;
    flex-flow: row wrap;
    min-height: 300px;
}

.block .content h1 {
    margin: 0;
}

.block.title .content {
    background: red;
}

.block.btm-right-title .content {
    align-items: flex-end;
    justify-content: flex-end;
}

.block.btm-left-title .content {
    align-items: flex-end;
    justify-content: flex-start;
}

.block.top-left-title .content {
    align-items: flex-start;
    justify-content: flex-start;
}

.block.top-right-title .content {
    align-items: flex-start;
    justify-content: flex-end;
}

.block.center-title .content {
    align-items: center;
    justify-content: center;
}

.block.img h1 {
    color: #fff;
}

.block.title h1 {
    color: #fff;
    font-style: italic;
}

.img img {  
    width: 0;
    height: 0;
    opacity: 0;
}

.block.img .content {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

我正在使用jquery将内容块中的图像设置为背景图像以允许背景大小的封面，但仍然保持图像提供的SEO方面。这只是一个POC，我只是测试所以它可能有点草率。

两个col-lg-6应该是并排的，3 col-lg-4也应该是并排的，而是我得到的：

Answer 1

找出原因。 Bootstrap将某些项标记为显示表，这会导致与flexbox冲突。我用行类包装所有东西。 Bootstrap有这个css：

{{1}}

进行此显示：初始重置并使所有内容按预期工作。

flexbox + bootstrap导致列转到下一行

1 个答案: