我正在尝试使用 Flexbox 并创建了这个布局。我试图让中间的白框显示“嘿”为父级的 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;
}
的父.body级.super-thing是display: flex，因此如果子级没有 flex 属性，则它们不会继承其高度或宽度。
###弯曲的力量迫使你！
设置flex: 1为.super-thing使其以 1% 的幅度增长和收缩以形成间隙。不需要宽度或高度。
.super-thing {
background-color: white;
margin: 1%;
box-shadow: 2px 1px 1px #000;
flex: 1;
}
###完整示例
在此示例中，box-sizing: border-box删除边距并替换为 padding on <body>，使整个容器在视口中的大小正确，这样就没有滚动条。
.super-thing {
background-color: white;
margin: 1%;
box-shadow: 2px 1px 1px #000;
flex: 1;
}
* {
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;
}| 归档时间： |
|
| 查看次数： |
7551 次 |
| 最近记录： |