想要将 X 个 div 放在彼此下方，且高度不变

Question

我想要 x div 彼此下方具有一定的高度（例如屏幕高度的 1/2），但是当我这样做时，div 会获得 1/x 高度，因为它试图用 x div 填充屏幕，因此它会使其变小，但我不这样做想要那个。

我在 React 中使用 Tailwind 的代码：

import React from 'react';

function YourComponent() {
    return (
        <div className='flex flex-col justify-center items-center bg-white border border-black h-screen'>

            <div className="w-full h-1/2 border">
                Div 1
            </div>
            <div className="w-full h-1/2 border">
                Div 2
            </div>
            <div className="w-full h-1/2 border">
                Div 3
            </div>
            <div className="w-full h-1/2 border">
                Div 4
            </div>
            <div className="w-full h-1/2 border">
                Div 5
            </div>

        </div>
    );
}

export default YourComponent;

Answer 1

Flex 布局中的项目默认具有

flex-shrink: 1

，这可以让它们缩小以适合 Flex 布局的长轴。

因此，为了避免它们收缩，请考虑通过

flex-shrink: 0

Tailwind 类应用

shrink-0

：

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div class='flex flex-col justify-center items-center bg-white border border-black h-screen'>
  <div class="w-full h-1/2 border shrink-0">
    Div 1
  </div>
  <div class="w-full h-1/2 border shrink-0">
    Div 2
  </div>
  <div class="w-full h-1/2 border shrink-0">
    Div 3
  </div>
  <div class="w-full h-1/2 border shrink-0">
    Div 4
  </div>
  <div class="w-full h-1/2 border shrink-0">
    Div 5
  </div>
</div>