Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@shihodaru(Shiho Naganuma)

フレックスボックス復習

Posted at

フレックスボックスとは？

ブロックボックスは縦に並んでいる

（例）h1〜h6 p ul

ブロックボックス縦に並ぶ.png

■フレックスボックス

フレックスボックスはブロックボックスを横並びに出来る

“ul” “li” のブロックボックスの時の並び

縦並びになる

ブロックボックスの時.png

“ul” “li” のフレックスボックスの時の並び

ブロックボックスが横並びになる

li_横並び.png

■Flexbox（フレックスボックス）の2ステップ

①横並びにしたい親要素を確認する
②親要素に display:flex; を指定する

“ul” “li” の場合は
“ul”が親要素で
“li”が子要素
子要素 ”li” を横並びにしたい場合

HTML

HTML.png

CSS

CSS.png

横並びになる

li_横並び.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?