flex-wrap的一个坑

问题

在垂直布局下，flex-wrap: wrap会导致子元素无法撑开容器的宽度。

代码

<template>
  <main class="page">
    <div class="wrapper">
      <div class="block block1" />
      <div class="block block2" />
      <div class="block block3" />
      <div class="block block4" />
    </div>
  </main>
</template>

<style>
.page {
  display: flex;
  justify-content: center;
  align-items: center;
  border: grey solid 1px;
}
.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 200px;
}
.block {
  height: 100px;
  width: 100px;
}
.block1 {
  background-color: green;
}
.block2 {
  background-color: red;
}
.block3 {
  background-color: yellow;
}
.block4 {
  background-color: blue;
}
</style>

渲染效果

上图中，wrapper元素设置了flex-direction: column; flex-wrap: wrap。即垂直布局，高度不够时向右边排列，其高度设置为200。wrapper元素由四个大小为100x100的block元素组成，,结果大小是100x200，理想状态应该为200x200。page元素设置子元素水平居中，由于wrapper元素尺寸和其子元素不匹配，导致整体向右偏移。

解决办法

将容器设置flex布局方向改为设置文本排布方向，然后重置子元素的文本排布方向。

.wrapper {
  /* flex-direction: column; */
  writing-mode: vertical-lr;
}
.block {
  /* 子元素需要重新设置文字布局为水平方向 */
  writing-mode: horizontal-tb;
 }

参考 writing-mode