Flexbox内的Flexbox - 有可能吗？

-1

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

我有两个问题：

为什么flex-direction: row;被忽略？
我需要#sidebar_wrapper股利，或者div可以是一个flexbox中的孩子和另一个flexbox中的孩子吗？

来源

2016-05-27 fadedbee

您可能需要设置' flex-direction：column;'到'＃sidebar_wrapper'以获得所需的布局。小提琴：https：//jsfiddle.net/zwjm16p3/2/ –

您有flex-direction : column

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

这里flex-direction:row和内部的两个div的包裹整个div的在一个柔性盒是你的问题的工作Demo

来源

2016-05-27 05:09:13

谢谢修复flexbox的方向，但不是文本区域的高度https://jsfiddle.net/zwjm16p3/6/ textarea不占用剩余的高度该列。 – fadedbee

@chrisdew - 您在侧边栏上缺少'display：flex'。 [侧边栏显示柔性示例]（https://jsfiddle.net/hgwvvkew/） – misterManSam

@chrisdew - 另外，如果您想占据整个视口，您可能不需要包装，只需使用身体作为主要的弹性容器... [就像这个例子]（https://jsfiddle.net/kg0nce9a/）。 – misterManSam

Flexbox内的Flexbox - 有可能吗？

回答

相关问题