RoetzerBub RoetzerBub - 6 months ago 12
HTML Question

Display a div content as row while parent is displayed as column

I'm now working on a problem for a few hours (not that experienced :D) and right now I'm pretty close, but theres a last thing not working:

I have multiple divs with different orientations in each other. An inner parent div has flex-direction: column; and the child has flex-direction: row; but its not shown inline.

JSFiddle Link: 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

Paragraphs are block level elements. Setting the flex direction to row doesn't change that. You have to explicitly make them inline in your 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>