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?

More than 3 years have passed since last update.

CSSの横並びのやり方

Posted at

displayで横並び

  • display: block; 指定された要素は、ブロックレベル要素として表示
  • display: inline; 指定された要素は、インライン要素として表示
  • display: inline-block; 指定された要素は、並びはインライン要素だが、中身はブロックレベル要素として表示
  • display: flex; 指定された要素の子要素が横並び
  • display: none; 指定された要素は、非表示

justify-contentの使い方

  • justify-content: flex-start; 左寄せ
  • justify-content: flex-end; 右寄せ
  • justify-content: center; 中央寄せ
  • justify-content: space-between; 両端が左右に寄り、等間隔
  • justify-content: space-around; 両端が左右に寄り、等間隔、両端の余白と要素間の余白が1:2

align-items

align-items: ◯◯;といった形で表記し、display: flex;と併せて使用
(例)

  • align-items: flex-start; 上揃え
  • align-items: flex-end; 下揃え
  • align-items: center; 中央揃え

flex-direction

  • flex-direction: row; 左から右に並べる
  • flex-direction: row-reverse; 右から左に並べる
  • flex-direction: column; 上から下に並べる
  • flex-direction: column-reverse; 下から上に並べる
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
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?