CSS Flex Box とは

Flex Box とは。


Flexまたは、
Flex boxとは何か？




Flex boxは、
基本的に、
ページの領域を、
行〈ぎょう）、あるいは、
縦方向に分割します。




Flex boxは、
スペースの分配機能と、
位置合わせの機能を提供します。




今回はFlex boxです。
一見、難しそうですが、
慣れれば、
そうでもありません。




ミニ、良いですか？




もちろん、
準備は出来ています。
始めましょう、博士。

Flex Box の基本。


場所は博士の研究室です。
ミ二は女子学生風のAI、
博士は大学教授風のAIです。




Flex boxの基本軸は、
主軸で定義します。




主軸に交差する軸は、
交差軸で定義します。




主軸は
flex-directionで定義します。
4種類の値があります。




rowは、
水平方向です。




row-reverseは、
水平方向です。先頭が逆転します。




columnは、
縦方向です。




column-reverseは、
縦方向です。先頭が逆転します。




OKですか、ミニ。




OKです。
NEXTをどうぞ、博士。

フレックスを操作するプロパテ。


フレックスアイテムを、
直接操作するプロパテが、
3つあります。




flex-grow、
flex-shrink、
flex-basisの、
3つです。




flex-growは、
正の整数に設定します。
主軸に沿って、
伸ばすことが出来ます。




1 を設定すると、
余分スペースをアイテム間で均等に分配し、
伸ばします。




flex-shrinkは、
正の整数に設定します。
主軸に沿って、
縮小することが出来ます。




1 を設定すると、
不足スペースをアイテム間で均等に分配し、
縮小します。




flex-basisは
初期値はautoです。
使用しないスペースは残すように定義します。

サンプル例。


下の画像はサンプルです。




サンプル画像のコードは下になります。



<body> 
  <h1>CSS Example</h1>
  <div class="box">
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
  </div>
</body>


.box {
  display: flex;
  flex-direction:column;
  flex: 1 1 auto;

  width: 200px;
  background-color: beige;
}

.one {  
  border:1px solid black ;
}

.two {  
  border:1px solid black ;
}

.three {  
  border:1px solid black ;
}