使 flexBox 内的所有子项高度相同答案

【问题标题】：Make all children the same height inside a flexBox使 flexBox 内的所有子项高度相同
【发布时间】：2020-11-10 06:55:21
【问题描述】：

我有一个有 2 个孩子的 flexBox。 1 个孩子只是一个图标，它似乎与另一个孩子的高度不同。请告诉我解决此问题的方法。

游乐场网址：URL

import React from "react";
import "./styles.scss";
import styled from "styled-components/macro";
import { Button, Card, Colors, Icon } from "@blueprintjs/core";
import { IconNames } from "@blueprintjs/icons";
import { Box, Flex } from "@rebass/grid";
import cx from "classnames";

const CustomIcon = styled(Button)`
  transition: all 0.2s ease;
}
`;

function App() {
  return (
    <Flex>
      <Box width={"90%"}>
        <Card
          interactive={true}
          className={cx({ selected: true, muted: true })}
        >
          <Flex alignItems="center">
            <Box mr={2} css={{ minWidth: 0 }}>
              Sample
            </Box>
            <Box flex="auto" />
            <Box flex="none">
              <CustomIcon
                className="utility-button"
                icon={<Icon icon={IconNames.EDIT} />}
                minimal={true}
                title="Edit scenario"
              />
              <CustomIcon
                className="utility-button"
                icon={<Icon icon={IconNames.DUPLICATE} />}
                minimal={true}
                title="Copy scenario"
              />
              <CustomIcon
                className="utility-button"
                icon={<Icon icon={IconNames.DOCUMENT_SHARE} />}
                minimal={true}
                title={"Transfer"}
              />
              <CustomIcon
                className="utility-button"
                icon={<Icon icon={IconNames.TRASH} color={Colors.RED1} />}
                minimal={true}
                title="Delete scenario"
              />
            </Box>
          </Flex>
        </Card>
      </Box>
      <Box width={"10%"}>
        <Card>
          <Icon icon={IconNames.CHEVRON_RIGHT} />
        </Card>
      </Box>
    </Flex>
  );
}

export default styled(App)`
  &.selected {
    box-shadow: inset 0 1px 0 #137cbd, inset 0 -1px 0 #137cbd,
      inset 1px 0 0 #137cbd;
  }
  &.muted {
    opacity: 0.5;
    .utility-button {
      pointer-events: none;
    }
  }
  &:not(:hover):not(.selected) {
    .utility-button {
      opacity: 0;
      pointer-events: none;
    }
  }
`;

这是我的结果：

我希望第二个孩子和第一个孩子一样高。请指教。

【问题讨论】：

通过添加实用程序类来修复它。谢谢

标签： css reactjs flexbox blueprintjs rebass

【解决方案1】：

您应该能够在 CSS 中明确设置元素的高度 - 即。 sampleDiv { height: 20px )。此外，左侧元素的内边距可能大于右侧，导致其显示尺寸更大。

【讨论】：

我没有明确设置 flexBox 或孩子的高度。我尝试了 alignItems:stretch 并没有工作。还有其他解决方法吗？

【解决方案2】：

首先，您的图标大小应该相同，
设置图标包装层的宽度和高度，
重置图标的line-height。

.utility-button{
  flex: none;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
}

.utility-button .icon {
  font-size: 1em;
}

【讨论】：