Flex 的 create-react-app 高度问题

在使用 create-react-app 创建 React 应用时，可能会遇到使用 Flex 布局时出现的高度问题。这个问题在使用 React Native 进行开发时同样存在。

问题描述

在使用 Flex 布局时，我们可能会使用以下代码：

import React from "react";
import "./App.css";

function App() {
  return (
    <div className="wrapper">
      <div className="box">Box1</div>
      <div className="box">Box2</div>
      <div className="box">Box3</div>
    </div>
  );
}

export default App;

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  width: 100px;
  height: 100px;
  background-color: coral;
  margin: 10px;
}

这段代码用 Flex 布局将三个盒子在垂直居中的同时，保持在视图中垂直方向铺满。

然而，当我们使用上述代码时，当父元素的高度不足以容纳子元素时，我们可能会得到一个错误的布局效果。比如留白区域等等。

原因

该问题的原因是，Flex 布局的默认值是 flex-shrink: 1; 。这意味着子元素会被缩小以适应父元素的高度。如果子元素太多或太大，它们将以与 Flex 布局相反的方式行事。

解决方案

1. 将 flex-shrink 设置为 0:

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-shrink: 0;
}

这意味着子元素不会缩小以适应父元素的高度，而是保持其原始高度。

2. 使用 min-height 替代 height:

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

这意味着容器将自动延伸以容纳子元素的高度，而不仅仅是滚动条产生的高度。

结论

这些解决方案将帮助我们在使用 Flex 布局时避免高度问题，同时展示出要达到的布局效果。