CSS3のflex-wrapプロパティでFlexアイテムの折り返し（ラッピング）を有効にする方法

CSS3でフレックスアイテム（Flexアイテム）の折り返しを有効にするには、flex-wrap プロパティを使用します。このプロパティの値に wrap を指定することで、コンテナの幅が足りなくなった際にアイテムが自動的に次の行へ折り返されるようになります。

flex-wrap プロパティに設定できる主な値は以下の通りです。

• nowrap（初期値）： アイテムは折り返されず、1行に並びます。
• wrap： アイテムが必要に応じて複数行に折り返されます。
• wrap-reverse： 折り返し方向が逆になり、下から上へ行が積み重なります。

サンプルコード

以下は、CSS3の flex-wrap プロパティを使ってフレックスアイテムの折り返しを有効にするコード例です。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
    height: 300px;
    display: flex;
    width: 300px;
    border: 2px solid red;
    flex-wrap: wrap;
}
div {
    width: 150px;
    height: 100px;
    color: white;
    text-align: center;
    font-size: 20px;
}
.first {
    background-color: rgb(55, 0, 255);
}
.second {
    background-color: red;
}
.third {
    background-color: rgb(140, 0, 255);
}
</style>
</head>
<body>
<h1>Flex wrap example</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>
</div>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。コンテナの幅（300px）に対して各アイテムの幅が150pxのため、3つ目のアイテムは収まりきらず、自動的に2行目へ折り返されていることが確認できます。

このように、flex-wrap: wrap を指定するだけで、レスポンシブなレイアウトに役立つ柔軟な折り返し処理を簡単に実現できます。