Flexbox存在一些布局问题

Question

我正在使用flexbox，但仍遇到一些问题..我几乎有我想要的东西：

第一个容器左上角的
1. 标签
第一个容器右上角的
2. 标签
3. 第一个容器底部中间的标签
4. 包含＆＃34;数字＆＃34;的框在＆＃34;标签＆＃34;
之上
5. 中心区域的文字。
6. 在一行中有多个这些（我还没有这样做，现在如果我再做一个就是它自己的行）。

问题

1. 想要绿色框和蓝色框之间的间距。试图使用＆＃34; space-around＆＃34;但它似乎没有做我想要的。我也希望容器的大小相同，但不知道如何做到这一点，所以它会响应。
2. 希望中心的文字实际上是自己的中心，而不仅仅是＆＃34; p＆＃34;标签
3. 想要在更大的屏幕上使用多个容器适合一条线。不确定我是否需要在其周围包裹另一个弹性容器。
4. 根容器之间的间距。
＆＃13;
＆＃13;
.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;

}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

  

想要绿色框和蓝色框之间的间距。试图使用＆＃34; space-around＆＃34;但它似乎没有做我想要的。

只是在它们之间添加了一些余量。 p选项仅在那里有实际空间时才有效...即。子宽度的总和小于父宽度。

  

我也希望容器的大小相同，但不知道如何做到这一点，以便它能够响应。

     

希望中心的文字实际上是自己的中心，而不仅仅是＆＃34; p＆＃34;标签

将div中的margin-bottom包裹起来，使两个div的高度相等，然后照常将文本居中

  

想要在更大的屏幕上拥有多个容器可以放在一条线上。不确定我是否需要在其周围包裹另一个柔性容器。

正如你所说，你可以添加一个flex-container（包装），但你仍然需要添加相关的媒体查询。

  

根容器之间的间距。

只需.flex-container { display: flex; flex-direction: column; background-color: grey; padding: 0; margin-bottom: 1em; } .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; 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; font-size: 15pt; flex: 3; margin-left: 2em; text-align: center; }

＆＃13;

＆＃13;

<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>
      <div class="flex-center">
        <p>This is my very long center text.</p>
      </div>
    </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>
      <div class="flex-center">
        <p>This is my very long center text.</p>
      </div>
    </div>

  </div>
  <p class="flex-bottom-middle">Bottom Middle</p>
</div>

＆＃13;

esp_alph = " abcĉĉdefgĝĝhĥĥijĵĵklmnoprsŝŝtuŭŭvz"

arr = ["abc\u0302a", "abĉa","abca" ]
p arr.sort_by {|string| string.chars.map{|c| esp_alph.index(c)}}
# => ["abca", "abĉa", "abĉa"]

＆＃13;

＆＃13;

＆＃13;