CSSのflex-basisプロパティでフレックスアイテムの初期サイズを設定する方法
CSSのflex-basisプロパティを使用すると、フレックスコンテナ内の各アイテム（フレックスアイテム）の初期サイズ（主軸方向の長さ）を指定できます。flex-basisは、フレックスレイアウトでアイテムがどれくらいの幅や高さから伸縮を始めるかを決める重要なプロパティです。
flex-basisプロパティの主な値
- auto（初期値）：要素のwidthまたはheightの値に依存します
- 数値＋単位：px、em、rem、%などで具体的なサイズを指定します
- content：コンテンツの内容に基づいて自動的にサイズが決まります
実装例
以下のコードでは、9つのフレックスアイテムを持つフレックスコンテナを作成し、4番目のアイテム（Q4）にのみflex-basis: 350pxを適用しています。その結果、Q4だけが他のアイテムより広い幅で表示されます。
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
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 style = "flex-basis: 350px">Q4</div>
<div>Q5</div>
<div>Q6</div>
<div>Q7</div>
<div>Q8</div>
<div>Q9</div>
</div>
</body>
</html>ポイント解説
この例では、すべてのアイテムにwidth: 100pxが設定されていますが、Q4にはインラインスタイルでflex-basis: 350pxが指定されているため、flex-basisの値が優先され、350pxの幅で表示されます。
flex-basisはflex-grow（伸び率）やflex-shrink（縮み率）と組み合わせて使用されることが多く、これら3つをまとめて指定できるショートハンドプロパティとしてflexもあります。例えばflex: 0 0 350px;と記述すれば、「伸縮せず、初期サイズ350px」という指定になります。
-
CSSのflex-directionでフレックスアイテムを水平方向に配置する方法
CSSでフレックスアイテムを水平方向に配置するには、flex-directionプロパティにrow値を指定します。flex-directionは、フレックスコンテナ内のアイテムが並ぶ方向（主軸の方向）を決定する重要なプロパティです。 flex-direction: row の基本 rowはflex-directionのデフォルト値で、アイテムを左から右へ横一列に並べます。なお、文書の書字方向が右から左（RTL）の場合は、逆に右から左へ並びます。 flex-directionで使える主な値 row：アイテムを水平方向（左から右）に配置 row-reverse：アイテムを水平方向（右から左）に配
-
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;などで折り