尝试使用css flexbox创建视图，组合行和列

Question

我正在尝试使用css flex创建下图所示的布局，我在那里的一部分，但需要帮助右边的3个框和底部的框，任何人都可以帮忙吗？

需要布局视图：

这是我得到了多远：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

Stack snippet

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相匹配，ft-container本身需要匹配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; }和箭头以避免换行。

Updated fiddle

Stack snippet

<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>

library ieee;
use ieee.std_logic_1164.all;

entity Metastability is 
port ( clk : in std_logic;
       key : in std_logic;
       reset : in std_logic;
       Led : out  std_logic
);

end Metastability   ;  

architecture rtl of Metastability is 
    signal metastable : std_logic;
    signal stabel : std_logic;
begin 
    process(clk,reset)
    begin 
        if (reset ='1') then 
            metastable <= '0';
            stabel <= metastable;
            Led <= stabel;
        else if rising_edge(clk) then 

            metastable <= key;
            stabel <= metastable;
            Led <= stabel;
        end if;
        end if;
    end process;
end rtl;