logo标签列表

Flexbox子元素无法读取父元素的高度/宽度

cssflexbox
5
我正在尝试使用flexbox布局，创建了这个布局。我试图使中间的白色框框（上面写着“hey”）的宽度/高度为父元素的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;
}
1个回答
4
.super-thing的.body父元素是display: flex，所以如果子元素没有flex属性，则不会继承其高度或宽度。
###弹性布局的威力！
在.super-thing上设置flex: 1使其可以增长和缩小，同时创建1%的边距来创建间隔，不需要设置宽度或高度。 
.super-thing {
  background-color: white;
  margin: 1%;
  box-shadow: 2px 1px 1px #000;
  flex: 1;
}

###完整示例

在此示例中，使用box-sizing: border-box和将<body>的margin替换为padding，可以使整个容器在视口中正确地调整大小，因此不会出现滚动条。

* {
  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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接