• CSSのflex-basisで要素の幅を調整する方法

    • このページをはてなブックマークに追加

    公開日:2019年01月30日 最終更新日:2021年12月24日

    CSSの「flex-basisプロパティ」でflexコンテナ内のアイテムの幅を任意で調節する事ができます。CSS3の新しいレイアウトモジュールである「flexbox」レイアウトモデルを使いボックスレイアウトを調整する方法について解説します。

    【関連記事】CSSレイアウトをFlexboxで作成する方法

    目次

    1. 基本のHTML

    まずは、基本となるリストのHTMLコードを確認してみましょう。

    リストタグ(li)を「flexアイテム」として設定し、アイテムの幅を調節する方法について解説します。

    サンプルコードの「CSS_Sample1.html」をコピーしてPCの任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    CSSのflex-basisで要素の幅を調整する方法【フリーランスエンジニア案件情報 | プロエンジニア】

    ●CSS_Sample1.html --------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to CSS(flex-basis)</title>
    <style>
    ul {
    display: flex; /* 要素をFlexコンテナとして定義する */
    padding:0; /* 要素の余白を指定する(上下左右) */
    background-color: #aaaaaa; /* 背景の色を指定する */
    list-style: none; /* リストのスタイルを無効にする */

    }
    li {
    padding:10px; /* 要素の余白を指定する(上下左右) */
    margin: 5px; /* ボックス外側余白を指定する */
    background-color: #31a9ee; /* 背景の色を指定する */
    }
    </style>
    </head>
    <body>
    <h1>CSS入門(flex-basis)</h1>
    <ul>
    <li>フレックスアイテム1です。</li>
    <li>フレックスアイテム2です。</li>
    <li>フレックスアイテム3です。</li>
    </ul>
    <ul>
    <li>フレックスアイテム4です。</li>
    <li>フレックスアイテム5です。</li>
    <li>フレックスアイテム6です。</li>
    </ul>
    </body>
    </html>
    --------------------

    ●ブラウザーの表示

    CSSのflex-basisで要素の幅を調整する方法【フリーランスエンジニア案件情報 | プロエンジニア】

    「ul」タグに、「display: flex;」でflexコンテナを作成しています。また、「list-style: none;」を設定して箇条書きリストのスタイルを無効にしています。

    2. 「flex-basis:auto」でflexアイテムの幅を自動で調整する方法

    基本のHTMLコードに「flex-basis:auto」を設定したクラスセレクタ「flex-item1」を追加します。

    CSSのflex-basisで要素の幅を調整する方法【フリーランスエンジニア案件情報 | プロエンジニア】

    ●JS_Sample2.html --------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to CSS(flex-basis)</title>
    <style>
    ul {
    list-style: none; /* リストのスタイルを無効にする */
    padding:0; /* 要素の余白を指定する(上下左右) */
    display: flex; /* 要素をFlexコンテナとして定義する */
    background-color: #aaaaaa; /* 背景の色を指定する */
    }
    li {
    padding:10px; /* 要素の余白を指定する(上下左右) */
    margin: 5px; /* ボックス外側余白を指定する */
    background-color: #31a9ee; /* 背景の色を指定する */
    }
    .flex-item1 {
    flex-basis: auto; /* flexアイテムの幅を自動で調整 */
    }
    </style>
    </head>
    <body>
    <h1>CSS入門(flex-basis)</h1>
    <ul>
    <li>フレックスアイテム1です。</li>
    <li>フレックスアイテム2です。</li>
    <li>フレックスアイテム3です。</li>
    </ul>
    <ul>
    <li class="flex-item1">フレックスアイテム4です。</li>
    <li class="flex-item1">フレックスアイテム5です。</li>
    <li class="flex-item1">フレックスアイテム6です。</li>
    </ul>
    </body>
    </html>
    --------------------

    ●ブラウザーの表示

    CSSのflex-basisで要素の幅を調整する方法【フリーランスエンジニア案件情報 | プロエンジニア】

    二列目の3つのフレックスアイテム4、5、6に「flex-item1」クラスセレクタを指定します。 「flex-basis」プロパティに「auto」を設定すると、アイテムの幅を自動で調整します。一列目のflexコンテナ内のフレックスアイテム1、2、3と同様に、ブラウザーの大きさに合わせて3つのアイテムのコンテンツも自動で調整されます。

    ▲ページトップへ戻る

    3. 「flex-basis:数値」でflexアイテムの幅を調節する方法

    「flex-basis」プロパティに「数値」+"px"や"em"などの単位を指定し、アイテムを希望の大きさに変更する事ができます。

    CSSのflex-basisで要素の幅を調整する方法【フリーランスエンジニア案件情報 | プロエンジニア】

    ●JS_Sample3.html --------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to CSS(flex-basis)</title>
    <style>
    ul {
    display: flex; /* 要素をFlexコンテナとして定義する */
    padding:0; /* 要素の余白を指定する(上下左右) */
    background-color: #aaaaaa; /* 背景の色を指定する */
    list-style: none; /* リストのスタイルを無効にする */
    }
    li {
    padding:10px; /* 要素の余白を指定する(上下左右) */
    margin: 5px; /* ボックス外側余白を指定する */
    background-color: #31a9ee; /* 背景の色を指定する */
    }
    .flex-item1 {
    flex-basis: 100px; /* flexアイテムの幅を数値で指定 */
    }
    </style>
    </head>
    <body>
    <h1>CSS入門(flex-basis)</h1>
    <ul>
    <li>フレックスアイテム1です。</li>
    <li>フレックスアイテム2です。</li>
    <li>フレックスアイテム3です。</li>
    </ul>
    <ul>
    <li class="flex-item1">フレックスアイテム4です。</li>
    <li class="flex-item1">フレックスアイテム5です。</li>
    <li class="flex-item1">フレックスアイテム6です。</li>
    </ul>
    </body>
    </html>
    --------------------

    ●ブラウザーの表示

    CSSのflex-basisで要素の幅を調整する方法【フリーランスエンジニア案件情報 | プロエンジニア】

    サンプルコードでは「flex-basis」プロパティに「100px」を指定しています。フレックスアイテム4、5、6の大きさは固定されますので、ブラウザーの大きさを変更してもコンテンツの内容を増減してもアイテムの幅は「100px」に保たれます。

    ▲ページトップへ戻る

    4. 「flex-basis:割合」でflexアイテムの幅を調節する方法

    「flex-basis」プロパティに割合を指定してブラウザーの表示を確認してみましょう。

    CSSのflex-basisで要素の幅を調整する方法【フリーランスエンジニア案件情報 | プロエンジニア】

    ●JS_Sample4.html --------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to CSS(flex-basis)</title>
    <style>
    ul {
    display: flex; /* 要素をFlexコンテナとして定義する */
    padding:0; /* 要素の余白を指定する(上下左右) */
    background-color: #aaaaaa; /* 背景の色を指定する */
    list-style: none; /* リストのスタイルを無効にする */
    }
    li {
    padding:10px; /* 要素の余白を指定する(上下左右) */
    margin: 5px; /* ボックス外側余白を指定する */
    background-color: #31a9ee; /* 背景の色を指定する */
    }
    .flex-item1 {
    flex-basis: 10%; /* flexアイテムの幅を割合で指定 */
    }
    .flex-item2 {
    flex-basis: 30%; /* flexアイテムの幅を割合で指定 */
    }
    .flex-item3 {
    flex-basis: 50%; /* flexアイテムの幅を割合で指定 */
    }
    </style>
    </head>
    <body>
    <h1>CSS入門(flex-basis)</h1>
    <ul>
    <li>フレックスアイテム1です。</li>
    <li>フレックスアイテム2です。</li>
    <li>フレックスアイテム3です。</li>
    </ul>
    <ul>
    <li class="flex-item1">フレックスアイテム4です。</li>
    <li class="flex-item2">フレックスアイテム5です。</li>
    <li class="flex-item3">フレックスアイテム6です。</li>
    </ul>
    </body>
    </html>
    --------------------

    ●ブラウザーの表示

    CSSのflex-basisで要素の幅を調整する方法【フリーランスエンジニア案件情報 | プロエンジニア】

    「flex-item1」の「flex-basis」プロパティの値には「10%」、「flex-item2」に「30%」、 「flex-item3」には「50%」を指定しました。グレーの背景のflexコンテナ内でフレックスアイテム4が「1割」、フレックスアイテム5が「3割」、フレックスアイテム6が「5割」の割合で表示されます。ブラウザーの大きさを変更してもこの割合は保たれます。

    ▲ページトップへ戻る


    フリーランス案件特集

    当サイトプロエンジニアのコンサルタントが厳選したおすすめのフリーランス案件特集はこちら
    特集ページから案件への応募も可能です!

    フリーランスインタビュー

    実際にフリーランスエンジニアとして活躍されている方のインタビューはこちら

    最新案件情報をチェック!

    月額単価90万円〜100万円
    勤務地 東京都 中央区
    月額単価60万円〜70万円
    勤務地 東京都 渋谷区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【Linux/HTML5/CSS/JavaScript】アプリ開発エンジニア★xR系サービスの仕様検討および研究開発

    月額単価 :70万円〜

    化粧品会社や観光業など各企業からxR系の案件を受託している企業にて、今後世に出したら便利になるよう...

    フリーランス

    【API/HTML】システムエンジニア★某企業向けAPI Management systemの開発関連業務

    ・API SuiteのマルチPF向け要件・開発・運用策定およびドキュメント化 ・開発・運用の準備・試験対応 ...

    フリーランス

    【HTML5/CSS3/JavaScript/Vue.js】フロントエンドエンジニア★入札情報サービスの開発

    月額単価 :90万円〜100万円

    クラウドソーシング事業やBPO事業を展開している企業にて、今回は入札情報サービスのフロントエンドエン...

    フリーランス

    【JavaScript(jQuery)/HTML/CSS】フロントエンドエンジニア★不動産テックの新規サービス開発

    月額単価 :60万円〜70万円

    オフィスの不動産仲介事業や、オフィスの使用状況をIoT連動で可視化するサービス等、オフィス不動産テッ...