フレックスボックスの基本と使い方解説
フレックスボックスの使い方について、詳細に解説します。この記事では、基本的な概念から応用的な設定まで、順を追ってご紹介します。また、説明内容を補足する図としてアスキーアートを活用していますので、理解が深まることでしょう。
イントロダクション
フレックスボックス（flexbox）は、CSSレイアウトモジュールの一つで、コンテンツを効果的に揃えて配置できる機能を提供します。まずは、基本的な用語とコンセプトについて見ていきましょう。
フレックスコンテナとフレックスアイテム
フレックスボックスを使うためには、まず親要素（フレックスコンテナ）と子要素（フレックスアイテム）を設定する必要があります。
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
フレックスディレクション（flex-direction）
フレックスディレクションは、フレックスコンテナ内のアイテムが並ぶ方向を指定します。
例:
- Row（デフォルト・横並び）
- Column（縦並び）
- Row-reverse（逆横並び）
- Column-reverse（逆縦並び）
.container {
display: flex;
flex-direction: row; /* ここをcolumnなどに変更 */
}
- 横並び（Row）
1 2 3 4 5
- 縦並び（Column）
1
2
3
4
5
フレックスラップ（flex-wrap）
フレックスラップは、フレックスアイテムがコンテナの幅を超えた際に折り返すかどうかを指定します。
.container {
display: flex;
flex-wrap: wrap;
}
- 折り返しなし（nowrap）
┌──────────────────────────────┐
| 1 2 3 4 5 6 7 8 9 10 |
└──────────────────────────────┘
- 折り返しあり（wrap）
┌───────────────┐
| 1 2 3 4 5 |
| 6 7 8 9 10|
└───────────────┘
ジャスティファイコンテント（justify-content）
フレックスコンテナ内のアイテムを水平方向にどのように配置するかを指定します。
.container {
display: flex;
justify-content: center; /* flex-start, flex-end, space-between, space-aroundなど */
}
- 左揃え（flex-start）
1 2 3 4 5 (left-aligned)
- 真ん中揃え（center）
1 2 3 4 5 (center-aligned)
- 右揃え（flex-end）
1 2 3 4 5 (right-aligned)
アラインアイテムズ（align-items）
フレックスコンテナ内のアイテムを垂直方向にどのように揃えるかを指定します。
.container {
display: flex;
align-items: center; /* flex-start, flex-end, baseline, stretchなど */
}
- 上揃え（flex-start）
1 1
─────── -----------------
2 2
─────── -----------------
3 3
─────── -----------------
4 4
─────── -----------------
5 5
- 真ん中揃え（center）
1 1
─────── -----------------
2 2
─────── -----------------
3 3
─────── -----------------
4 4
─────── -----------------
5 5
実際のレイアウト例
さあ、ここから実際のレイアウトを作成してみましょう。まずは基本のHTMLとCSSを記述します。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
</div>
</body>
</html>
CSS
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
max-width: 500px;
background-color: steelblue;
height: 200px;
margin: 0 auto;
}
.item {
flex: 1;
margin: 0 10px;
background-color: yellow;
padding: 10px;
text-align: center;
}
この設定で、フレックスアイテムが均等に並び、コンテナ内の配列がわかりやすく表示されるようになります。
まとめ
フレックスボックスは、デザインに柔軟性を持たせるための非常に強力なCSSツールです。この記事では、フレックスディレクション、フレックスラップ、ジャスティファイコンテント、アラインアイテムズなど、基本的なプロパティについて説明しました。これらを使いこなすことで、様々なレイアウトを簡単に実現できるようになります。
_______
| |
1 2 3 4 5 |
| |
| |
| |
- さらに詳細な情報が必要な方は、公式ドキュメントや他のリソースを参照してください。引き続き、さまざまなレイアウトを試みて、自分のものにしていきましょう。
タイムスタンプ
1 00:00:01,300 --> 00:00:06,370 [音楽]
2 00:00:03,620 --> 00:00:06,370 me
3 00:00:06,700 --> 00:00:10,710 [音楽]
4 00:00:10,970 --> 00:00:20,910 もっと増えるすごくいいましょうか
5 00:00:15,210 --> 00:00:25,370 rex ボックス基礎点上がっただけだと思いますのでもう少し詳しく
6 00:00:20,910 --> 00:00:29,699 fx ボックスドア使い方を見ていきましょう
7 00:00:25,370 --> 00:00:35,870 実際のレイアウトだともう少しですね並べ方をしてた方か
8 00:00:29,699 --> 00:00:35,869 いろんなパターンに対応できますのであのいいかなと思います
9 00:00:36,539 --> 00:00:44,259 フレックス今ディナーに関するプロパティ
10 00:00:38,979 --> 00:00:46,589 えっと外側ですねフレックスコンテナーに関するプロパティについてちょっと見ていき
11 00:00:44,259 --> 00:00:50,109 ますね
12 00:00:46,590 --> 00:00:55,510 例えばまずはフレックスディレクション
13 00:00:50,109 --> 00:00:56,409 アイテムの並び方っていうのはありますフレックスディレクションローってやると a
14 00:00:55,509 --> 00:00:59,679 8
15 00:00:56,409 --> 00:01:03,969 まあでフォルダーと個4個並んでくれますね
16 00:00:59,679 --> 00:01:05,198 これは何も書かなくても横になりますのでこれは最初から聞いてるっていうことなん
17 00:01:03,969 --> 00:01:09,000 ですけれども
18 00:01:05,198 --> 00:01:11,379 例えばこの縦に並べたいフレックス
19 00:01:09,000 --> 00:01:17,079 アイテムをですね
20 00:01:11,379 --> 00:01:19,949 縦に並べたい場合というのはフレックス時レクション絡むと書いてあげると
21 00:01:17,078 --> 00:01:29,359 を縦に並んでくれますこれはね
22 00:01:19,950 --> 00:01:34,219 ねフレックス空振りバースってやるとこれが54321と逆に並んでくれるんですね
23 00:01:29,359 --> 00:01:37,629 同様にですねフレックスリバースって行ってあげるとエッこういうふうに逆に並んで
24 00:01:34,219 --> 00:01:37,629 くれたりします
25 00:01:37,920 --> 00:01:41,640 それがフレックスでいいでしょ
26 00:01:40,049 --> 00:01:45,239 フレックスラップ
27 00:01:41,640 --> 00:01:51,269 というものがありますフレックスラップに関しては
28 00:01:45,239 --> 00:01:53,728 えっと縮めるとですでブラウザのサイズを縮めていくとこう123縮まるじゃないです
29 00:01:51,269 --> 00:02:00,199 かここでねそうすると下にこう
30 00:01:53,728 --> 00:02:03,299 ボックスが落ちてくれますをしてくれて4と5頭並んでくれるわけですね
31 00:02:00,200 --> 00:02:05,740 フレックスラップリバースってやると
32 00:02:03,299 --> 00:02:09,129 越冬を折り返したっ
33 00:02:05,739 --> 00:02:14,919 小さくやっぱした時にこんな並び123
34 00:02:09,129 --> 00:02:18,329 しっこという逆の並び方になってくれます
35 00:02:14,919 --> 00:02:18,329 これがフレックスラップです
36 00:02:18,759 --> 00:02:26,199 あとはジャスティファイコンテントでありますね
37 00:02:23,080 --> 00:02:30,760 あの普通は左揃えにこう
38 00:02:26,199 --> 00:02:34,209 ボックスに対して左になってくれるんですけどもフレックスエンドっていうのをつける
39 00:02:30,759 --> 00:02:38,259 とこれは右側によってくれますね
40 00:02:34,210 --> 00:02:41,640 センターまあよくこういう場合ありますので真ん中にしたいときっていうのは
41 00:02:38,259 --> 00:02:46,370 フレックスセンターにすると真ん中ぞ0になってくれます
42 00:02:41,639 --> 00:02:46,369 こことここがまあ均等になってくれるということですね
43 00:02:47,979 --> 00:02:53,349 でスペース1位ん
44 00:02:50,870 --> 00:02:55,280 ありますけれどもこれは
45 00:02:53,349 --> 00:02:59,180 各ボックス
46 00:02:55,280 --> 00:03:02,568 が均等に並んでいる感じですね
47 00:02:59,180 --> 00:03:07,400 で一番端っこにつけてちょっとこれだと別れてないんですけども
48 00:03:02,568 --> 00:03:15,049 一番初めはピタッとつけてそれで並んでくれます
49 00:03:07,400 --> 00:03:17,719 スペーサーラウンドっていうのはポコの感覚左はじを開けて後右端も開けてで等間隔に
50 00:03:15,050 --> 00:03:19,050 並んでくれちょっとこの図だとですね
51 00:03:17,719 --> 00:03:23,840 少しアバウトなんてはか
52 00:03:19,050 --> 00:03:28,849 んじゃないんですけれどもスぺーサードっていうのはこんな感じ
53 00:03:23,840 --> 00:03:30,590 ジャスティファイ content これよく使いますのでえっと覚えておくといいか
54 00:03:28,848 --> 00:03:33,560 もしれないですね例えば
55 00:03:30,590 --> 00:03:36,170 グローバルメニュー3時に並べたいとか
56 00:03:33,560 --> 00:03:38,170 グローバルメニューでのサイトの
57 00:03:36,169 --> 00:03:42,000 一番上にある部分ですね
58 00:03:38,169 --> 00:03:42,000 そういう時に使ったりします
59 00:03:43,150 --> 00:03:49,989 align 相手ミスこれもよく使いますね
60 00:03:46,719 --> 00:03:55,628 新井アイテムズっていうのは普通は
61 00:03:49,989 --> 00:04:00,340 ボックスに対してストレッチ全部で中のボックスって引っ張られて伸びてくれるんです
62 00:03:55,628 --> 00:04:03,139 ねまぁこれがいい場合もあるんですけれどもそうじゃなくて上にぴったり
63 00:04:00,340 --> 00:04:04,950 このボックスのサイズがまんまくっつけたいなんていうとき
64 00:04:03,139 --> 00:04:09,068 もあるわけです
65 00:04:04,949 --> 00:04:16,479 そうするとフレックススタートとかフレックスエンドとかね
66 00:04:09,068 --> 00:04:19,599 にして上にしたりしたにしたりということを調整することができます
67 00:04:16,480 --> 00:04:23,139 そして一番使うのがですね
68 00:04:19,600 --> 00:04:26,350 個人的に使う機会は多かったのかもしれないですけれども
69 00:04:23,139 --> 00:04:28,968 あの子のセンターというやつですね
70 00:04:26,350 --> 00:04:32,599 ここボックスに対して
71 00:04:28,968 --> 00:04:38,528 色がたボクサー真ん中に寄せたいというときは結構あるんですよ
72 00:04:32,598 --> 00:04:44,209 その時は align アイテムズのセンターにしてあげるとこう
73 00:04:38,528 --> 00:04:46,848 縦長のボックスがあったときにそこの真ん中に育ってくれてやっけ
74 00:04:44,209 --> 00:04:50,789 でベースラインはこの用いのはベースに揃ってくるんですね
75 00:04:46,848 --> 00:04:52,990 後実際とか違っても文字の下のところでそろってくれる
76 00:04:50,790 --> 00:04:59,350 という感じです
77 00:04:52,990 --> 00:05:02,220 はいまあまあ他にもですね実はいろいろあるんですけれどもこれだけ覚えておけば
78 00:04:59,350 --> 00:05:05,250 とりあえず大丈夫です
79 00:05:02,220 --> 00:05:11,810 のでえっここからですね
80 00:05:05,250 --> 00:05:11,810 実際に書いてみて行動どんな動きになるか一緒に見ていきましょう
81 00:05:15,819 --> 00:05:24,550 ではデモンストレーションいきましょうかここから皆さん一緒にやってくださいねで
82 00:05:20,889 --> 00:05:26,728 えっと的ステージたを擁していただいて
83 00:05:24,550 --> 00:05:31,139 new ファイルを作ります
84 00:05:26,728 --> 00:05:33,789 名前はもわぁフレックス1. htm
85 00:05:31,139 --> 00:05:41,759 にします
86 00:05:33,790 --> 00:05:45,220 そしたら8 ca 節の腫脹に作っちゃいましょうね new ファイルの保存でもは
87 00:05:41,759 --> 00:05:47,430 フレックス一度と cs です
88 00:05:45,220 --> 00:05:50,689 を作りましょう
89 00:05:47,430 --> 00:05:54,829 そしてですねじゃあ html
90 00:05:50,689 --> 00:05:59,100 作りますね5つのボックスを用意しましょうか
91 00:05:54,829 --> 00:06:08,240 じゃあ html 食べで作って
92 00:05:59,100 --> 00:06:10,240 ボディの中にですねコンテナーを作りましょうかまずは音ディヴクラスのごるコンテナ
93 00:06:08,240 --> 00:06:11,629 で
94 00:06:10,240 --> 00:06:14,629 鑑定なぁ
95 00:06:11,629 --> 00:06:21,439 その中にリブのクラスの
96 00:06:14,629 --> 00:06:25,269 アイテム1ですかね中にはた大地と書いておいてください
97 00:06:21,439 --> 00:06:25,269 これを5つ作ります
98 00:06:25,310 --> 00:06:30,389 中尾クラス名を
99 00:06:28,110 --> 00:06:31,600 変えていきましょうかねっ
100 00:06:30,389 --> 00:06:34,139 2
101 00:06:31,600 --> 00:06:34,140 3
102 00:06:34,480 --> 00:06:43,480 otto
103 00:06:36,709 --> 00:06:48,870 これでできましたまず保存しますじゃあこれをブラウザで見てますね
104 00:06:43,480 --> 00:06:54,720 オープンブラウザで見ると123 c を並んでいます
105 00:06:48,870 --> 00:06:56,550 こちらはできているようですこれで html の準備は完了と
106 00:06:54,720 --> 00:06:59,750 じゃあ
107 00:06:56,550 --> 00:07:04,730 この css ですね ca 雪
108 00:06:59,750 --> 00:07:12,240 の設定ですけどその前にじゃあここでリンクを書いておきましょうかスタイルシートへ
109 00:07:04,730 --> 00:07:15,580 のリンクでもわーぷれっくす1. css へのリンクを作りました
110 00:07:12,240 --> 00:07:18,389 これでこちら側の css に
111 00:07:15,579 --> 00:07:23,839 リンクしましたので
112 00:07:18,389 --> 00:07:27,500 ここで書いていったものが反映されるわけですね今って言うな
113 00:07:23,839 --> 00:07:30,619 8ちょっと幅をですねどれがしましょうか
114 00:07:27,500 --> 00:07:33,129 マックスイーツで
115 00:07:30,620 --> 00:07:33,129 ここは
116 00:07:33,139 --> 00:07:37,759 500ぐらいにしておきましょうかとりあえずねあとで買えるかもしれないですけれど
117 00:07:36,560 --> 00:07:38,728 も
118 00:07:37,759 --> 00:07:41,879 で
119 00:07:38,728 --> 00:07:46,120 background の色も入れておきましょう
120 00:07:41,879 --> 00:07:52,660 ちょっと見やすいをスチールブルーかなんか切れて
121 00:07:46,120 --> 00:07:55,569 置きますまずはこれで保存してふさわしいと聞いてそうですね
122 00:07:52,660 --> 00:07:57,600 で500ピクセルになっています
123 00:07:55,569 --> 00:07:59,360 こうすると
124 00:07:57,600 --> 00:08:01,820 ちっちゃくなると
125 00:07:59,360 --> 00:08:02,840 ここプレジャーなんですけどね
126 00:08:01,819 --> 00:08:06,540 ゲイ
127 00:08:02,839 --> 00:08:11,009 じゃあこれ500ピクセルになりました次は
128 00:08:06,540 --> 00:08:17,470 この html の中がを今このコンテナつくりましたよね
129 00:08:11,009 --> 00:08:19,248 アイテムの1234後に関して作ってまいりますアイテムの
130 00:08:17,470 --> 00:08:23,490 沿線6市
131 00:08:19,249 --> 00:08:26,528 で8バックグラウンドが
132 00:08:23,490 --> 00:08:29,038 ここはですねえろーにしてみましょうか
133 00:08:26,528 --> 00:08:29,038 言えるので
134 00:08:30,759 --> 00:08:39,870 ってバック grand アイテム1アイテムにアイテムさん
135 00:08:34,418 --> 00:08:39,870 開いてみよう相手の子までを作ります
136 00:08:44,590 --> 00:08:48,210 5
137 00:08:45,519 --> 00:08:48,210 ねこれちょっと
138 00:08:48,269 --> 00:08:55,309 i バックグラウンドねイエローっていうのを
139 00:08:52,039 --> 00:08:58,909 全部に入れるのちょっと冗長ですねこれ
140 00:08:55,309 --> 00:09:01,429 冗長というのこうだ振り過ぎているってことですよね
141 00:08:58,909 --> 00:09:07,730 これはどうしましょうか
142 00:09:01,429 --> 00:09:15,370 えっとちょっと決して今回はディ2分全てにつければ
143 00:09:07,730 --> 00:09:20,329 バックグラムの色良さそうですよねあの子二宮の背景色このようにしてみましょう
144 00:09:15,370 --> 00:09:24,289 そうすると全部イエローんだってあのスティールブルーがー
145 00:09:20,328 --> 00:09:29,938 見えなくなっちゃいましたけどこれを後ろ側にあるんですね
146 00:09:24,289 --> 00:09:35,308 とりあえずバックグラウンドで後 css の準備ができました
147 00:09:29,938 --> 00:09:40,809 ではではこの絵馬はですねここはフレックスボックスになってないので
148 00:09:35,308 --> 00:09:44,620 フレックスボックスの設定をしますここがディスプレイのフレックス
149 00:09:40,809 --> 00:09:47,528 こうするとフレックスになってくれますね
150 00:09:44,620 --> 00:09:48,840 1234後並びました
151 00:09:47,528 --> 00:09:50,139 んですね
152 00:09:48,840 --> 00:09:57,310 でっ
153 00:09:50,139 --> 00:09:58,409 それぞれに設定をしていくわけですけれどもこれはどうしましょうかでフレックス
154 00:09:57,309 --> 00:10:01,979 1
155 00:09:58,409 --> 00:10:04,189 割合は全部市にしましょう
156 00:10:01,980 --> 00:10:04,190 1
157 00:10:05,938 --> 00:10:11,579 1フレックス市フレックス1
158 00:10:09,350 --> 00:10:13,528 外間均等になって
159 00:10:11,580 --> 00:10:16,910 くれますね
160 00:10:13,528 --> 00:10:19,000 均等になってくれて
161 00:10:16,909 --> 00:10:21,799 見やすい状況に
162 00:10:19,000 --> 00:10:26,958 なったと思います
163 00:10:21,799 --> 00:10:28,509 これがですねちょっと待っちゃうとマジなんで自分にマージンをつけましょうか
164 00:10:26,958 --> 00:10:31,929 margin 左右
165 00:10:28,509 --> 00:10:35,850 町議は0左右は
166 00:10:31,929 --> 00:10:35,849 10 p x つけてみましょう
167 00:10:37,458 --> 00:10:43,979 これで12345
168 00:10:40,549 --> 00:10:48,649 というボックスがまぁ見やすくなりましたよね
169 00:10:43,980 --> 00:10:48,649 じゃあここで動きを確かめてみましょうか
170 00:10:50,049 --> 00:10:55,909 ではいきますまずはですねフレックス dx しょん
171 00:10:54,159 --> 00:11:00,889 このディスプレイの
172 00:10:55,909 --> 00:11:01,759 a ところこのコンテナーにつける今はプロパティなのでこのフレックス
173 00:11:00,889 --> 00:11:05,449 ディレクション
174 00:11:01,759 --> 00:11:09,250 ハイフンリレーくしょおありましたね
175 00:11:05,450 --> 00:11:09,250 これローンにすると
176 00:11:09,490 --> 00:11:17,039 変わらないんですよねこれデフォルトだから
177 00:11:12,809 --> 00:11:19,859 でロー撮ろうの配布リバースっていうのが
178 00:11:17,039 --> 00:11:20,779 いますこうするとどうなるか
179 00:11:19,860 --> 00:11:23,000 ねぇ
180 00:11:20,779 --> 00:11:25,319 54321
181 00:11:23,000 --> 00:11:27,089 変わりましたリバーしましたねー
182 00:11:25,320 --> 00:11:31,910 今度は
183 00:11:27,089 --> 00:11:31,910 フレックスディレクションをカラムにすると
184 00:11:32,889 --> 00:11:41,970 縦並びになりました
185 00:11:36,610 --> 00:11:41,970 わかりますよねでから分リバースにすると
186 00:11:42,419 --> 00:11:49,889 どうなるでしょう
187 00:11:44,009 --> 00:11:57,659 逆になりましたねそうそうフレックスディクションっていうのは横並びとか縦並びを
188 00:11:49,889 --> 00:12:02,338 指定することができてそれを順番をね逆にしたりすることができると言うわけです
189 00:11:57,659 --> 00:12:04,610 これどういう時に使うかっていうとたとえばそのなんだろうな
190 00:12:02,339 --> 00:12:04,610 ホント
191 00:12:05,179 --> 00:12:08,620 と
192 00:12:06,399 --> 00:12:10,189 フレックス
193 00:12:08,620 --> 00:12:12,289 デザインとあるじゃないですか
194 00:12:10,190 --> 00:12:15,300 あのレスポンシブデザインですね
195 00:12:12,289 --> 00:12:17,309 レスポンシブデザインの時に
196 00:12:15,299 --> 00:12:21,028 大きい
197 00:12:17,309 --> 00:12:23,339 web side の場合は横並びに見せたい
198 00:12:21,028 --> 00:12:28,529 例えばカードとかね
199 00:12:23,340 --> 00:12:31,070 この横並べ見せたいんだけれどもスマホにしてちっちゃくするした場合は
200 00:12:28,529 --> 00:12:32,850 重ねたいする気あるんですよ
201 00:12:31,070 --> 00:12:34,400 そういう時に
202 00:12:32,850 --> 00:12:37,939 この
203 00:12:34,399 --> 00:12:39,870 レスポンシブのまあ指定があるんですが
204 00:12:37,938 --> 00:12:42,860 ちっちゃくなったときは
205 00:12:39,870 --> 00:12:49,360 フレックスディレクションをカラムにしなさい
206 00:12:42,860 --> 00:12:52,720 って大きい時はフレックスディレクションをローにしなさいっていうような
207 00:12:49,360 --> 00:12:57,899 変更することで会ドレス帽子もね
208 00:12:52,720 --> 00:12:57,899 まあコントロールすることができるんですねそういう時に使います
209 00:12:58,309 --> 00:13:10,049 さて続いていってみましょうか8次はですねエフレックスラップ
210 00:13:04,200 --> 00:13:12,810 ですねウェクスラーアップの方は弱ちょっとフレックスゼーションコレコメンターとし
211 00:13:10,049 --> 00:13:19,588 て元に戻してですね
212 00:13:12,809 --> 00:13:20,549 サイズの方をずっと線にあそうですね抱えてこれがしておきましょうか
213 00:13:19,589 --> 00:13:24,950 で
214 00:13:20,549 --> 00:13:24,949 8ですねそしたら
215 00:13:25,220 --> 00:13:33,440 フレックスラップに関してはですね
216 00:13:28,429 --> 00:13:36,699 あのつけてもたとえば今これをつけていますね
217 00:13:33,440 --> 00:13:40,690 フレックス i 分
218 00:13:36,700 --> 00:13:46,360 とですね no ラップこれが
219 00:13:40,690 --> 00:13:47,939 no ラップっていうのがあのデフォルトなんですけれどもこれをですね
220 00:13:46,360 --> 00:13:52,229 でフォルダーとこう
221 00:13:47,938 --> 00:13:56,360 折り返さない勢理客しても折り返さないっていうことです
222 00:13:52,229 --> 00:13:58,030 これをラップに変更してみるとどうなのか見てみましょう
223 00:13:56,360 --> 00:14:04,779 ラップ
224 00:13:58,029 --> 00:14:09,679 そうするとこれが折り返すかっていうとは折り返さないですねこれはえってこの
225 00:14:04,779 --> 00:14:15,049 アイテム一つ一つに幅がついていないと
226 00:14:09,679 --> 00:14:18,149 ここ折り返し機能って使えないんですよなのでこの6レックスのアイテムに関してここ
227 00:14:15,049 --> 00:14:22,049 で幅をとりあえず入れてみますね
228 00:14:18,149 --> 00:14:27,669 a ここでですねフレックスのアイテムに関して幅は
229 00:14:22,049 --> 00:14:33,539 フレックスベイシーズっていうのでつけられますこれで200ピクセル
230 00:14:27,669 --> 00:14:33,539 ということにしときましょうかでこれ全部に入れます
231 00:14:34,710 --> 00:14:37,050 でしょ
232 00:14:36,120 --> 00:14:41,339 で
233 00:14:37,049 --> 00:14:47,149 更新してみるとうん折り返しているのがわかると思います
234 00:14:41,339 --> 00:14:48,860 ラップしてますねこれをこう縮めてきたどんどんね
235 00:14:47,149 --> 00:14:52,829 折り返してくれると
236 00:14:48,860 --> 00:14:56,629 伸ばすとこのせんだからまあここまでは
237 00:14:52,830 --> 00:15:01,370 マックスイーツが戦なんで4つまでは並ぶけれども
238 00:14:56,629 --> 00:15:04,740 高専よりちっちゃくなっていくとどんどん折り返してくれるわけですね
239 00:15:01,370 --> 00:15:08,539 そうこれがフレックスラップで
240 00:15:04,740 --> 00:15:08,539 リバースもありますよと
241 00:15:09,379 --> 00:15:16,539 そうすると反対になってます123したから12345
242 00:15:14,359 --> 00:15:19,200 になっているのがわかります
243 00:15:16,539 --> 00:15:21,829 これがフレックス
244 00:15:19,200 --> 00:15:21,830 ラップです
245 00:15:22,419 --> 00:15:29,448 では次ジャスティファイコンテントっていうねやってみましょうか
246 00:15:26,710 --> 00:15:33,960 ジャスティファイ content
247 00:15:29,448 --> 00:15:37,740 これはですねフレックススタートっていうのが
248 00:15:33,960 --> 00:15:40,259 デフォルトになっていますこちらを
249 00:15:37,740 --> 00:15:42,269 ジャベのリバースは寝取っちゃいましょうか
250 00:15:40,259 --> 00:15:44,339 これで見ると
251 00:15:42,269 --> 00:15:51,860 横並びになっている
252 00:15:44,339 --> 00:15:58,769 わけですねこれを8左付に人に右付けにしたりして確かめてみたいんですけどこれは
253 00:15:51,860 --> 00:16:01,190 そうですね今のこのフレックスアイテムの設定だとうまく表現することができないので
254 00:15:58,769 --> 00:16:07,759 またここを開いてみましょうか
255 00:16:01,190 --> 00:16:10,010 このフレックス1というのはこちらはじゃあコメントアウトしておきましょう
256 00:16:07,759 --> 00:16:12,379 x1フレックス1ね
257 00:16:10,009 --> 00:16:16,569 こちらコメントアウトして
258 00:16:12,379 --> 00:16:21,698 あとこの200っていうところも
259 00:16:16,570 --> 00:16:29,259 502会えましょうね max with が千
260 00:16:21,698 --> 00:16:30,709 で一つ一つが100だとマージンが左右20ピクセルずつあるというな設定に変えて
261 00:16:29,259 --> 00:16:37,310 フレックス
262 00:16:30,710 --> 00:16:44,960 ジャスティファイコンテントスタートの状態との日か見てみましょうか
263 00:16:37,309 --> 00:16:48,839 そうするとまぁ左に寄っているのが分かりますねこれがフレックススタートの状態です
264 00:16:44,960 --> 00:16:52,649 でフレックスエンドにすると
265 00:16:48,840 --> 00:16:56,209 今度は右側に行きますね
266 00:16:52,649 --> 00:16:58,720 このフレックスコンテナことを3時空になってくれ
267 00:16:56,208 --> 00:16:58,719 っていうわけ
268 00:16:59,549 --> 00:17:07,230 では続いて真ん中トロにするときね
269 00:17:02,759 --> 00:17:11,088 真ん中空にするときはジャスティファイコンテントのこれは
270 00:17:07,230 --> 00:17:14,130 センターにすると
271 00:17:11,088 --> 00:17:16,879 真ん中揃えになってくれます
272 00:17:14,130 --> 00:17:20,060 今度は均等に並べたいときねー
273 00:17:16,880 --> 00:17:24,670 8スペースビトゥイーンズですね
274 00:17:20,059 --> 00:17:24,669 ここをスペース日当院にすると
275 00:17:25,148 --> 00:17:31,619 こそ均等に並べてくれますちょっとこの左右のマージンとってみましょうかこの
276 00:17:29,528 --> 00:17:33,009 マージンがあるとわかりづらいね
277 00:17:31,619 --> 00:17:39,489 とっています
278 00:17:33,009 --> 00:17:45,529 そうするとえっとスペース beat win だと左足を右端にぴったりつけて
279 00:17:39,490 --> 00:17:50,650 デコなってくれますじゃあもう一つですね今度はスペース around
280 00:17:45,529 --> 00:17:50,649 を見てみましょうかスペーサーランドの場合はどうなるでしょうねあれは
281 00:17:52,109 --> 00:18:00,240 はいそうするとですね左と右にスペースができてえっとコンテントをそろえてくれ
282 00:17:57,420 --> 00:18:05,130 るって言うわけですね
283 00:18:00,240 --> 00:18:09,329 a まあこの子スペース beat win とかっていうのは特に習うのとかこの辺
284 00:18:05,130 --> 00:18:14,370 はボタンをリンクを均等に配置したいとかね
285 00:18:09,329 --> 00:18:17,819 いうときによく使いますのでこれ覚えてていいかもしれないですね
286 00:18:14,369 --> 00:18:22,849 それでは次は8新井アイテムズ
287 00:18:17,819 --> 00:18:22,849 行ってみましょうかエアラインアイテムですあ
288 00:18:25,210 --> 00:18:33,880 アイテムず
289 00:18:26,990 --> 00:18:33,880 ストレンジこれがデフォルトになりますでどうなっているかちょっと見てみましょうか
290 00:18:34,529 --> 00:18:43,819 行ってますね
291 00:18:36,319 --> 00:18:47,359 麗江なっていてこれだとよくわからないのでえっとするこのコンテナーに対して
292 00:18:43,819 --> 00:18:50,808 この高さをつけないとこれが
293 00:18:47,359 --> 00:18:55,009 本当に上限伸びているかどうかわかんないですね
294 00:18:50,808 --> 00:18:58,259 なのでこの配当を入れてみましょうか配当
295 00:18:55,009 --> 00:19:04,378 200ピクセルとかってれていますね
296 00:18:58,259 --> 00:19:09,329 で更新ボタンそうするとまね伸びているのがわかると思います
297 00:19:04,378 --> 00:19:13,740 ちょっとこのマージンとかも復活させましょうかねえ
298 00:19:09,329 --> 00:19:19,579 復活させてするところ伸びているのがわかると思います
299 00:19:13,740 --> 00:19:22,909 じゃあこれ設定ねえっと変えていきますねぷれっくすスタート
300 00:19:19,579 --> 00:19:28,278 にしてみるとどんなんでしょ
301 00:19:22,909 --> 00:19:31,750 こうすると上につきましたねデフォルトが伸びているのが分かったと思います
302 00:19:28,278 --> 00:19:36,650 今度はフレックス end
303 00:19:31,750 --> 00:19:40,460 3すると今度は下につくわけですね
304 00:19:36,650 --> 00:19:42,650 で一番よく使うのがこのフルフレックスえっと
305 00:19:40,460 --> 00:19:48,950 フレックスじゃないですねここは
306 00:19:42,650 --> 00:19:52,580 ただのセンターて書いてあげるとこれは真ん中ぞれになってくれます
307 00:19:48,950 --> 00:19:58,910 なんか真ん中で揃えたいなぁなんていうときよくあるんですけれども
308 00:19:52,579 --> 00:20:00,399 コンテナーの高さをつけてねええ払いアイテムズ先端仕上げとこのようになるわけです
309 00:19:58,910 --> 00:20:01,710 ね
310 00:20:00,400 --> 00:20:04,470 はい
311 00:20:01,710 --> 00:20:07,038 じゃあえっと
312 00:20:04,470 --> 00:20:07,038 いいですかね
313 00:20:07,369 --> 00:20:14,229 では8これにてですねでもうスレ所終わりたいと思います
314 00:20:16,160 --> 00:20:25,798 [音楽]