html - 尝试使用 css flexbox 创建 View ，结合行和列

Question

我正在尝试使用 css flex 创建下图中所示的布局，我已经完成了，但需要帮助处理右侧的 3 个框和底部的框，有人可以帮忙吗？

需要布局 View :

这是我得到的结果:my attempt on the view on jsfiddle

.game-heading{background: #a3a3a3;}
header{
  display: flex;
}
article{
  display: flex;
}
.scores {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    line-height: 1;
}
.period {
    background: #c29d31;
    padding: 5px 10px;
    text-align: center;
}

.results{
  display: flex;
  flex-direction: column;
}
.score-nr {
    background: #9E8231;
    flex: 1;
    line-height: 10px;
    padding: 6px;
}
.competitors{
    color: #2d2929;
    flex-direction: row;
    align-items: flex-start;
    float: left;
    flex-grow: 0;
}

.fa {
    align-self: center;
    padding: 10px;
}
.venue-content{
  background: #a3a3a3;
  width: 100%
}

h4{
  display: inline-flex;
}
.competitor-name {
  padding: 4px;
}
ul li{
  padding: 5px 10px;
  border: 1px solid #808080;
}

Answer 1

这是一个开始，我将 ft-container 移到 header 中，定位在 venue-content 之前。

然后，通过将 ul 拆分为 2 个 ul，您可以轻松地将它们并排排列，添加 display: flex 到 ft-container。

Updated fiddle

堆栈片段

body {
  font-size: 12px;
}

.game-heading {
  background: #a3a3a3;
}

header {
  display: flex;
}

article {
  display: flex;
}

.scores {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  line-height: 1;
}

.period {
  background: #c29d31;
  padding: 5px 10px;
  text-align: center;
}

.results {
  display: flex;
  flex-direction: column;
}

.score-nr {
  background: #9E8231;
  flex: 1;
  line-height: 10px;
  padding: 6px;
}

.competitors {
  color: #2d2929;
  flex-direction: row;
  align-items: flex-start;
  float: left;
  flex-grow: 1;
}

.fa {
  align-self: center;
  padding: 10px;
}

.venue-content {
  background: #a3a3a3;
  width: 100%
}

h4 {
  display: inline-flex;
}

.competitor-name {
  padding: 4px;
}

/*  styles below have been changed/added  */

ul li {
  padding: 5px 10px;
}
ul {
  border: 1px solid #808080;
}

.ft-container {
  display: flex;
}
.ft-container ul:last-child {
  display: flex;
  align-items: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<section class="container-one-row two">
  <h3 class="game-heading">game type </h3>
  <article class="game-content">
    <header class="event-title">
      <div class="scores">
        <span class="period">Time</span>
        <div class="results">
          <span class="score-nr">5122</span>
          <span class="score-nr">8213</span>
        </div>
        <div class="competitors">
          <h3 class="competitor-name">jimmy1234</h3>
          <h3 class="competitor-name">player98763</h3>
        </div>
        <i class="fa fa-arrow-right"></i>

        <section class="ft-container">
          <ul>
            <li>222
            </li>
            <li>543
            </li>
          </ul>
          <ul>
            <li>mid
            </li>
          </ul>
        </section>

        <div class="venue-content">
          <h4>Neutral</h4>
          <i class=" fa fa-gamepad"></i>
        </div>
      </div>
    </header>
  </article>
</section>

---

根据评论更新，无法移动 ft-container 的标记

然后你需要使用绝对定位，将 ft-container 定位在右侧，并将其高度与 competitors 匹配，而 competitors 本身需要匹配ft-container 和 arrow 以避免换行。

Updated fiddle

堆栈片段

body {
  font-size: 12px;
}

.game-heading {
  background: #a3a3a3;
}

header {
  display: flex;
  flex: 1;
}

article {
  position: relative;
  display: flex;
}

.scores {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  line-height: 1;
}

.period {
  background: #c29d31;
  padding: 5px 10px;
  text-align: center;
}

.results {
  display: flex;
  flex-direction: column;
}

.score-nr {
  background: #9E8231;
  flex: 1;
  line-height: 10px;
  padding: 6px;
}

.competitors {
  color: #2d2929;
  flex-direction: row;
  align-items: flex-start;
  width: calc(100% - 200px);
}

.fa {
  align-self: center;
  padding: 10px;
}

.venue-content {
  background: #a3a3a3;
  width: 100%;
}

h4 {
  display: inline-flex;
}

.competitor-name {
  padding: 4px;
}

ul li {
  padding: 5px 10px;
}

ul {
  border: 1px solid #808080;
}

.ft-container {
  position: absolute;
  right: 0;
  top: 0;
  height: 44px;
  display: flex;
}

.ft-container ul:last-child {
  display: flex;
  align-items: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<section class="container-one-row two">
  <h3 class="game-heading">game type </h3>
  <article class="game-content">
    <header class="event-title">
      <div class="scores">
        <span class="period">Time</span>
        <div class="results">
          <span class="score-nr">5122</span>
          <span class="score-nr">8213</span>
        </div>
        <div class="competitors">
          <h3 class="competitor-name">jimmy1234</h3>
          <h3 class="competitor-name">player98763</h3>
        </div>
        <i class="fa fa-arrow-right"></i>

        <div class="venue-content">
          <h4>Neutral</h4>
          <i class=" fa fa-gamepad"></i>
        </div>
      </div>
    </header>
    <section class="ft-container">
      <ul>
        <li>222
        </li>
        <li>543
        </li>
      </ul>
      <ul>
        <li>mid
        </li>
      </ul>
    </section>
  </article>
</section>