HTML部分
<div class="container">
<div class="item item1">Item①</div>
<div class="item item2">Item②</div>
</div>
CSS部分
.container{width:1000px;background-color:pink;display:flex;}
.item{height:200px;}
.item1{background-color:violet;flex:1;}
.item2{background-color:yellow;flex:1;}
.measure{display:flex;}/*ものさし*/
.measure *{width:100px;height:30px; background-color:green;}
初めに
divタグはブロックボックスになります。そこで,divタグでコンテナ(内容する箱)を作ります。タグの属性displayをflexとします。
その中にブロックボックスになる要素を入れると,横並びのブロックを作ることができます。
その中で幅の配分をすることができます。初めにdivコンテナの中にITEM①②の2つのdiv要素を入れると横並びになります。
下の緑色の部分はものさしです。100pxづつ,全体で1000pxにしています。pink色の帯はコンテナです。1000pxの長さにしてあります。
100
200
300
400
500
600
700
800
900
1000
フレックスボックス実験１
item①②ともにheightを200pxにして,flex:1としています。
100
200
300
400
500
600
700
800
900
1000
フレックスボックス実験2
item①flex:1に対してitem②flex:2としています。
100
200
300
400
500
600
700
800
900
1000
item①とitem②が1:2になっています。ものさしで見ても確認できると思います。item①が333らしくなっています。
フレックスボックス実験3
item①flex:1を3としてみます。
100
200
300
400
500
600
700
800
900
1000
item①とitem②が3:2になっています。ものさしで見ても確認できると思います。item①が600になっています。