ホーム(記事一覧)へ

【CSS】flexで固定幅、残り全部幅の指定方法

flexを使うと要素を横に並べることができます。

子要素の幅は可変だけでなく固定幅にもできます。

「次の子要素の幅を残り全部にするにはどうするの?」

display:flexで固定幅、残り全部幅の指定方法を解説します。

display:flexについて詳しくはこちら↓

固定幅 px指定

親要素の幅が%などの可変であっても子要素の幅をpxで指定するとブラウザ幅に関わらず幅の固定ができます。

<style>
.example{
    display: flex;
    border: 1px solid #999;
    padding: 0;
}
.example>li{
    border: 1px solid #999;
    padding: 10px;
    box-sizing: border-box;
    margin: 0;
    list-style: none;
    background: #ebfdfc;
    text-align: center;
}
.example>li:first-of-type{
    /*コレ*/width: 200px;
}
</style>
<ul class="example">
    <li>左</li>
    <li>右</li>
</ul>

tableと違い、子要素は自動的には横幅いっぱいにはなりません。

固定化していない子要素を残りの全部の幅にするには一工夫必要です。

残り全部幅 calc(100% - ○px)

片方を固定し、もう片方を残りの幅にしたい場合はcalcを使います。

calcを使うと違う単位の計算が可能です。

これを使い、「親の幅-片方の幅」を指定すると残りの幅にできます。

<style>
.example2{
    display: flex;
    border: 1px solid #999;
    padding: 0;
}
.example2>li{
    border: 1px solid #999;
    padding: 10px;
    box-sizing: border-box;
    margin: 0;
    list-style: none;
    background: #ebfdfc;
    text-align: center;
}
.example2>li:first-of-type{
    width: 200px;
}
.example2>li:last-of-type{
    /*コレ*/width: calc(100% - 200px);
}
</style>
<ul class="example2">
    <li>左</li>
    <li>右</li>
</ul>

calcについて詳しくはこちら↓

折り返し flex-wrap:wrap

子要素すべてをpx指定しても、折り返し不可にすると幅が狭くなったとき指定したpxより小さくなってしまいます。

「flex-wrap: wrap」を指定すると折り返しされ、幅は変わりません。

↓ブラウザ幅を変えると折り返されます。

<style>
.example3{
    display: flex;
    border: 1px solid #999;
    padding: 0;
    /*コレ*/flex-wrap: wrap;
}
.example3>li{
    width: 300px;
    border: 1px solid #999;
    padding: 10px;
    box-sizing: border-box;
    margin: 0;
    list-style: none;
    background: #ebfdfc;
    text-align: center;
}
</style>
<ul class="example3">
    <li>左</li>
    <li>右</li>
</ul>

まとめ

固定幅 px指定

残り全部幅 calc(100% - ○px)「親の幅-片方の幅」

折り返し flex-wrap:wrap

以上、display:flexで固定幅、残り全部幅の指定方法でした。

関連記事