【CSS】flex-wrap - フレックスコンテナーの折り返し

CSSのflex-wrapプロパティについて解説します。

検証環境

CSS

macOS

14.1

flex-wrap

flex-wrapは“フレックスコンテナーの折り返し”のプロパティです。

基本構文

flex-wrap: 値;

値

代表的な値は次の通りです。

値	意味
nowrap	折り返さない。
wrap	折り返す。
wrap-reverse	折り返す。（積み上げ）

サンプル

nowrap

sample.html

<style>
div {
    display: flex;
    background: lightgray;
    ___ih_hl_start
    flex-wrap: nowrap;
    ___ih_hl_end
}
p {
    border: 1px solid black;
    text-align: center;
    width:24%;
}
</style>

<div>
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
    <p>WebBrowser</p>
    <p>Server</p>
</div>

プレビュー

wrap

sample.html

<style>
div {
    display: flex;
    background: lightgray;
    ___ih_hl_start
    flex-wrap: wrap;
    ___ih_hl_end
}
p {
    border: 1px solid black;
    text-align: center;
    width:24%;
}
</style>

<div>
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
    <p>WebBrowser</p>
    <p>Server</p>
</div>

プレビュー

wrap-reverse

sample.html

<style>
div {
    display: flex;
    background: lightgray;
    ___ih_hl_start
    flex-wrap: wrap-reverse;
    ___ih_hl_end
}
p {
    border: 1px solid black;
    text-align: center;
    width:24%;
}
</style>

<div>
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
    <p>WebBrowser</p>
    <p>Server</p>
</div>

プレビュー