flexプロパティを使って、各アイテムの幅をより詳細に指定できます。例えば、flexプロパティを使って各アイテムの比率を変更することができます。ここでは、flexプロパティを使って、.item1と.item2の幅の比率を1:3に変更してみます。

=Html=

        <div class="container">
            <div class="item item1">Item 1</div>
            <div class="item item2">Item 2</div>
        </div>
        <div class="measure">
            <div>100</div>
            <div>200</div>
            <div>300</div>
            <div>400</div>
            <div>500</div>
            <div>600</div>
            <div>700</div>
            <div>800</div>
            <div>900</div>
            <div>1000</div>
        </div>

    

=CSS=

        .container {
            width: 1000px;
            background-color: coral;
            display: flex;
        }
        .item1 {
            background-color: rgb(226, 99, 181);
            flex: 1; /* 1つの割合 */
        }
        .item2 {
            background-color: rgb(99, 203, 226);
            flex: 3; /* 3つの割合 */
        }
        .measure {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
        }
        .measure div {
            width: 90px;
            height: 40px;
            background-color: lightgray;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #333;
            border-radius: 5px;
        }