Flexbox中的Flexbox-是否可以？

Question

我正在嘗試實現以下布局：

+---------+---------------------+
|legend   |                     |
+---------+                     |
|csv_input|        map          |
|         |                     |
|         |                     |
|         |                     |
+---------+---------------------+

+---------+-------+
|legend   |       |
+---------+  map  |
|csv_input|       |
|         |       |
+---------+-------+

https://jsfiddle.net/zwjm16p3/1/

使用此HTML和CSS：

 *, *:before, *:after { box-sizing: border-box; } html, body, div#wrapper, div#map { height: 100%; } body { padding: 0; margin: 0; display: flex; min-height: 100vh; flex-direction: column; } #wrapper { display: flex; flex: 1; background: #fef; } #map { flex: 1; background: #ffe; } #sidebar { order: -1; flex: 0 0 20em; height: 100%; background: #eff; } #sidebar_wrapper { height: 100%; width: 100%; background: #eef; display: flex; min-height: 100vh; flex-direction: row; } #legend { width: 100%; background: #efe; flex: 2em 0 0 0; } #csv_input { width: 100%; background: #eef; flex: 1; } 

 <div id="wrapper"> <div id="map"></div> <div id="sidebar"> <div id="sidebar_wrapper"> <div id="legend"> Paste CSV data below. </div> <textarea id="csv_input"></textarea> </div> </div> </div> 

我看到的是：

+----+----+---------------------+
|lege|csv_|                     |
|    |    |                     |
|    |    |        map          |
|    |    |                     |
|    |    |                     |
|    |    |                     |
+----+----+---------------------+

我有兩個問題：

1. 為什么是flex-direction: row; 被忽略了？
2. 我需要#sidebar_wrapper div，還是一個div既可以是一個flexbox中的子對象又可以是另一個flexbox的容器？

Answer 1

您必須使用flex-direction:row將整個div包裹在一個flex框中，使用flex-direction : column將內部的兩個div包裹起來

#wrapper{
 display:flex;
 flex-direction:row;
}
#sidebar{
 display:flex;
 flex-direction: column;
}

這是您的問題的工作演示