当サイトは、アフィリエイト広告を利用しています

FlexBoxで縦の高さをずれる時の対処

作成日：2022月03月20日

更新日：2022年06月11日

cssのflexboxを使うときにアイテムの高さを揃える方法をメモ。

前提

react + emotionで実装する

そろわない場合

フレックスコンテナ内のアイテムのタグが違う場合に
そろわない時がある。

App.js


/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

export default function App() {

  return (
    <div className="App">
      <h1 css={[css`text-align:center;`]}>Hello CodeSandbox</h1>

      <div css={[container]}>
          <p css={item}>1111111</p>
          <div css={item}>22</div>
          <h4 css={item}>3333</h4>
      </div>
    </div>
  );
}

const container = () => [
  css`
    display: flex;
    justify-content: center;

  `
];

const item = () => [
  css`
    border :1px solid black;
    text-align:center;
  `
];

const itemContainer = () => [
  css`
    display: flex;
      align-items: center;
  `
];

イメージ

対応方法

2パターンの対応方法がある

フレックスアイテムのタグを揃える

全部divにすればそろう
全部同じ要素にするとダメな場合は使えない

App.js


/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

export default function App() {

  return (
    <div className="App">
      <h1 css={[css`text-align:center;`]}>Hello CodeSandbox</h1>

      <div css={[container]}>
          <div css={item}>1111111</div>
          <div css={item}>22</div>
          <div css={item}>3333</div>
      </div>
    </div>
  );
}

const container = () => [
  css`
    display: flex;
    justify-content: center;

  `
];

const item = () => [
  css`
    border :1px solid black;
    text-align:center;
  `
];

アイテム用のコンテナを作る

高さをそろえたい要素をdivで囲む
そのdivに「display: flex」、「align-items: center」を設定する

App.js


/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

export default function App() {

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>

      <div css={[container]}>
        <div css={[itemContainer]}>
          <p css={item}>1111111</p>
          <div css={item}>22</div>
          <h4 css={item}>3333</h4>
        </div>
      </div>
    </div>
  );
}

const container = () => [
  css`
    display: flex;
    justify-content: center;

  `
];

const item = () => [
  css`
    border :1px solid black;
    text-align:center;
  `
];

const itemContainer = () => [
  css`
    display: flex;
    align-items: center;
  `
];