如何为 flex-box css 设置两个方向？ [复制]

Question

我可以使用 1 个弹性容器和 4 个弹性项目来制作这个弹性盒方向吗

-----  ----- -----
| 1 |  |   | |   |
-----  | 3 | | 4 |
-----  |   | |   |
| 2 |  |   | |   |
-----  ----- -----

Answer 1

与公认的答案相反，此布局无需使用包装容器即可实现，尽管此解决方案需要固定高度。

诀窍是将容器的 flex-direction 设置为column，这意味着：

1. flex-basis 计算将针对容器的高度进行，我们将使用该高度来定位第一个和第二个孩子
2. flex-wrap 会将内容包裹到右侧，我们将使用它来定位第三个和第四个孩子

例子：

.container {
  height: 10rem;
  width: 30rem;
  background: lightgray;
  
  display: flex;
  /* by setting the flex-direction to "column" the 
  items that won't fit into the vertical space
  will be wrapped to the right */
  flex-direction: column;
  flex-wrap: wrap;
}

.child {
  box-sizing: border-box;
  border: 1px crimson solid;
  font-size: 3rem;
}

.child:nth-child(1),
.child:nth-child(2) {
  /* because we set the container's flex-direction
  to column, the flex-basis will make the children
  occupy the vertical space. In our case, because
  the 1st and the 2nd children are both 50%, they
  fill up the first column completely and push out
  the 3rd and the 4th children */
  flex: 0 1 50%;
}

.child:nth-child(3),
.child:nth-child(4) {
  flex: 0 1 100%;
}

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

Answer 2

使用1 和2 周围的容器可以做到这一点，如下所示：

* {
    box-sizing: border-box;
}
.wrapper {
    display: flex;
    flex-direction: row;
}
.container {
    flex-direction: column;
    flex-grow: 1;
}
.item  {
    background: tomato;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
    flex-grow: 1;
    border: 1px solid black;
}
.inner {
    height: 100px;
    line-height: 100px;
}
.outer {
    height: 200px;
    line-height: 200px;
}

<div class="wrapper">
    <div class="container">
        <div class="item inner">1</div>
        <div class="item inner">2</div>
    </div>
    <div class="item outer">3</div>
    <div class="item outer">4</div>
</div>

但是如果你不想为1和2使用容器的话，恐怕你做不到，因为孩子的方向是由父母决定的。

.container {
   flex-direction: row | row-reverse | column | column-reverse;
}

最好的办法是使用属性align-self，这允许默认对齐方式（或由 align-items 指定的对齐方式）被单个弹性项目覆盖。像这样：

* {
    box-sizing: border-box;
}
.wrapper {
    display: flex;
    flex-direction: row;
}
.item  {
    background: tomato;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
    flex-grow: 1;
    border: 1px solid black;
}
.inner {
    height: 100px;
    line-height: 100px;
}
.outer {
    height: 200px;
    line-height: 200px;
}

.item-top{
    align-self: flex-start;
}
.item-bottom{
    align-self: flex-end;
}

<div class="wrapper">
    <div class="item inner item-top">1</div>
    <div class="item inner item-bottom">2</div>
    <div class="item outer">3</div>
    <div class="item outer">4</div>
</div>

但请注意，浮动、清除和垂直对齐对弹性项目没有影响。

Check this out for a better understanding of flex box.