`flex-wrap`は、複数の要素を横に並べる際に、画面の幅が狭くなったときに要素がどのように折り返されるかを指定するためのプロパティです。 ~~~css-preview .flexbox { display: flex; flex-wrap: 値; } ~~~ ### 主な値とその効果 - `nowrap`：初期値。要素を一列に並べ続け、折り返しをしません。 - `wrap`：要素が一列に収まりきらない場合に次の行に折り返します。 - `wrap-reverse`：`wrap`と同様に折り返しますが、折り返しの順序が逆になります。 ## 例1　折り返さない `flex-wrap: nowrap;`を使用して、要素を一列に並べ続け、折り返しをしない指定です。 ~~~html-preview~コード例1

①

②

③

④

⑤

~~~
`flex-wrap: nowrap;`で折り返しの指定しない場合、`親要素の幅を超えて子要素が配置`されると、画面に収まりきらない部分が `横スクロール` で表示されることがあるため、`注意`が必要です。（スクロールバーが表示される場合もあります）。 ## 例2　折り返す `flex-wrap: wrap;`を使用して、要素が一列に収まりきらない場合に次の行に折り返します。 ~~~html-preview~コード例2

①

②

③

④

⑤

~~~ filename: コード例 wordDecorations: - word: 値 rubyText: "子要素を自動的に折り返す" isUnderline: true lineDecorations: - lineStart: 4 lineEnd: 4 isFocus: true filename: コード例1 wordDecorations: - word: nowrap rubyText: "子要素を折り返さない" isUnderline: true lineDecorations: - lineStart: 12 lineEnd: 12 isFocus: true filename: コード例2 wordDecorations: - word: wrap rubyText: "子要素を折り返す" isUnderline: true lineDecorations: - lineStart: 12 lineEnd: 12 isFocus: true

クイズにチャレンジしよう！

関連チャレンジ