<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Flexboxを学ぼう</title>
</head>
<body>
<h1>Flexboxの特徴と解説</h1>
<div class="toc">
<div>目次</div>
<ol>
<li><a href="#first-heading">Flexboxとは</a></li>
<li><a href="#second-heading">Flexboxでできること</a></li>
<li><a href="#third-heading">Flexboxの使い方</a></li>
<li><a href="#fourth-heading">多様なレイアウトを組むための手法 - 親要素に指定するプロパティ -</a></li>
<ol>
<li><a href="#first-subHeading" class="inner">【子要素の並ぶ向きを指定】flex-direction</li>
<li><a href="#second-subHeading" class="inner">【折り返しを指定】flex-wrap</li>
<li><a href="#third-subHeading" class="inner">【水平方向の配置】justify-content</li>
<li><a href="#fourth-subHeading" class="inner">【垂直方向の配置】align-items</li>
<li><a href="#fifth-subHeading" class="inner">【折返しがある場合の垂直方向の配置】align-content</li>
</ol>
<li><a href="#fifth-heading">多様なレイアウトを組むための手法 - 子要素に指定するプロパティ -</a></li>
<ol>
<li><a href="#sixth-subHeading" class="inner">【並び順】order</li>
<li><a href="#seventh-subHeading" class="inner">【伸びる比率】flex-grow</li>
<li><a href="#eighth-subHeading" class="inner">【縮む比率】flex-shrink</li>
<li><a href="#nineth-subHeading" class="inner">【基準のサイズ】flex-basis</li>
<li><a href="#tenth-subHeading" class="inner">【個別での垂直方向の配置】align-self</li>
</ol>
<li><a href="#sixth-heading">Flexboxを使いこなして自由に楽しくレイアウトを組もう</a></li>
</ol>
</div>
<h2 id="first-heading">Flexboxとは</h2>
<ul>
<li>CSS3から追加されたdisplay:flex(inline-flex)を使ったレイアウト手法。</li>
<li>子要素を親要素内で、横並び・サイズ決定・配置などを<span class="important">簡単に簡潔に</span>調整することができる。</li>
</ul>
<h2 id="second-heading">Flexboxでできること</h2>
<p>Flexboxでできることとして主に以下の内容が挙げられる。</p>
<ul>
<li>複数のテキストや画像の横並び。</li>
<li>要素の折り返し方を決める。</li>
<li>表示する順番を逆からにする。</li>
<li>画像とテキストを左右交互に配置する。</li>
<li>PCとスマホで違った表示方法にする。</li>
</ul>
<p>これらの内容は、Flexbox以外のプロパティでも実現可能だが、普通のプロパティでは一つの要素に対して複数行の指定が必要であったり、HTMLの記述が変更される場合に対応に手間がかかったりしてしまう。</p>
<p>Flexboxでは、HTMLをほとんど変更せずに、簡潔なCSS指定のみで<span class="important">多様なレイアウトを組むことが可能</span>である。</p>
<h2 id="third-heading">Flexboxの使い方</h2>
<p>Flexboxは親要素>子要素の構造になっているときに使用する。</p>
<p>Flexboxにおける親要素を<span class="important">Flexコンテナ</span>、子要素を<span class="important">Flexアイテム</span>と呼ぶ。</p>
<p><img src="flexbox.png" alt="flexboxの概念図" width="640px" height="360px"></p>
<p>Flexコンテナに対してdisplay:flex;を指定することでFlexboxを使用することができるようになる。</p>
<p>例えば、以下のようにHTMLでFlexboxを使用する場合、ulタグがFlexコンテナ(親要素)、liタグがFlexアイテム(子要素)になる。</p>
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="poxqWvj" data-editable="true" data-user="uztrzurw-the-sans" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/uztrzurw-the-sans/pen/poxqWvj">
Untitled</a> by 流浪鳥 (<a href="https://codepen.io/uztrzurw-the-sans">@uztrzurw-the-sans</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h2 id="fourth-heading">多様なレイアウトを組むための手法【親要素に指定するプロパティ】</h2>
Flexboxでは親要素であるFlexコンテナに様々なプロパティを指定することで自由なレイアウトが可能になる。
以下に実用的なものをいくつか挙げていく。
<h3 id="first-subHeading">【子要素の並ぶ向きを指定】flex-direction</h3>
<p>子要素の並べる方向を指定するプロパティ。</p>
<ul>
<li class="layout"><span class="property">flex-direction: row;</span>初期値。要素を左から右に向かって並べる。</li>
<li class="layout"><span class="property">flex-direction: row-reverse;</span>要素を左から右に向かって並べる。</li>
<li class="layout"><span class="property">flex-direction: column;</span>縦に上から下に並べる。</li>
<li class="layout"><span class="property">flex-direction: column-reverse;</span>縦に下から上に並べる。</li>
</ul>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="poxYEOG" data-editable="true" data-user="uztrzurw-the-sans" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/uztrzurw-the-sans/pen/poxYEOG">
Untitled</a> by 流浪鳥 (<a href="https://codepen.io/uztrzurw-the-sans">@uztrzurw-the-sans</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h3 id="second-subHeading">【折り返しを指定】flex-wrap</h3>
<p>子要素を親要素内に1行で並べるか、親要素に合わせて折り返すかを指定するプロパティ。</p>
<ul>
<li class="layout"><span class="property">flex-wrap: nowrap;</span>初期値。要素を折り返さずに、横方向に1行に並べる。</li>
<li class="layout"><span class="property">flex-wrap: wrap;</span>必要に応じて要素を折り返し、複数行に並べる。</li>
<li class="layout"><span class="property">flex-wrap: wrap-reverse;</span>必要に応じて要素を折り返し、逆順に複数行に並べる。</li>
</ul>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="jOeJaRG" data-editable="true" data-user="uztrzurw-the-sans" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/uztrzurw-the-sans/pen/jOeJaRG">
Untitled</a> by 流浪鳥 (<a href="https://codepen.io/uztrzurw-the-sans">@uztrzurw-the-sans</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h3 id="third-subHeading">【水平方向の配置】justify-content</h3>
<p>子要素の水平方向の配置を指定するプロパティ。</p>
<ul>
<li class="layout"><span class="property">justify-content: flex-start;</span>初期値。子要素を親要素の左端に寄せて並べる。</li>
<li class="layout"><span class="property">justify-content: flex-end;</span>子要素を親要素の右端に寄せて並べる。</li>
<li class="layout"><span class="property">justify-content: center;</span>子要素を親要素の中央に並べる。</li>
<li class="layout"><span class="property">justify-content: space-between;</span>最初と最後の子要素は端に寄せ、残りの子要素を等間隔に並べる。</li>
<li class="layout"><span class="property">justify-content: space-around;</span>最初と最後の子要素は半分だけ間隔を置き、残りは等間隔に並べる。</li>
<li class="layout"><span class="property">justify-content: space-evenly;</span>全ての子要素の間隔を等間隔に並べる。</li>
</ul>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="OJBqzLb" data-editable="true" data-user="uztrzurw-the-sans" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/uztrzurw-the-sans/pen/OJBqzLb">
Untitled</a> by 流浪鳥 (<a href="https://codepen.io/uztrzurw-the-sans">@uztrzurw-the-sans</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h3 id="fourth-subHeading">【垂直方向の配置】align-items</h3>
<p>子要素の垂直方向の配置を指定するプロパティ。</p>
<ul>
<li class="layout"><span class="property">align-items: stretch;</span>初期値。子要素を親要素の高さに合わせる。</li>
<li class="layout"><span class="property">align-items: flex-start;</span>子要素を親要素の上部に寄せて並べる。</li>
<li class="layout"><span class="property">align-items: flex-end;</span>子要素を親要素の下部に寄せて並べる。</li>
<li class="layout"><span class="property">align-items: center;</span>子要素を親要素の中央に並べる。</li>
<li class="layout"><span class="property">align-items: baseline;</span>子要素のベースラインに合わせて並べる。</li>
</ul>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="KKGEZdQ" data-editable="true" data-user="uztrzurw-the-sans" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/uztrzurw-the-sans/pen/KKGEZdQ">
Untitled</a> by 流浪鳥 (<a href="https://codepen.io/uztrzurw-the-sans">@uztrzurw-the-sans</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h3 id="fifth-subHeading">【折返しがある場合の垂直方向の配置】align-content</h3>
<p>折り返しのある複数行の子要素を垂直方向に配置を指定するプロパティ。</p>
<ul>
<li class="layout"><span class="property">align-content: stretch;</span>子要素を親要素の高さいっぱいに広げて並べる。</li>
<li class="layout"><span class="property">align-content: flex-start;</span>子要素を親要素の上側に寄せて並べる。</li>
<li class="layout"><span class="property">align-content: flex-end;</span>子要素を親要素の下側に寄せて並べる。</li>
<li class="layout"><span class="property">align-content: center;</span>子要素を親要素の中央に並べる。</li>
<li class="layout"><span class="property">align-content: space-between;</span>最初と最後の子要素は端に寄せ、残りの子要素を等間隔に並べる。</li>
<li class="layout"><span class="property">align-content: space-around;</span>最初と最後の子要素は半分だけ間隔を置いてから、残りは等間隔に並べる。</li>
<li class="layout"><span class="property">align-content: space-evenly;</span>全ての子要素の間隔を等間隔に並べる。</li>
</ul>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="wvYOpJr" data-editable="true" data-user="uztrzurw-the-sans" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/uztrzurw-the-sans/pen/wvYOpJr">
Untitled</a> by 流浪鳥 (<a href="https://codepen.io/uztrzurw-the-sans">@uztrzurw-the-sans</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h2 id="fifth-heading">多様なレイアウトを組むための手法【子要素に指定するプロパティ】</h2>
<p>ここからは子要素に指定するプロパティを紹介する。</p>
<h3 id="sixth-subHeading">【並び順】order</h3>
<p>子要素の並び順を指定することができるプロパティ。</p>
<ul>
<li class="layout"><span class="property">order: 整数値</span>順序を表す整数を割り当て、その数字が小さい順に表示される。</li>
</ul>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="rNqRpKg" data-editable="true" data-user="uztrzurw-the-sans" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/uztrzurw-the-sans/pen/rNqRpKg">
Untitled</a> by 流浪鳥 (<a href="https://codepen.io/uztrzurw-the-sans">@uztrzurw-the-sans</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h3 id="seventh-subHeading">【伸びる比率】flex-grow</h3>
<p>親要素に余りのスペースがある際に、指定した子要素を他の子要素と比べて、どのくらい伸ばすかを指定するプロパティ。数字が大きい方が伸びる。</p>
<ul>
<li class="layout"><span class="property">flex-grow: 0;</span>初期値。指定された子要素は伸ばさない。</li>
<li class="layout"><span class="property">flex-grow: 数値;</span>指定した数値が大きいほうが伸びる。負の値は無効。</li>
</ul>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="ExdMoOx" data-editable="true" data-user="uztrzurw-the-sans" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/uztrzurw-the-sans/pen/ExdMoOx">
Untitled</a> by 流浪鳥 (<a href="https://codepen.io/uztrzurw-the-sans">@uztrzurw-the-sans</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h3 id="eighth-subHeading">【縮む比率】flex-shrink</h3>
<p>親要素に子要素が収まりきらない際に、指定した子要素を他の子要素と比べて、どのくらい縮ませるかを指定するプロパティ。数字が大きい方が縮む。</p>
<ul>
<li class="layout"><span class="property">flex-shrink: 1;</span>初期値。指定された子要素は等倍で縮む。</li>
<li class="layout"><span class="property">flex-shrink: 0;</span>指定された子要素は縮まない。</li>
<li class="layout"><span class="property">flex-shrink: 数値;</span>指定した数値が大きいほうが縮む。</li>
</ul>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="WNamdWa" data-editable="true" data-user="uztrzurw-the-sans" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/uztrzurw-the-sans/pen/WNamdWa">
Untitled</a> by 流浪鳥 (<a href="https://codepen.io/uztrzurw-the-sans">@uztrzurw-the-sans</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h3 id="nineth-subHeading">【基準のサイズ】flex-basis</h3>
<p>伸縮する前の初期サイズを指定するプロパティ。</p>
<ul>
<li class="layout"><span class="property">flex-basis: auto;</span>初期値。指定された子要素の初期サイズはwidthに従う。</li>
<li class="layout"><span class="property">flex-basis: 幅指定</span>初期サイズを指定。(px,em等を用いる)</li>
</ul>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="QWZoaPJ" data-editable="true" data-user="uztrzurw-the-sans" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/uztrzurw-the-sans/pen/QWZoaPJ">
Untitled</a> by 流浪鳥 (<a href="https://codepen.io/uztrzurw-the-sans">@uztrzurw-the-sans</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h3 id="tenth-subHeading">【個別での垂直方向の配置】align-self</h3>
<p>垂直方向の配置場所を、それぞれ違う位置に指定したいときに使うプロパティ。</p>
<ul>
<li class="layout"><span class="property">align-self: auto;</span>初期値。align-itemsの設定を引き継ぐ。</li>
<li class="layout"><span class="property">align-self: stretch;</span>親要素の高さいっぱいもしくは一番大きな子要素に合わせて並べる。</li>
<li class="layout"><span class="property">align-self: flex-start;</span>親要素の上側に寄せて並べる。</li>
<li class="layout"><span class="property">align-self: flex-end;</span>親要素の下側に寄せて並べる。</li>
<li class="layout"><span class="property">align-self: center;</span>親要素の中央に並べる。</li>
<li class="layout"><span class="property">align-self: baseline;</span>ベースラインに沿って並べる。</li>
</ul>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="LYgadpr" data-editable="true" data-user="uztrzurw-the-sans" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/uztrzurw-the-sans/pen/LYgadpr">
Untitled</a> by 流浪鳥 (<a href="https://codepen.io/uztrzurw-the-sans">@uztrzurw-the-sans</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h2 id="sixth-heading">Flexboxを使いこなして自由に楽しくレイアウトを組もう</h2>
<p>Flexboxはプロパティの数が多く把握するのが大変だが、一度使い慣れれば柔軟なレイアウトが可能になる。</p>
<p>プロパティは暗記をしようとするのではなく、実際に使ってみるというのが大事である。まずは、気になるプロパティを実際に使ってみて自分なりのレイアウトを組んでみよう。</p>
<footer class="footer">
<p><a href="#">ページTOP</a></p>
<p class="copyright">© KoekiInfoDesign 2023-Ryuei Inc. All Rights Reserved.</p>
</footer>
</body>
</html>
