「新HTML/CSS入門講座」でflexboxを学習したのでまとめます。
基本は箱を作って、その中にまた箱を並べるイメージです。
html
<div class="container">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
css
.container {
display: flex;
}
.box1 {
flex: 1;
}
.box2 {
flex: 2;
}
.box3 {
flex: 1;
}
このようにすると、box1,box2,box3を1：2：1の割合で横並びにできます。
便利なチートシートを見つけました☟解説も丁寧です。
日本語対応！CSS Flexboxのチートシートを作ったので配布します。
