おぼえられないから

ただただ自分の覚え書きのためです。

個人的な覚書なので見ても役に立ちませんよ。

Flexbox

HTML
<ul class="親要素名”>
    <li class="子要素名">アイテム1</li>
    <li class="子要素名">アイテム2</li>
    <li class="子要素名">アイテム3</li>
    <li class="子要素名">アイテム4</li>
</ul>


親要素がflexコンテナーであれば自動で子要素アイテムとして扱われます。とも言われていますが、うまく動作しなかったので、上記要素名にしてあります。

CSS
.要素名 {
    display: flex;
}

これだけで、縦列で並んでいた子要素が左から順に横ならびになります。

リストタグは子要素の前に「●」がつくので
親要素のスタイルに 
list-style: none; 
を書いて消す。 



ここからは親要素の指定で子要素のならびを変化させるプロパティの紹介
justify-content: flex-start 左詰めで左から順番
justify-content: flex-start 右詰めで左から順番
justify-content: center 子要素が中央揃え
justify-content: space-between 親要素コンテナに均一配置

このほかにも子要素コンテが親要素の幅を超えると改行するプロバティなど
いろいろなレイアウトに適したプロパティがある。

参考サイト
まだfloat使ってる?CSSのFlexboxを徹底解説!

コメント

コメントフォーム
評価する
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット