flexboxにおけるwidthとflex-basisの違いについて

flexboxにおける幅の指定、widthとflex-basisの違いがよく理解できていません。
試しにコードを書いてみたのですが、どちらを使用しても結果が同じになります。

flexboxにおけるwidthとflex-basisの違いと、その使い分けについてご教示いただけませんでしょうか？

（試しに書いたコードは下記の通りです。）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/test.css">
</head>

<body>

    <div class="item-list">
        <div class="item">
            <div class="img-wrapper">
                <img src="img/img01.jpg" alt="">
            </div>
            <div class="txt-wrapper">
                <h2 class="txt-ttl">title</h2>
                <p class="txt">abc</p>
            </div>
        </div>
        <div class="item">
            <div class="img-wrapper">
                <img src="img/img02.jpg" alt="">
            </div>
            <div class="txt-wrapper">
                <h2 class="txt-ttl">title</h2>
                <p class="txt">abc</p>
            </div>
        </div>
        <div class="item">
            <div class="img-wrapper">
                <img src="img/img03.jpg" alt="">
            </div>
            <div class="txt-wrapper">
                <h2 class="txt-ttl">title</h2>
                <p class="txt">abc</p>
            </div>
        </div>
    </div>

.item{
    display: flex;
    flex-wrap: wrap;
}
.item-list .item:nth-of-type(2n){
    flex-direction: row-reverse;
}
.item > * {
    /* width: 50%; */
    flex-basis : 50%
    /* widthとflex-basisの違いは何？ */
}

@media(max-width: 768px) {
    .item > * {
        /* width: 100%; */
     flex-basis: 100%;
    }
 }

.img-wrapper img{
    width: 100%;
    height: 100%;
}

①width:50% または　flex-basis:50%の場合

②width:100% または　flex-basis:100%の場合

行動規範の内容に同意します

回答1件

ベストアンサー

flex-basisとwidthのどちらを使っても同じ結果になったのはflex-basisのデフォルト値がautoのためです。

flex-basisがauto
widthの値を読みに行く
widthの値をflex-basisの値にセットする

結果としてどちらも同じ結果になります。

個人的にはflex-basisが使える場合は優先してflex-basisを使って設定しています。
flex-basisを使ったほうがwidthを使うよりも明示的になるので読みやすいコードになると思っています。

参考:
https://www.w3.org/TR/css-flexbox-1/#flex-basis-property
https://gedd.ski/post/the-difference-between-width-and-flex-basis/

投稿2019/09/12 00:08

TetsuyaNegishi

総合スコア44

Silky

2019/09/12 11:50

ご回答ありがとうございます。貼っていただいたリンクも非常に参考になりました。 widthとflex-basisの双方が存在する場合はflex-basisが優先され、また特にflex-basisが設定されていない初期値autoの状態でwidthがある場合は、widthの方が優先されるんですね！また、リンク先のflex-basisはflexboxの箱に入れる前の大きさであって、入れた後の大きさは保証されていない（箱の大きさが小さいと、アイテムが縮んで大きさを担保できない）というのも勉強になりました。結局最終的に優先されるのはflex-basisなので、わざわざwidthで指定する必要ないですね。勉強になりました！ありがとうございます。

行動規範の内容に同意します