我正在尝试实现以下布局:
+---------+---------------------+
|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,或者一个 div 可以既是一个 flexbox 的子元素又是另一个 flexbox 的容器?
最佳答案
你必须用 flex-direction:row
将整个 div 包裹在一个 flex box 中,并用 flex-direction : column
包裹内部的两个 div
#wrapper{
display:flex;
flex-direction:row;
}
#sidebar{
display:flex;
flex-direction: column;
}
这是工作 Demo针对你的问题
关于html - Flexbox 中的 Flexbox - 这可能吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37475148/