如何在flexbox中将项目居中和放置在角落？

Question

我正在尝试学习Flexbox，但是在实现想要的效果时遇到了困难。

我想要的效果：

1. 一个盒子，里面有两个标签（一个数字在标签上方）

2. 第二个盒子里有四个标签（左上角一个，右上角一个，中间一个和底部中间一个）

.flex-container {
    display: flex;
    background-color: lightgrey;
    flex-direction: row;
    align-items: stretch;
    align-content: stretch;
}

.flex-item {
    display: flex;
    background-color: cornflowerblue;
    margin: 10pt;
}


.flex-item-2 {
    display: flex;
    background-color: cornflowerblue;
    margin: 10pt;
    flex: 2 0 0;
}

.flex-qty-container {
    font-size: 27pt;
    margin: 0;
}

.flex-sub-container {
    display: flex;
    background-color: yellow;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
     flex: 2 0 0;
}

.flex-item-left-corner {
    background-color: red;
}

.flex-item-right-corner {
    background-color: red;
    align-self: flex-end;
    font-size: 10pt;
}

.flex-item-center {
    background-color: red;
     font-size: 12pt;
}

.flex-item-bottom-middle {
    background-color: red;
}

        <div class="flex-container">
            <div class="flex-item">
                <div class="">
                    <p class="flex-qty-container">7</p>
                    <p class="flex-qty-label">Label</p>
                </div>
            </div>
            <div class="flex-item-2">
                <div class="flex-sub-container">
                    <p class="flex-item-left-corner">top left corner</p>
                    <p class="flex-item-right-corner">top right corner</p>
                    <p class="flex-item-center">Center of box</p>
                    <p class="flex-item-bottom-middle">Bottom middle</p>
                </div>
            </div>
        </div>

- chobo2

Answer 1

1个盒子会有2个标签（标签上方有一个数字）。

这一部分你好像已经做好了。我没有对那里做任何更改。

第二个盒子将有4个标签（左上角1个，右上角1个，中心1个和底部中间1个）。

可以通过正确嵌套的flex容器实现此布局。

在您的代码中，`.flex-item-2` 有一个 flex 子项：`.flex-sub-container`。这个 flex 子项同时作为一个 flex 容器，并拥有四个 flex 子项（即您的标签）。

<div class="flex-item-2">
     <div class="flex-sub-container">
          <p class="flex-item-left-corner">top left corner</p>
          <p class="flex-item-right-corner">top right corner</p>
          <p class="flex-item-center">Center of box</p>
          <p class="flex-item-bottom-middle">Bottom middle</p>
      </div>
 </div>

不要让.flex-sub-container包括所有四个标签，只需要将前两个标签放在其中即可。然后应用justify-content: space-between，这样顶部左侧和右侧的标签就会按照预期对齐。

<div class="flex-item-2">
     <div class="flex-sub-container">
          <p class="flex-item-left-corner">top left corner</p>
          <p class="flex-item-right-corner">top right corner</p>
      </div><!-- END .flex-sub-container -->
      <p class="flex-item-center">Center of box</p>
      <p class="flex-item-bottom-middle">Bottom middle</p>
 </div>

.flex-item-2 {
    display: flex;
    flex-direction: column;
}

.flex-sub-container {
    display: flex;
    justify-content: space-between;
}

现在，.flex-item-2 成为了一个 column 方向的 flex 容器，交叉轴现在是水平的，可以使用 align-self 属性来将下方的标签居中。

.flex-item-center {
    align-self: center;
}

.flex-item-bottom-middle {
    align-self: center;
}

DEMO

- Michael Benjamin

---

很酷！不过我在想，对于这7个容器，如何才能使flex-item和flex-item-2之间没有间隔，并且始终与flex-item-2大小相同呢？ - chobo2

每当您想将 flex 属性应用于一个元素时，您需要使其父元素成为一个 flex 容器（通过应用 display: flex 或 inline-flex）。 - Michael Benjamin

@chobo2，您可能要考虑将您的编辑内容发布为一个新问题。这篇帖子变得混乱和复杂，而且对您最初的问题的回答可能不再适用。 - Michael Benjamin

好的，我会发一个新问题。 - chobo2

这里有新的问题：http://stackoverflow.com/questions/35777660/having-some-layout-issues-with-flexbox - chobo2

Answer 2

我不确定你需要多少具体示例，所以我提供了一些示例，以展示你的选项，并基本解决了你所要求的问题。更深层次的嵌套将支持更多细节等：

https://jsfiddle.net/1z4unyc2/

HTML：

  <div class="flex-container">
    <div class="flex-item">
        <p class="flex-qty-container">7</p>
        <p class="flex-qty-label">Label</p>
    </div>
    <div class="flex-item-2">
        <p class="flex-item-left-corner">top left corner</p>
        <div class="flex-item">
          <p class="flex-item-center">Center of box</p>
          <p class="flex-item-bottom-middle">Bottom middle</p>
        </div>
        <p class="flex-item-right-corner">top right corner</p> 
    </div>
  </div>

CSS：

.flex-container {
    display: flex;
    background-color: lightgrey;
    flex-direction: row;
}

.flex-item {
    display: flex;
    background-color: cornflowerblue;
    margin: 10pt;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flex-item-2 {
    display: flex;
    background-color: cornflowerblue;
    margin: 10pt;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.flex-qty-container {
    font-size: 27pt;
}

.flex-item-left-corner {
    background-color: red;
    align-self: flex-start;
}

.flex-item-right-corner {
    background-color: red;
    align-self: flex-start;;
    font-size: 10pt;
}

.flex-item-center {
    background-color: red;
     font-size: 12pt;
     align-self: center;
}

.flex-item-bottom-middle {
    background-color: red;
    align-self: flex-end;
}

- Cooper Buckingham