Question

我试图让div 1变大，然后div 2和3叠加在它旁边并且高度相同但是它会根据内容而变化然后将div 4,5,6放在下一行，但宽度相等为2和3。

------------------
|           |  2  |
|     1     |-----|
|           |  3  |
------------------
|  4  |  5  |  6  |
------------------

<div class="d-flex">
  <div class="hero">I'm Box 1<br>Some other text
  <br>Some other text
  <br>Some other text
  <br>Some other text</div>
  <div class="hero">Box 2</div>
  <div class="hero">Box 3</div>
  <div class="hero">Box 4</div>
  <div class="hero">Box 5</div>
  <div class="hero">Box 6</div>
</div>

CSS

html,
body {

}

body {
  font-family: 'Raleway', sans-serif;
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  color: #FFF;
}

.d-flex {
  display: flex;
  flex-wrap: wrap;
  text-align: center;    
}

.d-flex > div {
  margin: 5px;
}

.hero {
  flex: 0 0 calc(33.33% - 10px);
  padding: 30px 0;
  background: #7e58b7;
  border-radius: 3px;
}

.hero:first-child { flex-basis: calc(66.66% - 10px); }
.hero:nth-child(2),
.hero:nth-child(3) {
  flex: 1 0 0;
}
@media (max-width: 736px) {
  .hero { flex-basis: calc(50% - 10px); }
  .hero:first-child { flex-grow: 1; }
}

* {
  box-sizing: border-box;
}

我在这里也有一个小提琴https://jsfiddle.net/abennington/jqc0gkyo/4/

提前非常感谢你！

Answer 1

对于使用flexbox的这种布局，您需要润滑柔性盒，重置一些弹性值以设置初始区域以喷洒盒子。

从bootstrap 4或纯CSS（使用相同的类名），您可以交替使用行和列来放置一组框。

我添加了背景渐变和不透明度，以查看您希望喷洒盒子的9个区域。请注意，这是初始布局，一旦填充内容，高度可能会有所不同。

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column
}

.f1 {
  flex: 1.02;
}

.f2 {
  flex: 2;
}

body>.d-flex {
  margin: 10px;
  min-height: 90vh;
  /* see areas */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 33.33%, transparent 33.33%, transparent 66.66%, rgba(0, 0, 0, 0.2) 66.66%), linear-gradient(to right, rgba(0, 0, 0, 0.2) 33.33%, transparent 33.33%, transparent 66.66%, rgba(0, 0, 0, 0.2) 66.66%)
}

.d-flex>.hero {
  margin: 10px;
  /* see areas through */
  opacity: 0.8;
}

.hero {
  padding: 30px 0;
  background: #7e58b7;
  border-radius: 3px;
}

body {}

<div class="d-flex flex-column">
  <div class="d-flex f2">
    <div class="hero f2">I'm Box 1<br>Some other text
      <br>Some other text
      <br>Some other text
      <br>Some other text</div>
    <div class="d-flex flex-column f1 ">
      <div class="hero f1">Box 2</div>
      <div class="hero f1">Box 3</div>
    </div>
  </div>
  <div class="d-flex f1">
    <div class="hero f1">Box 4</div>
    <div class="hero f1">Box 5</div>
    <div class="hero f1">Box 6</div>
  </div>

pen to play with including bootstrap-4 library

Flexbox模式1/3/3列和行组合

1 个答案: