CODEWITHSUNDEEP
htmlcssflexbox
RoetzerBub
RoetzerBub

Reputation: 35

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

Upvotes: 0

Views: 83

Answers (1)

BSMP
BSMP

Reputation: 4807

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>

Upvotes: 2

Related Questions