Question

你好我不太确定该怎么称呼这个标题。我想不出它的确切名称，但我无法弄清楚为什么'topb'类在'底层'类中，而在HTML中它不是。我所追求的结构如下。顶级父级是'.container'，然后我有两个子行（'top'和'bottom'）。在'顶部'我有'topa'和'topb'作为孩子，我想要分享一行。现在在这个例子中由于某种原因，当我在顶部需要时，由于某种原因，'topb'在其底部有黑色。我很确定这是一个愚蠢的错误，但我正在经历这个阶段，意识到要注意什么，因为当我做这些简单的事情时。

- 谢谢你

.container {
    display: flex; 
    position: relative;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    height: 100vh; 
    width: 80%;	
	/*padding-top: 2%;
	padding-bottom: 18%;
    margin: 5% auto 8% auto; */
    background-color: white;
}
.container h2 {
	color: orange;
}
.top {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;	
	border: 2px solid blue;		
}
.top * {
	flex: 1 1 50%;
}
.bottom {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: flex-start;
	border: 2px solid red;
}
.top,
.bottom {
	width: 100%;
}
.topa {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	border: 2px solid orange; 
	height: 100%;
}
.topb {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	border: 2px solid purple; 
	background-color: black;
	height: 100%;
}

<div id="bigwrap">
	<div class="container">
    	<div class="top">
        	<div class="topa">
            </div>
            <div class="topb">
            </div>           
        </div>
        <div class="bottom">
        </div>
    </div>
</div>

Answer 1

改变这个：

.top * {
    flex: 1 1 50%;
}

对此：

.top * {
    flex: auto;
}

https://jsfiddle.net/maspq7np/

这里有一些文档：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

我想你想要这样的东西：

.container {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  justify-content: center;
  height: 100vh;
  width: 80%;
  margin: auto;
  background-color: white;
}
.top {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid blue;
}
.top,
.bottom {
  flex: 0 0 100%;
  height: 50%;
}
.top * {
  flex: 1 1 50%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  height: 100%;
}
.topa {
  background: orange;
}
.topb {
  background: purple;
}
.bottom {
  background: red;
}

<div class="container">
  <div class="top">
    <div class="topa"></div>
    <div class="topb"></div>
  </div>
  <div class="bottom">
  </div>
</div>

在你的例子中，底部div没有高度....所以有一个可能的原因。

HTML和Flexbox结构无法按预期工作

2 个答案: