我正在尝试使用flexbox并创建了这个布局。我试图让中间的白盒子说“嘿嘿”＃34;为父母的90％宽度/高度，但百分比似乎不会影响它。 （我把它设置为当前有效的100px / 100px）
这很奇怪，因为父母在检查时有一个明确的宽度/高度。
有谁能告诉我如何实现它？ （另外，关于我如何使用flexbox的一般批评也是如此）
http://jsfiddle.net/yv3Lw5gy/1/
相关课程：
.super-thing{
height: 100px;
width: 100px;
background-color: white;
margin:auto;
box-shadow: 2px 1px 1px #000;
}
答案 0 :(得分：3)
.body的{{1}}父级是.super-thing，因此如果孩子没有弹性属性，孩子就不会继承它的高度或宽度。
在display: flex上设置flex: 1，使其增长并缩小1％，以创造差距。 无需宽度或高度。
.super-thing在此示例中，.super-thing {
background-color: white;
margin: 1%;
box-shadow: 2px 1px 1px #000;
flex: 1;
}
以及要用box-sizing: border-box上的填充替换边距的移除，使整个容器在视口中的大小正确，因此没有滚动条。
<body>* {
background-color: rgba(255, 0, 0, .2);
box-sizing: border-box;
}
* * {
background-color: rgba(0, 255, 0, .2);
}
* * * {
background-color: rgba(0, 0, 255, .2);
}
* * * * {
background-color: rgba(255, 0, 255, .2);
}
* * * * * {
background-color: rgba(0, 255, 255, .2);
}
* * * * * * {
background-color: rgba(255, 255, 0, .2);
}
html,
body,
.container {
height: 100%;
}
body {
padding: 10px;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: stretch;
/* align-content: center; */
}
.header {
flex: 1 0 30px;
display: flex;
}
.header-left {
flex: 11 0 auto;
}
.header-right {
flex: 1 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.header-right .small-item {
width: 100%;
outline: 1px solid #fff;
}
.main {
background-color: #fff;
flex: 10 0 30px;
display: flex;
}
.left-column {
flex: 3;
flex-direction: column;
display: flex;
justify-content: center;
}
.left-column .story {
flex: 2;
outline: 1px solid white;
/* margin:auto; */
}
.right-column {
flex: 12;
background-color: #f0f;
display: flex;
flex-direction: column;
}
.right-column-body {
flex: 10;
display: flex;
flex-direction: column;
}
.right-column-body .header {
flex: 1;
display: flex;
justify-content: center;
}
.thing {
width: 20%;
margin: 5px
}
.super-thing {
background-color: white;
margin: 1%;
box-shadow: 2px 1px 1px #000;
flex: 1;
}
.right-column-body .body {
background-color: #ccc;
flex: 5;
display: flex;
flex-direction: column;
justify-content: center;
}
.right-column-footer {
flex: 1;
background-color: white;
}
.footer {
flex: 1 0 30px;
}