online class text for web and video

webcordingカテゴリーの共通アイキャッチ画像

Flexboxとは

Flexboxの基本概念

Flexboxは、ブロックを並べる魔法のようなものです。

  1. Flexコンテナ（親の箱）：display:flex を指定した親要素のことです。この要素内でFlexboxのレイアウトが適用されます。
  2. Flexアイテム（子の箱）：Flexコンテナの中にある子要素のことです。

例えば、お弁当箱（親の箱）の中に、おかず（子の箱）を横に並べたり、縦に並べたり、ちょっと隙間を空けたり、大きさを変えたり、親の箱の中で、子の箱の並び方や大きさを簡単に調整できるのが Flexbox のイメージです。

以下のサンプルコードで「class=”oyayouso”」がついている要素がFlexコンテナ（親の箱）、「class=”koyouso”」がついている要素がFlexアイテム（子の箱）です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>シンプルなFlexboxのサンプル</title>
    <link rel="stylesheet" href="css/test.css">
</head>
<body>
    <div class="oyayouso">
        <div class="koyouso">箱1</div>
        <div class="koyouso">箱2</div>
        <div class="koyouso">箱3</div>
        <div class="koyouso">箱4</div>
        <div class="koyouso">箱5</div>
    </div>
</body>
</html>
.oyayouso {
            background-color: black;
            display: flex; /* Flexbox を使う宣言 */
            justify-content: flex-start; /* 水平方向（横）の初期値 */
            align-items: stretch;  /* 垂直方向（縦）の初期値 */
        }

        /* 子要素（Flexアイテム）のスタイル */
        .koyouso {
            margin:10px 5px;/* 子の箱の外側の余白 */
            padding: 20px;/* 子の箱の内側の余白 */
            color: #000000;/* 子の箱の文字の色 */ 
            background-color: #a8d9ea;/* 子の箱の色 */  
        }


ulのようにheaderの子要素であると同時にリストアイテム（li）の親要素になる要素もあります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlexBox</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
	<header class="oyayouso">
	<h1 class="koyouso"><a href="/">logo</a></h1>
		<ul class="koyouso oyayouso">
			<li class="koyouso">横並びリスト１</li>
			<li class="koyouso">横並びリスト２</li>
			<li class="koyouso">横並びリスト３</li>
			</ul>
	</header>
	<main>
		<section class="oyayouso">
		<div class="box koyouso">
        <h1>BOX１</h1>
    </div>
	<div class="box koyouso">
		<h1>BOX２</h1>
		</div>
		</section>
	</main>
</body>
</html>
@charset "UTF-8";
/* CSS Document */
/*============
common
=================*/
ul {
  list-style: none;
}
body {
  font-family: "Osaka-mono", "MS Gothic", "monospace";
  font-size: 18px;
  color: #333333;
  background-color: #FDF8F0;
}
h1 {
  font-size: 18px;
}
/*============
header
=================*/
header {
  width: 100%;
}
/*============
main
=================*/
main {
  height: 100vh;
}
.box {
  margin: 10px auto;
  text-align: center;
  padding: 30px;
  border-radius: 28px;
  min-width: 250px;
  box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}
/*============
Flexbox
=================*/
.oyayouso {
  width: 100%;
  max-width: 1920px;
  border: 3px dotted #4083FA;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.koyouso {
  padding: 10px 0;
  text-align: center;
  background-color: rgba(206, 18, 21, .40);
  flex-basis: 30%;
}
header ul.koyouso {
  flex-basis: 65%;
}

主なFlexboxのプロパティ

  • display: flexを親要素に設定することで、子要素がFlexboxレイアウトになります。Flexアイテムが水平方向または垂直方向に並べられます。
.oyayouso{
  display: flex;/* Flexbox を使う宣言 */
}
  • justify-contentは、アイテムの水平方向の配置を調整します（デフォルトは flex-start）
.oyayouso {
  display: flex;
  justify-content: center; /* 水平方向（横）の中央揃え */
}
  • align-items: アイテムの垂直方向の配置を調整します（デフォルトは stretch）
.oyayouso {
  display: flex;
  align-items: center; /* 垂直方向（縦）の中央揃え */
}
  • flex-wrap: アイテムがコンテナの幅を超えた場合に、折り返しの挙動を設定します。
.oyayouso{
  display: flex;
  flex-wrap: wrap; /* アイテムがコンテナを超えた場合に折り返す */
}
  • flex-direction:アイテムが並ぶ方向を指定します。（デフォルトはrow）
.oyayouso {
  display: flex;
  flex-direction: column; /* 縦方向に並べる */
}
  • align-self:特定のアイテムだけを親のalign-items設定とは異なる位置に配置する
.koyouso {
  align-self: flex-end; /* このアイテムだけ下揃え */
}

flex-box

プロパティ読み方説明初期値値補足
flex-directionフレックスディレクション要素の並び方向を指定rowrow: 横方向
column: 縦方向
row-reverse: 横方向（逆）
column-reverse: 縦方向（逆）
flex-wrapフレックスラップ要素の折り返しを指定nowrapnowrap: 折り返さない
wrap: 折り返す
wrap-reverse: 逆方向に折り返す
justify-contentジャスティファイコンテンツ主軸に沿った配置を指定flex-startflex-start: 左寄せ
flex-end: 右寄せ
center: 中央寄せ
space-between: 等間隔(両端スペースなし)
space-around: 周囲に余白を持たせる(両端は間のスペースの半分)
align-itemsアラインアイテム全てのアイテムの縦方向の配置を指定stretchstretch: 拡張（デフォルト）
flex-start: 上寄せ
flex-end: 下寄せ
center: 中央寄せ
baseline: ベースラインに揃える
align-contentアラインコンテンツ複数行がある場合の配置を指定stretchstretch: 拡張
flex-start: 上寄せ
flex-end: 下寄せ
center: 中央寄せ
space-between: 等間隔
space-around: 周囲に余白を持たせる
gapギャップアイテム間のすき間（余白）を指定010px, 1em, 5% などrow-gapとcolumn-gapの両方をまとめて指定
place-contentプレイスコンテンツalign-contentとjustify-contentのショートハンド–center centerなど複雑な配置をシンプルにまとめられる
align-selfアラインセルフ個別のアイテムの縦方向の配置を指定autoauto: デフォルトを継承
flex-start: 上寄せ
flex-end: 下寄せ
center: 中央寄せ
baseline: ベースラインに揃える
stretch: 拡張		display: flex;と同じセレクタではなく、子要素に設定。
flex-growフレックスグロウ空いているスペースをどれだけ占めるかを指定0数値（例: 0, 1）空きスペースをどれだけ占めるかを指定。子要素に設定。
flex-shrinkフレックスシュリンク縮小率を指定1数値（例: 1）空きスペースが不足したときにどれだけ縮小するかを指定。子要素に設定。
flex-basisフレックスベーシス要素の基準サイズを指定autoサイズ（例: 100px, 50%）要素の初期サイズ。具体的なサイズを指定できる。子要素に設定。
flexフレックスflex-grow, flex-shrink, flex-basisをまとめて指定0 1 auto例: flex: 1 1 100px;それぞれの値を一度に指定する。子要素に設定。
orderオーダーflexコンテナ内のflexアイテムの並び順を指定0order:1;
order:2;		左から数値が若い順に並ぶ。子要素に設定。

https://codepen.io/admin-the-sasster/pen/LYwqXVJ

PAGE TOP