使所有 children 在 flexBox 中具有相同的高度

Question

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

游乐场URL: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;
    }
  }
`;

这是我的结果：

我希望第二个 child 与第一个 child 高度相同。请指教

Answer 1

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

Answer 2

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

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

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

使所有 children 在 flexBox 中具有相同的高度

Make all children the same height inside a flexBox

css

flexbox

reactjs

blueprintjs

rebass