- Products -


Software


NEWS


Special



- Knowledge -


Category × Tag



- Like -

公開
作成日:2021/10/24
更新日:2022/3/4

【CSS】flexで固定列と可変列をつくる方法

・flex-basisを使用することで実現可能。

・flex-basisはflex内の要素の幅を指定するスタイル。

・flex-basisスタイルはflex内の要素に指定する。

・flex-basisだけだと崩れることがあるため、min-widthも併用する。

使い方


・以下の例は、左の列を160px固定幅とし、右列を可変幅としている。(flex-basis:auto)

<div style="display:flex;">
        <div style="flex-basis:160px; min-width: 160px;">
            aaaaa
        </div>
        <div style="flex-basis:auto;">
            bbbbb
        </div>
</div>


参考


https://www.i-ryo.com/entry/2018/03/06/215839#flex-basis%E3%81%AA%E3%82%89%E3%81%95%E3%82%89%E3%81%AB%E5%A4%89%E6%9B%B4%E4%B8%80%E7%AE%87%E6%89%80


Category



Tag




関連記事


{{tmp.name}}

{{article.category}} {{article.title}}