display: flex を使ってヘッダー、均等並びのボックスを実装


See the Pen flex ヘッダー等の横棒をそろえる二段 by nakanishi (@nakanishi) on CodePen.

//赤い要素に幅があれば、
//横に詰めていって、入らなくなったら wrap する指定
//ラップした上で横方向均等揃えになる

.flex-box
width: 200px
background-color: blue
//おやう要素に flex を指定
display: flex
//横並びを指定する
flex-direction: row
//左、右は詰めて、あとは均等揃え
justify-content: space-between
//垂直方向を真ん中揃え
align-items: center
//折り返しを許可
flex-wrap: wrap

&__item
width: 50px
height: 10px
background-color: red
border: solid 1px black

See the Pen flex ヘッダー等の横棒をそろえる by nakanishi (@nakanishi) on CodePen.

.title
font-size: 60px
color: yellow
text-align: center

.flex-box
//flex-box を指定する要素には幅を指定する。
//絶対指定する必要はないが、その幅の中で配置が決まる
width: 640px
background-color: blue
//おやう要素に flex を指定
display: flex
//横並びを指定する
flex-direction: row
//左、右につめて、あとは均等揃え
justify-content: space-between
//垂直方向を真ん中揃え
align-items: center

//display: flex した対象の
//子要素には何も指定しなくていい
&__item
width: 150px
height: 10px
background-color: red
border: solid 1px black

Leave a Reply

Your email address will not be published. Required fields are marked *