CSS Flex-Direction：默认情况下需要行吗？

Question

我们正在使用 React Typescript 和 CSS。flex-direction: row,尽管这是 CSS 默认值，但我们公司的一些人仍然使用它。

有什么理由要拥有吗flex-direction: row？否则，我们的团队会使用它删除所有代码文件行吗？只是好奇是否有任何情况需要我们确定。是否有任何副作用或边缘情况？

Answer 1

一种可能产生影响的场景是 CSS 规则的特殊性。如果使用非特定 CSS 选择器将非默认值应用于flex-direction，则其他开发人员可能会使用 强制将其恢复为原始值flex-direction: row。

删除它可能会导致不同的布局：

.main-div {
  display: flex;
  gap: 1rem;
}

.main-div>* {
  flex-direction: column;
}

.row {
  flex-direction: row;
}

.container {
  display: flex;
  gap: 1rem;
}

.cube {
  width: 5rem;
  height: 4rem;
  border-radius: 0.25rem;
  background-color: cyan;
}

<div class="main-div">
  <span>With row</span>
  <div class="container row">
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
  </div>
  <span>Without row</span>
  <div class="container">
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
  </div>
</div>

当移动网站和媒体查询中经常将某些布局元素制成列时，通常会使用这种可能会引起麻烦的半全局规则。