今まで、ググりながらなんとなく使っていたflexのプロパティについてそれぞれ確認してみました。子要素の横方向を伸ばして配置ベースラインは効かない??その他、flexでいろいろやってみる上下左右中央に配置する四隅に配置する子要素を折り返すか折り返さないか(flex-wrap)終わりにflexbox?cssで要素の並び順や位置を自由に指定できるものです。親要素にdisplay:flexを指定して、子要素を横並びや、左寄せ・中央寄せ・右寄せなどが簡単にできるようになっています。flexを使ういろいろな並び順をcodepenで検証してみました。子要素を横並びにする子要素を横並びにするには、display:flexを親要素に指定すると並んでくれます。横位置は左寄せになります。CodePen.子要素を縦並びにする子要素を縦並びにするには、display:flexを親要素に指定して、さらにflex-directionをcolumnに指定します。デフォルトではflex-directionがrowになっているので、横配置ですが、columnに指定すると縦配置になります。CodePen.横並び要素(flex-direction:row)の縦位置を指定する横並び要素での縦位置を検証してみました。flex-directionが行(row)か列(column)で、挙動が変わるようでした...並び順が行(row)の場合に使いそうなものを、このcodepenにまとめました。上下中央に配置するには、align-items:centerを指定します。縦位置を上に配置するには、align-items:flex-startを指定します。縦位置を下に配置するには、align-items:flex-endを指定します。縦位置を伸ばして配置するには、align-items:stretchを指定します。子要素に高さ(height)の値を指定していると効かないので、注意が必要です。stretch;子要素のコンテンツ位置を揃えて配置baselineを指定すると、子要素のコンテンツ位置を揃えて、上寄せにしてくれるようです。baselineって、flex-startと同じなの??と思って調べてみると、前述のように要素の位置をいい感じにしてくれるようでした。調べてみると、この辺に書いていました。横並び要素(flex-direction:row)の横位置を指定する横並び要素での横位置を検証してみました。justify-contentに値を設定すると並び位置を決めれます。centerを指定します。flex-startを指定します。flex-endを指定します。space-aroundを指定します。space-aroundを使って等間隔に並べた場合は最初と最後に余白が入ります。space-betweenを指定します。space-betweenを使って等間隔に並べた場合は余白が入りません。space-between;縦並び要素(flex-direction:column)の縦位置を指定する縦並び要素での縦位置を検証してみました。flex-directionが列(column)にして、justify-contentの挙動を検証してみました。行の時は、横位置が変わっていましたが、列の時は横位置が変わるようです。centerを指定します。flex-startを指定します。flex-endを指定します。space-aroundを指定します。行の時と同じで、flex-aroundは開始終了に余白が入ります。space-betweenを指定します。行の時と同じで、こちらは余白が入りません。space-between;縦並び要素(flex-direction:column)の横位置を指定する縦並び要素での横位置を検証してみました。flex-directionが列(column)にして、align-itemsの挙動を検証してみました。行の時は、縦位置が変わっていましたが、列の時は横位置が変わるようです。このcodepenにまとめました。centerを指定します。flex-startを指定します。flex-endを指定します。stretchを指定します。子要素に幅(width)の値を指定していると効かないので、注意が必要です。baseline;その他、flexでいろいろやってみる上下左右中央に配置する上下中央に配置する場合は、上記で使ったalign-itemsとjustify-contentをcenterにします。CodePen.四隅に配置する四隅に配置する場合はこんな感じで、一つ階層を深くして、一つ目をspece-betweenで左右に配置して二つ目を上下にspece-betweenすれば上手く配置できます。CodePen.子要素を折り返すか折り返さないか(flex-wrap)並べた子要素を折り返すか折り返さないかはflex-wrapで指定できます。逆にして折り返す試してみました。CodePen.終わりにtableやfloatでレイアウトしていた頃に比べたら、簡単にタグを並べたりできるのでいいですね..まだよく理解できてない箇所が多々あるので、今後も発見があればこの記事を更新したいと思います...🤯html&cssWebシェアするTwitterFacebookはてブPocketLINEコピーyasuakiをフォローするyasuakiコードライクhtml&cssHTML/CSSの学習におすすめの本3選!【エンジニア選定】HTML/CSSの学習におすすめの本を3つ紹介しています。最初にHTML/CSSについて簡単に説明して、その後におすすめの本を紹介しました。最後にHTML/CSSを「どの本で学ぶのが良いか」の考察をまとめています。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Δプロフィールyasuaki福岡でフリーランスをやってます。業界歴13年になりました、SESで働くことがほとんどです。なんでもやってますが、Webが得意です。このブログではプログラミング技術の内容を中心に、たまに商品レビューとかを書いています。商品レビューゲーム食レポお問い合わせホーム検索トップサイドバータイトルとURLをコピーしました。