CODEWITHSUNDEEP
cssflexbox
danilo_lr
danilo_lr

Reputation: 77

Can not make flex-flow:row work

I have a page using flex do to the layout.

The plunker to it is here :

https://plnkr.co/edit/U55Jhr0p1P7wlWRGUOAu?p=preview

My question is why the yellow div is on the left of the blue div ? What I want is the yellow div on top of the blue div. As I understand the flex-flow: row; on the dialog-container should make this work.

  #flex-container {
  height:100%;
  width:100%;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

#row-top {
  background-color: red;
  flex: 0 1 100px;
  display: flex;
  flex-flow: row;
}

#row-cen {
  background-color: cyan;
  flex: 1 1 auto;
  display:flex;
}

#row-bottom {
  background-color: green;
  flex: 0 1 100px;
}

#conteudo {
  flex: auto;
  background-color: blue;
}

#col-top-left {
  background-color:white;
  flex: 0 1 100px;
}

#col-top-cen {
  background-color:#ffc0cb;
  flex: 1 1 auto;
}

#col-top-right {
  background-color:blueviolet;
  flex: 0 1 100px;
}

#dialog-container {
  background-color:black;
  width:96%;
  margin-left: 2%;
  margin-right: 2%;
  margin-top:10px;
  margin-bottom:10px;
  display:flex;
  flex-flow: row;
  flex-wrap: nowrap;
}

#dialog-content {
  background-color: yellow;
  flex: 1 1 auto;
}

#dialog-text {
  background-color: blue; 
  flex: 0 1 50px;
}
<html>

<head>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="flex-container">
        <div id="row-top">
            <div id="col-top-left">
                AAA
            </div>
            <div id="col-top-cen">
                BBB
            </div>
            <div id="col-top-right">
                CCC
            </div>
        </div>
        <div id="row-cen">
            <div id="dialog-container">
                <div id="dialog-content">
                    DCDCDC
                </div>
                <div id="dialog-text">
                    DTDTDT
                </div>
            </div>
        </div>
        <div id="row-bottom">
            DDD
        </div>
    </div>
</body>

</html>

Upvotes: 1

Views: 2611

Answers (1)

Temani Afif
Temani Afif

Reputation: 273031

Using flex-flow: row will make your divs in the same line. If you need one above the other you should instead use flex-flow: column

enter image description here

As a side note : The flex-flow property is a shorthand property for the flex-direction and the flex-wrap properties. And in your case only flex-direction is considered as flex-wrap is taking the default value.

#flex-container {
  height: 100%;
  width: 100%;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

#row-top {
  background-color: red;
  flex: 0 1 100px;
  display: flex;
  flex-flow: row;
}

#row-cen {
  background-color: cyan;
  flex: 1 1 auto;
  display: flex;
}

#row-bottom {
  background-color: green;
  flex: 0 1 100px;
}

#conteudo {
  flex: auto;
  background-color: blue;
}

#col-top-left {
  background-color: white;
  flex: 0 1 100px;
}

#col-top-cen {
  background-color: #ffc0cb;
  flex: 1 1 auto;
}

#col-top-right {
  background-color: blueviolet;
  flex: 0 1 100px;
}

#dialog-container {
  background-color: black;
  width: 96%;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-flow: column;
  flex-wrap: nowrap;
}

#dialog-content {
  background-color: yellow;
  flex: 1 1 auto;
}

#dialog-text {
  background-color: blue;
  flex: 0 1 50px;
}
<div id="flex-container">
  <div id="row-top">
    <div id="col-top-left">
      AAA
    </div>
    <div id="col-top-cen">
      BBB
    </div>
    <div id="col-top-right">
      CCC
    </div>
  </div>
  <div id="row-cen">
    <div id="dialog-container">
      <div id="dialog-content">
        DCDCDC
      </div>
      <div id="dialog-text">
        DTDTDT
      </div>
    </div>
  </div>
  <div id="row-bottom">
    DDD
  </div>
</div>

Upvotes: 2

Related Questions