html - 将 div 内容显示为行，而父级显示为列

Question

我现在正在研究一个问题几个小时(不是那么有经验 :D)，现在我已经很接近了，但还有最后一件事不起作用:

我有多个 div，它们的方向各不相同。内部 parent div 有 flex-direction: column; 和 child 有 flex-direction: row; 但它没有内联显示。

JSFiddle 链接:Live Demo

---

HTML

<div class="flexcon_game">
  <div class="flexcon_game_left">
    Left
  </div>
  <div class="flexcon_game_center">
    <div class="flexcon_game_center_top">
       center_top
    </div>
  <div class="flexcon_game_center_mid">
    <p> (-- </p>
    <p> -:- </p>
    <p> --) </p>
  </div>
  <div class="flexcon_game_center_bottom">
    center_bottom
  </div>
</div>
<div class="flexcon_game_right">
   right
</div>

CSS

.flexcon_game{
   width: 80%;
   margin: auto;
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-around;
   align-items: center;
 }
.flexcon_game_left{
   background-color: red;
 }
.flexcon_game_right{
    background-color: green;
 }
.flexcon_game_center{
    flex-direction: column;
    justify-content: space-around;
    background-color: orange;
 }
 .flexcon_game_center_mid{
     flex-flow: row nowrap;
 }

Answer 1

段落是 block 级元素。将 flex 方向设置为 row 不会改变这一点。您必须在您的 CSS 中明确地使它们内联:

.flexcon_game{
   width: 80%;
   margin: auto;
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-around;
   align-items: center;
 }
.flexcon_game_left{
   background-color: red;
 }
.flexcon_game_right{
    background-color: green;
 }
.flexcon_game_center{
    flex-direction: column;
    justify-content: space-around;
    background-color: orange;
 }
 .flexcon_game_center_mid{
     flex-flow: row nowrap;
 }
 
 .flexcon_game_center_mid p{
 	display: inline;
}

<div class="flexcon_game">
  <div class="flexcon_game_left">
    Left
  </div>
  <div class="flexcon_game_center">
    <div class="flexcon_game_center_top">
       center_top
    </div>
  <div class="flexcon_game_center_mid">
    <p> (-- </p>
    <p> -:- </p>
    <p> --) </p>
  </div>
  <div class="flexcon_game_center_bottom">
    center_bottom
  </div>
</div>
<div class="flexcon_game_right">
   right
</div>