Question

我正在尝试学习Flexbox，但却无法获得我想要的东西。

我想要的是什么：

1个包含2个标签的盒子（标签顶部的数字）
第二个方框将有4个标签（左上角1个，右上角1个，中间1个，中间底部1个）

.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>

Answer 1

1个盒子，它有2个标签（一个标签顶部的数字）

这部分你似乎已经完成了。我没有改变任何东西。

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

使用正确嵌套的Flex容器可以实现此布局。

在您的代码中，.flex-item-2有一个弹性项：.flex-sub-container。此弹性项目兼作弹性容器，并有四个弹性项目（您的标签）。

<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 - 方向的灵活容器，横轴现在是水平的，align-self属性可用于居中较低的标签。

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

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

DEMO

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;
}

如何在flexbox中居中和弯曲项目？

2 个答案: