cssでyoutube埋め込みを横並びにレイアウト

cssのFlexboxで横並びレイアウト

サンプルはこちら。
youtubeの埋め込みを横並びで表示させる。

動画サイズをiframeで調整する。
横×縦＝16:9で設定する。

ソースコード

<style>
.palent {
  text-align: center;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width:800px;
  margin: 0px auto;
}

.child {
  text-align: center;
  width: 400px;
}

.child > iframe {
  width: 320px;
  height: 180px;
}

.video_title {
  padding-top: 15px;
  padding-bottom: 40px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}
</style>

<div class="palent">
	<div class="child">
		<iframe src="https://www.youtube.com/embed/7VQHbIuVsKQ" frameborder="0" allowfullscreen></iframe>
		<div class="video_title"><a href="" style="text-decoration:none;">「動画タイトル」</a></div>
	</div>
	<div class="child">
		<iframe src="https://www.youtube.com/embed/7VQHbIuVsKQ" frameborder="0" allowfullscreen></iframe>
		<div class="video_title"><a href="" style="text-decoration:none;">「動画タイトル」</a></div>
	</div>
</div>

<div class="palent">
	<div class="child">
		<iframe src="https://www.youtube.com/embed/7VQHbIuVsKQ" frameborder="0" allowfullscreen></iframe>
		<div class="video_title"><a href="" style="text-decoration:none;">「動画タイトル」</a></div>
	</div>
	<div class="child">
		<iframe src="https://www.youtube.com/embed/7VQHbIuVsKQ" frameborder="0" allowfullscreen></iframe>
		<div class="video_title"><a href="" style="text-decoration:none;">「動画タイトル」</a></div>
	</div>
</div>

親要素と子要素でfrex指定

親要素（コンテナ）
子要素（アイテム）

<div class="f-container">
  <div class="f-item"></div>
  <div class="f-item"></div>
  <div class="f-item"></div>
</div>

親要素にdisplay:flexを指定

.f-container{
display:flex;
}

flex-direction
アイテムの並び順を指定する

row：左から右へ
row-reverse：右から左へ
column：上から下へ