css - 使 flexBox 内的所有子项高度相同

Question

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

游乐场网址：网址

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;
    }
  }
`;

这是我的结果：

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

Answer 1

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

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

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

Answer 2

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