flex – 1x2x3

CSSについて説明します。

display: flexについて説明します。

display: flex

flexは、コンテンツを1行、複数列にレイアウトします。

gridは二次元のレイアウトで使い、flexは一次元のレイアウトで使います。

sample

サンプルで確認します。

test_005.css

div.test-005-001
{
    display: flex;
}

div.test-005-001 div
{
    width: 20%;
    height: 7ex;
    background-color: #2060FF88;

    margin: 0rem 1rem;

    flex: 1;
}

test_005.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_005.css"/></head>
<body>

<div class="test-005-001">

<div></div>
<div></div>
<div></div>

</div>

</body>

表示は下記となります。

CSS

div
{
    display: block;
    display: flex;
}

div
{
    display: block flex;
}

div
{
    display: flex;
}

上記はすべて同じ設定となります。

参考

CSS Flexible Box Layout Module Level 1

CSS Display Module Level 3

<display-inside>

<display-legacy>

参考 & 広告

Kindle版です。

紙の本と、PDF版があります。

Kindle版です。

電子書籍です。