2020.5.10【NEW】フレックスボックスで柔軟なレイアウトつくりcsshtmlFlexbox(フレックスボックス)は、CSSの新しいレイアウト技法で、ブロック要素を簡単に横並びにすることができます。従来のfloat-leftで横並びするよりも遥かに便利です。「ブロック要素」は親要素に、display:flexを追加してください。「インライン要素」の場合は親要素に、display:inline-flexを指定します。</div>上記の指定をすると子要素がフレックスアイテムになります。flex-wrapflex-wrapを指定するとフレックスアイテムを一行に並べるか、複数行に並べるか指定できます。table-cellみたいなイメージです)Floatと違い親要素の幅を超えた場合でも改行しませんので、新たにプロパティを追加する必要があります。</div>フレックスアイテムを1行に収めることができますフレックスアイテムが一行に収まらない際に複数行にすることができますPOINT)flex-wrap:wrapを指定していない場合、子要素にwidth:30%を設定すると縮んで一行に収まります。flex-directionflex-directionはフレックスアイテムの並ぶ方向を指定することができます。POINT)奇数だけ逆向きの指定をすれば、とても簡単に互い違いのレイアウトにすることができます。justify-contentjustify-contentはフレックスアイテムをどのように配置するか指定できます。左寄せにしたり中央寄せ(フレックスアイテムは等間隔のまま)にすることができます。align-itemsalign-itemsを指定するとフレックスアイテムの位置する高さを揃えたりできます。ヘッダーなどで使い勝手がいいです。子要素の幅を指定できます。※flex-basis、widthがどちらとも設定されている場合は、flex-basisの設定値が優先。Orderフレックスアイテムの順番をばらばらに入れ替えるすることができます。</div>このように順番を指定できます。flex-basisflex-basisは、widthと同じ意味です。※flex-basis、widthがどちらとも設定されている場合は、flex-basisの設定値が優先されますのでお忘れなく。※残りの空間とは、フレックスコンテナーの寸法からすべてのフレックスアイテムの寸法を引いたものを指します。flex-shrinkフレックスアイテムの縮小係数を指定できます。初期設定値(伸縮なし)は「0」です。</div>イメージ画像いかがでしたでしょうか。参考になれば感激です。リッキー10分でできる!WordPressのローカル環境が簡単に構築できる「Local」の使い方wordpress。