CSSのflex-directionプロパティでフレックスアイテムの並ぶ方向を指定する方法
CSSでフレックスコンテナ内のアイテム（フレックスアイテム）が並ぶ方向を指定するには、flex-directionプロパティを使用します。このプロパティを使うことで、アイテムを横方向に並べるか、縦方向に並べるかを簡単に制御できます。
flex-directionプロパティの主な値
- row：アイテムを左から右へ横方向に並べます（初期値）
- row-reverse：アイテムを右から左へ逆順に横方向へ並べます
- column：アイテムを上から下へ縦方向に並べます
- column-reverse：アイテムを下から上へ逆順に縦方向へ並べます
実装例
以下のコードでは、flex-direction: column; を指定することで、フレックスアイテムを縦方向に並べています。実際にコードを実行して動作を確認してみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
flex-direction: column;
background-color: orange;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
<div>Q5</div>
<div>Q6</div>
</div>
</body>
</html>コードの解説
この例では、親要素の.mycontainerにdisplay: flex;を指定してフレックスコンテナとして定義し、さらにflex-direction: column;を設定しています。その結果、Q1からQ6までの子要素は、通常の横並びではなく縦方向（上から下）に順番に配置されます。
もしflex-direction: column;をrowに変更すれば、アイテムは左から右へ横一列に並びます。レイアウトの目的に応じて値を切り替えることで、柔軟なデザインを実現できます。
-
CSSでフレックスラインをコンテナの先頭に表示する方法(align-content: flex-start)
CSSのalign-contentプロパティにflex-startという値を指定すると、フレックスコンテナ内の複数のフレックスライン(行)をコンテナの先頭側に寄せて配置できます。 align-content: flex-startの基本 align-contentプロパティは、交差軸(cross axis)方向におけるフレックスライン全体の配置を制御するプロパティです。flex-startを指定すると、すべてのフレックスラインが交差軸の開始位置、つまりコンテナの先頭にまとめられて表示されます。 注意点として、align-contentが機能するのはflex-wrap: wrap;などで折り
-
CSS FlexboxでDIV要素を左・中央・右に配置する方法｜justify-contentの使い方
CSSのjustify-contentプロパティを使用すると、フレックスコンテナの主軸方向（デフォルトでは水平方向）に沿って子要素の間や周囲のスペースを分配し、柔軟に配置を制御できます。本記事では、複数のDIV要素を「左・中央・右」のように分散配置する方法を、具体的なコード例と表示結果とともにわかりやすく解説します。 justify-contentプロパティの構文 justify-contentは、display: flex;を指定した親要素（フレックスコンテナ）に対して設定します。基本の構文は以下のとおりです。 セレクタ { display: