【发布时间】：2016-03-04 01:10:34
【问题描述】：
我正在玩 flexbox，但仍然遇到一些问题。我几乎拥有了我想要的东西：
- 第一个容器左上角的标签
- 第一个容器右上角的标签
- 第一个容器底部中间的标签
- “标签”上方有“数字”的框
- 文本在中心区域。
- 在一行中有多个（我还没有这样做，现在如果我再做一个，那将是它自己的行）。
问题
- 想要绿框和蓝框之间的间距。试图使用“空间环绕”，但它似乎没有做我想要的。我也希望容器大小相同，但不知道如何做到这一点，以便响应。
- 希望中心的文本实际上也成为自身的中心，而不仅仅是“p”标签。
- 希望将它放在更大的屏幕上，一条线上可以容纳多个容器。不确定我是否需要在它周围包裹另一个 flex 容器。
- 根容器之间的间距。
.flex-container {
display: flex;
flex-direction: column;
background-color: grey;
padding: 0;
}
.flex-sub-container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.flex-item-left-corner {
/*background-color: red;*/
margin: 0;
padding: 0;
}
.flex-item-right-corner {
/*background-color: red;*/
margin: 0;
padding: 0;
justify-content: flex-end;
}
.flex-bottom-middle {
/*background-color: red;*/
align-self: center;
margin: 0;
}
.flex-sub-container2 {
/*background-color: yellow;*/
display: flex;
flex-direction: row;
justify-content: center;
}
.flex-sub-item {
background-color: green;
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
}
.flex-qty {
margin: 0;
font-size: 28pt;
}
.flex-qty-label {
margin: 0 5pt 5pt 5pt;
}
.flex-center {
background-color: royalblue;
align-self: center;
font-size: 15pt;
flex-grow: 3;
}<div class="flex-container card-panel teal lighten-2">
<div>
<div class="flex-sub-container">
<p class="flex-item-left-corner">Left Top</p>
<p class="flex-item-right-corner">Right Top</p>
</div>
</div>
<div>
<div class="flex-sub-container2">
<div class="flex-sub-item">
<p class="flex-qty">7</p>
<p class="flex-qty-label">Label</p>
</div>
<p class="flex-center">This is my very long center text.</p>
</div>
</div>
<p class="flex-bottom-middle">Bottom Middle</p>
</div>
<div class="flex-container card-panel teal lighten-2">
<div>
<div class="flex-sub-container">
<p class="flex-item-left-corner">Left Top</p>
<p class="flex-item-right-corner">Right Top</p>
</div>
</div>
<div>
<div class="flex-sub-container2">
<div class="flex-sub-item">
<p class="flex-qty">7</p>
<p class="flex-qty-label">Label</p>
</div>
<p class="flex-center">This is my very long center text.</p>
</div>
</div>
<p class="flex-bottom-middle">Bottom Middle</p>
</div>【问题讨论】：
-
你有这应该是什么样子的图像吗？这比“文字图片”要好得多。
-
你的意思是这样吗 - codepen.io/Paulie-D/pen/dMorKg
-
是的，我认为这涵盖了我所有的问题（我没有在小屏幕上检查过）。第 6 步仍然未完成。在我的大屏幕上，我想在同一行上看到这两个主容器。你能强调一下你所做的改变吗？
-
正如你所说，你可以添加一个弹性容器，但你仍然需要媒体查询。
-
啊，没有媒体查询就不行吗？认为如果在较小的屏幕上没有空间或其他东西，它只会在较小的设备上将其推送到每行一个。