Flexbox子节点不读取父节点的高度/宽度

Question

我正在用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;
}

Answer 1

的. body父节点是show： flex，所以如果它的子节点没有flex属性，它们就不会继承它的高度或宽度。

在上设置flex:1。super thing因此它以1%的边距增长和收缩，以形成一个间隙。不需要宽度或高度。

.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;
}

<div class="container">
  <div class="header">
    <div class="header-left">Left</div>
    <div class="header-right">
      <div class="small-item">A</div>
      <div class="small-item">B</div>
      <div class="small-item">C</div>
      <div class="small-item">D</div>
    </div>
  </div>
  <div class="main">
    <div class="left-column">
      <span class="story">A</span>
      <span class="story">A</span>
      <span class="story">A</span>
      <span class="story">A</span>
    </div>
    <div class="right-column">
      <div class="right-column-body">
        <div class="header">
          <div class="thing">A</div>
          <div class="thing">B</div>
          <div class="thing">C</div>
        </div>
        <div class="body">
          <div class="super-thing">Hey</div>
        </div>

        <div class="right-column-footer">Footer</div>
      </div>
    </div>
  </div>
  <div class="footer">Footer</div>

</div>