CSS Flexbox レイアウトクイズ - プレイ中

1 第1問

どのCSSプロパティを親要素に適用すると、その子要素がFlexアイテムとして配置されるようになりますか？

A display: block;

B display: inline;

C display: flex;

D display: grid;

2 第2問

Flexboxにおいて、flex-direction: row;が設定されている場合、メイン軸（main axis）はどの方向になりますか？

A 垂直方向

B 水平方向

C Z軸方向

D 斜め方向

3 第3問

Flexコンテナ内でFlexアイテムをメイン軸に沿って配置し、最初のアイテムは開始位置に、最後のアイテムは終了位置に配置し、残りのスペースをアイテム間に均等に分配するCSSプロパティと値の組み合わせはどれですか？

A justify-content: center;

B justify-content: space-between;

C justify-content: space-around;

D justify-content: flex-end;

4 第4問

Flexコンテナ内でFlexアイテムをクロス軸の中央に揃えるためのCSSプロパティと値の組み合わせはどれですか？

A justify-content: center;

B align-items: center;

C align-self: center;

D flex-direction: center;

5 第5問

Flexアイテムが利用可能なスペースをどのように占有するかを決定するプロパティで、デフォルト値が0であるものはどれですか？

A flex-shrink

B flex-basis

C flex-grow

D order

6 第6問

FlexアイテムがFlexコンテナのスペースが不足している場合に、どの程度縮小するかを定義するプロパティはどれですか？

A flex-grow

B flex-basis

C flex-shrink

D order

7 第7問

Flexアイテムの初期サイズを定義するプロパティで、余剰スペースが分配される前の基準となるサイズを設定するものはどれですか？

A width

B height

C flex-basis

D min-width

8 第8問

Flexアイテムの視覚的な表示順序を変更するために使用されるプロパティはどれですか？

A z-index

B position

C float

D order

9 第9問

flex: 1 1 auto;というCSS宣言は、どの3つのFlexboxプロパティのショートハンドですか？

A flex-direction, flex-wrap, flex-flow

B flex-grow, flex-shrink, flex-basis

C justify-content, align-items, align-content

D order, align-self, margin

10 第10問

flexコンテナ内で、flexアイテムが複数行に折り返すかどうかを制御するCSSプロパティは何ですか？

A flex-direction

B flex-wrap

C align-items

D justify-content