Semantic UI React：如何使Segment组件保持相同高度？

嘿，我来给你分享几个项目里常用的实现Semantic UI React Segment组件等高的方案，按需选择就行：

方案一：用Semantic UI Grid原生特性（最省心） #

Semantic的Grid组件自带stretched属性，能让所有列自动拉伸高度，里面的Segment自然就等高了，完全不用额外写CSS：

import { Grid, Segment } from 'semantic-ui-react';

const EqualHeightSegments = () => (
  <Grid columns={3} stackable={false} stretched>
    <Grid.Column>
      <Segment>
        这里是内容较短的Segment
      </Segment>
    </Grid.Column>
    <Grid.Column>
      <Segment>
        这里是内容较长的Segment，会自动把其他列的高度拉平。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </Segment>
    </Grid.Column>
    <Grid.Column>
      <Segment>
        另一列短内容
      </Segment>
    </Grid.Column>
  </Grid>
);

如果需要响应式堆叠（小屏幕下Segments自动换行），可以把stackable={false}改成stackable，大屏幕上等高，小屏幕上堆叠。

方案二：自定义Flex布局（更灵活） #

如果不想依赖Grid组件，直接用CSS Flex布局包裹Segments即可，自由度更高：

首先写组件：

import { Segment } from 'semantic-ui-react';
import './EqualHeightStyles.css';

const EqualHeightSegments = () => (
  <div className="equal-height-segment-container">
    <Segment>短内容Segment</Segment>
    <Segment>长内容Segment：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Segment>
    <Segment>中等长度内容Segment</Segment>
  </div>
);

然后在EqualHeightStyles.css里添加样式：

.equal-height-segment-container {
  display: flex;
  gap: 1.5rem; /* 可选，设置Segment之间的间距，和Semantic的间距风格匹配 */
  flex-wrap: wrap; /* 可选，小屏幕自动换行 */
}

.equal-height-segment-container .ui.segment {
  flex: 1; /* 让每个Segment平分可用宽度，高度自动对齐 */
  min-width: 280px; /* 可选，设置最小宽度，避免小屏幕太挤 */
}

方案三：Segment内部内容对齐进阶（底部元素统一） #

如果你的Segment里有标题、内容和底部按钮/操作栏，想要让底部元素都对齐在Segment底部，同时保持整体等高，可以给Segment内部加Flex布局：

组件代码：

import { Segment, Button } from 'semantic-ui-react';
import './FlexSegmentStyles.css';

const AlignedSegments = () => (
  <Grid columns={2} stretched>
    <Grid.Column>
      <Segment className="flex-inner-segment">
        <h3>标题1</h3>
        <div className="segment-body">
          短内容，Lorem ipsum dolor sit amet.
        </div>
        <div className="segment-actions">
          <Button>操作按钮</Button>
        </div>
      </Segment>
    </Grid.Column>
    <Grid.Column>
      <Segment className="flex-inner-segment">
        <h3>标题2</h3>
        <div className="segment-body">
          长内容，Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
        <div className="segment-actions">
          <Button>操作按钮</Button>
        </div>
      </Segment>
    </Grid.Column>
  </Grid>
);

对应的CSS：

.flex-inner-segment {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.segment-body {
  flex: 1; /* 让内容区域占满Segment的剩余空间，把操作栏挤到底部 */
  margin: 1rem 0; /* 可选，设置内容和上下元素的间距 */
}

这些方案基本能覆盖大部分场景，你可以根据自己的布局需求来选~

内容的提问来源于stack exchange，提问作者Antonio Pavicevac-Ortiz