css - grow - 在網格中定位Flex項目而不包裝它們



inline-flex (1)

這個問題在這裡已經有了答案:

我有以下使用flexbox的佈局:

我想要右邊有2的div,而TeamScorers應該組成左邊的空格。

所需佈局:

如果使用表格,它與2的行距是2的想法是一樣的。

有沒有辦法將TeamScorers定位在2的左邊而沒有將他們包裝在他們自己的div中? 如果是這樣,是否值得麻煩?

這是我的CSS到目前為止:

.container {
  max-width: 600px;
}

.team {
  background-color: chartreuse;
}

.score {
  background-color: brown;
}

.scorers {
  background-color: steelblue;
}

.cards-desktop {
  background-color: goldenrod;
}

.carded-players {
  background-color: darkorange;
}

.left-col {
  display: flex;
  flex-flow: row wrap;
}
.left-col > * {
  flex: 1 100%;
}

.team {
  order: 1;
}

.score {
  order: 3;
}

.scorers {
  order: 2;
}

.cards-desktop {
  order: 4;
}

.carded-players {
  order: 5;
}

.team {
  flex: 1 auto;
}

.score {
  flex: 0 150px;
  font-size: 60px;
}

佈局在其他斷點上會有所不同,所以我想要有一個不會被重複或模仿其他斷點的HTML塊。 這就是為什麼我不想將這兩個div封裝在一個容器中,因為在其他斷點的佈局上是沒有必要的。

Codepen鏈接

https://code.i-harness.com


這裡..

用自己的div將1,2和3自動換行display:flex / flex-direction:column / flex-wrap:wrap

然後在各個組件上設置適合的寬度。

不幸的是,我認為Chrome需要一個固定的高度來強制包裝(這是我認為的一個錯誤)...並且你有。

* {
  box-sizing: border-box;
}
.team {
  background: chartreuse;
}
.score {
  background: brown;
}
.scorers {
  background: steelblue;
}
.cards-desktop {
  background: goldenrod;
}
.carded-players {
  background: darkorange;
}
.wrap {
  width: 80%;
  margin: auto;
  display: flex;
  flex-direction: column;
}
.top > div {
  padding: 5px;
}
.bottom > div {
  height: 25px;
}
.top {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 150px;
}
.team,
.scorers {
  height: 50%;
  width: 75%;
}
.score {
  width: 25%;
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
<div class="wrap">
  <div class="top">
    <div class="team">Team</div>
    <div class="scorers">Scorers</div>
    <div class="score">
      <h1>2</h1>
    </div>
  </div>
  <div class="bottom">
    <div class="cards-desktop">cards-desktop</div>
    <div class="carded-players">carded-players</div>
  </div>
</div>





flexbox