css - 无法制作 flex-flow :row work

我有一个使用 flex 做布局的页面。

它的 plunker 在这里 :

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

我的问题是为什么黄色 div 在蓝色 div 的左边？我想要的是蓝色 div 之上的黄色 div。据我了解 flex-flow: row;在对话框容器上应该可以完成这项工作。

  #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>

最佳答案

使用 flex-flow: row 将使您的 div 在同一行。如果你需要一个高于另一个，你应该使用 flex-flow: column

作为旁注:flex-flow property 是 flex-direction 和 flex-wrap 属性的简写属性。仅在您的情况下 flex-direction被视为 flex-wrap正在采用默认值。

#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>

关于css - 无法制作 flex-flow :row work，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47750671/

css - 无法制作 flex-flow :row work

上一篇：css - 粘性菜单 wordpress

下一篇：css - 如何使用 bootstrap 4 数据表更改 Angular 4 中的背景、行、行选择和标题的颜色