SCRAWLED TECH BLOG

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

flexboxで要素数に関わらず均等幅で横並びにする

作成日：2022月03月20日
更新日：2024年03月02日

flexboxで要素数にかかわらす均等幅で横並びにする方法をまとめる

横幅が変わってしまうケース

アイテムの中身の文字数等が違う場合に大きさが変わってしまう

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


export default function App() {
  return (
    <div className="App">
      <div css={[styles.container]}>
        <div css={[styles.item]}>ccccccc</div>
        <div css={[styles.item]}>bbb</div>
        <div css={[styles.item]}>d</div>
        <div css={[styles.item]}>d33333333333333dd</div>
      </div>
    </div>
  );
}


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


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

対応方法

いくつかの対応方法

flex-wrap: wrapがない場合

flex-wrap: wrapを設定しない場合であれば 「width:100%」を設定するだけでいい。

App.js
/** @jsxImportSource @emotion/react */
import styled from "@emotion/styled";
import { css } from "@emotion/react";


export default function App() {
  return (
    <div className="App">
      <div css={[styles.container]}>
        <div css={[styles.item]}>ccccccc</div>
        <div css={[styles.item]}>bbb</div>
        <div css={[styles.item]}>d</div>
        <div css={[styles.item]}>d33333333333333dd</div>
      </div>
    </div>
  );
}


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


    `
  ],
  item: () => [
    css`
      border: 1px solid black;
      width:100%;
      text-align:center;
    `
  ]
};

flex-wrap: wrapがある場合

「flex-wrap: wrap」がある場合は使えない。

flex:1を設定する

flex:1を設定することで全ての要素を均等にできる。
「flex-wrap: wrap」がない場合も同様に使えるので基本は
この形を使う

App.js
/** @jsxImportSource @emotion/react */
import styled from "@emotion/styled";
import { css } from "@emotion/react";


export default function App() {
  return (
    <div className="App">
      <div css={[styles.container]}>
        <div css={[styles.item]}>ccccccc</div>
        <div css={[styles.item]}>bbb</div>
        <div css={[styles.item]}>d</div>
        <div css={[styles.item]}>d33333333333333dd</div>
      </div>
    </div>
  );
}


const styles = {
  container: () => [
    css`
      display: flex;
      justify-content: center;
      flex-wrap: wrap
    `
  ],
  item: () => [
    css`
      border: 1px solid black;
      flex:1;
      word-wrap: break-word;
      min-width: 0;
      text-align:center;
    `
  ]
};
  • word-warpは折り返し設定

固定値でwidthを指定する

最終手段。固定値で書く。

App.js
/** @jsxImportSource @emotion/react */
import styled from "@emotion/styled";
import { css } from "@emotion/react";


export default function App() {
  return (
    <div className="App">
      <div css={[styles.container]}>
        <div css={[styles.item]}>ccccccc</div>
        <div css={[styles.item]}>bbb</div>
        <div css={[styles.item]}>d</div>
        <div css={[styles.item]}>d33333333333333dd</div>
      </div>
    </div>
  );
}


const styles = {
  container: () => [
    css`
      display: flex;
      justify-content: center;
      flex-wrap: wrap
    `
  ],
  item: () => [
    css`
      border: 1px solid black;
      width:200px;
      text-align:center;
    `
  ]
};

参考

新着記事

タグ別一覧
top