Flexbox

2020年3月29日

まだ日付は変わってないけど、
もう１記事追加

Flexboxをつかって要素を横並びにしたりなんだりかんだり。

• Flexboxを使う場合は親ボックスと子ボックスが必要。
• 子ボックスに内容を書き、親ボックスにdisplay:flex;を指定。

これで横並びにできる。

親要素に指定できるプロパティとしては以下

■flex-directionプロパティで配置する向きも指定可能。

• row 右から左
• row-reverse 左から右
• column 上から下
• column-reverse 下から上

■flex-wrapプロパティで折り返しの指定

• nowrap 折り返ししない
• wrap 上から下に折り返し
• wrap-reverse 下から上に折り返し

■flex-flowプロパティを使えばflex-directionとflex-wrapを一度に設定できる

• flex-flow:row wrap;

■justify-contentプロパティで水平方向の配置の指定

• flex-start 左揃え
• flex-end 右揃え
• center 中央揃え
• space-between 両端はスペースを開けずに配置、残りは均等に配置
• space-around 全て均等に配置

■align-itemsプロパティは垂直方向の配置の指定

• stretch 上下の余白を埋めるように配置
• flex-start 上揃え
• flex-end 下揃え
• center 中央揃え
• baseline ベースラインに合わせて

子要素に指定できるプロパティ

• order 子要素の並び順を指定
• flex-grow 子要素の伸び率を指定
• flex-shrink 子要素の縮み率を指定
• flex-basis 子要素のベース幅を指定
• flex 伸び率、縮み率、ベース幅を一括で指定
• align-self 子要素の垂直方向の配置を指定

そんなところで、、、