将 div 内容显示为行，而父项显示为列答案

【问题标题】：Display a div content as row while parent is displayed as column将 div 内容显示为行，而父项显示为列
【发布时间】：2016-05-10 04:13:13
【问题描述】：

我现在正在解决一个问题几个小时（不是那么有经验：D），现在我已经很接近了，但是最后一件事不起作用：

我有多个 div，它们彼此具有不同的方向。一个内部 父 div 有 flex-direction: column; 并且 child 有 flex-direction: row; 但它的没有内联显示。 p>

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

【问题讨论】：

我认为您的原始问题标题更好。它更具体地说明了您想要做什么。
好的。谢谢 - 它的工作;）我又高兴了

标签： html css flexbox

【解决方案1】：

段落是块级元素。将 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>

【讨论】：