使所有的孩子在一个flexBox中都有相同的高度

Question

我有一个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;
    }
  }
`;

这是我的结果：

​

​

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

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 )。另外，左侧元素上的填充可能大于右侧，从而使其显示大小更大。