CSSのdisplayプロパティのflex、inline-flexの使い方 ~フレックスボックス
display:flex;
要素に定義すると、その子要素が横(flex-direction:row;)又は縦(flex-direction:column;)に並びます。
display:inline-box; は横に並べたい各要素(子要素側)に定義しますが、display:flex; は親要素に定義すると子要素が並びます。
display:flexの
子要素
display:flexの
子要素
display:flexの
子要素
display:flexの
子要素
display:flexの
子要素
display:flexの
子要素
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の<br>display:flexの<br>子要素</div> <div>1つ目の<br>display:flexの<br>子要素</div> <div>1つ目の<br>display:flexの<br>子要素</div> </div> <div class="flex"> <div>2つ目の<br>display:flexの<br>子要素</div> <div>2つ目の<br>display:flexの<br>子要素</div> <div>2つ目の<br>display:flexの<br>子要素</div> </div> <style> .flex{ display:flex; width:90%; max-width:800px; border:1px solid #999999; margin:10px; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
display:inline-flex;
要素に定義すると、その子要素が並ぶのはflexと同じですが、
「inline-block」の性質も併せ持つためflexと違ってinline-flexの要素同士を横並びにできる
display:
inline-flexの
子要素
display:
inline-flexの
子要素
display:
inline-flexの
子要素
display:
inline-flexの
子要素
display:
inline-flexの
子要素
display:
inline-flexの
子要素
- HTML・CSSソースコードを見る
-
<div class="inline-flex"> <div>1つ目の<br>display:flexの<br>子要素</div> <div>1つ目の<br>display:flexの<br>子要素</div> <div>1つ目の<br>display:flexの<br>子要素</div> </div> <div class="inline-flex"> <div>2つ目の<br>display:flexの<br>子要素</div> <div>2つ目の<br>display:flexの<br>子要素</div> <div>2つ目の<br>display:flexの<br>子要素</div> </div> <style> .flex{ display:inline-flex; width:45%; max-width:400px; border:1px solid #999999; background-color:#FFFFEE; } /* .inline-flex直下の子要素 */ .inline-flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
flex-wrapを定義して子要素の折り返しを指定する
flex-wrapを定義すると、その子要素の折り返し方法を指定できる
flex-wrap:nowrap; (折り返ししない[初期値])
子要素を折り返さない。
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の子要素</div> <div>2つ目の子要素</div> <div>3つ目の子要素</div> <div>4つ目の子要素</div> <div>5つ目の子要素</div> <div>6つ目の子要素</div> <div>7つ目の子要素</div> <div>8つ目の子要素</div> <div>9つ目の子要素</div> </div> <style> .flex{ display:flex; flex-wrap:nowrap; width:50%; max-width:800px; border:1px solid #999999; margin:10px; justify-content: justify-content:flex-start; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
flex-wrap:wrap; (折り返す)
子要素を折り返します。
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の子要素</div> <div>2つ目の子要素</div> <div>3つ目の子要素</div> <div>4つ目の子要素</div> <div>5つ目の子要素</div> <div>6つ目の子要素</div> <div>7つ目の子要素</div> <div>8つ目の子要素</div> <div>9つ目の子要素</div> </div> <style> .flex{ display:flex; flex-wrap:wrap; width:50%; max-width:800px; border:1px solid #999999; margin:10px; justify-content: flex-start; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
flex-wrap:wrap-reverse; (逆順で折り返す)
子要素を逆順で折り返します。
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の子要素</div> <div>2つ目の子要素</div> <div>3つ目の子要素</div> <div>4つ目の子要素</div> <div>5つ目の子要素</div> <div>6つ目の子要素</div> <div>7つ目の子要素</div> <div>8つ目の子要素</div> <div>9つ目の子要素</div> </div> <style> .flex{ display:flex; flex-wrap:wrap-reverse; width:50%; max-width:800px; border:1px solid #999999; margin:10px; justify-content: flex-start; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
justify-contentを定義して水平方向の揃え方を指定する
justify-contentを定義すると、その子要素の並ぶ方向を指定できる
justify-content:flex-start; (左寄せ[初期値])
子要素を左寄せにします
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の子要素</div> <div>2つ目の子要素</div> <div>3つ目の子要素</div> </div> <style> .flex{ display:flex; justify-content:flex-start; height:60px; width:90%; max-width:800px; border:1px solid #999999; margin:10px; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > *{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
justify-content:flex-end; (右寄せ)
子要素を右寄せにします
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の子要素</div> <div>2つ目の子要素</div> <div>3つ目の子要素</div> </div> <style> .flex{ display:flex; justify-content:flex-end; height:60px; width:90%; max-width:800px; border:1px solid #999999; margin:10px; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > *{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
justify-content:center; (中央寄せ)
子要素を中央寄せにします
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の子要素</div> <div>2つ目の子要素</div> <div>3つ目の子要素</div> </div> <style> .flex{ display:flex; justify-content:center; height:60px; width:90%; max-width:800px; border:1px solid #999999; margin:10px; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > *{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
justify-content:space-between; (隙間を均等)
子要素間の間隔を均等にします
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の子要素</div> <div>2つ目の子要素</div> <div>3つ目の子要素</div> </div> <style> .flex{ display:flex; justify-content:space-between; height:60px; width:90%; max-width:800px; border:1px solid #999999; margin:10px; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > *{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
justify-content:space-around; (左右を含む隙間を均等)
左右を含む子要素の間隔を均等にします
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の子要素</div> <div>2つ目の子要素</div> <div>3つ目の子要素</div> </div> <style> .flex{ display:flex; justify-content:space-around; height:60px; width:90%; max-width:800px; border:1px solid #999999; margin:10px; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > *{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
justify-content:space-evenly; (左右を含む隙間を完全に均等)
左右を含む子要素の間隔を完全に均等にします
Internet Explorerは対応していません
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の子要素</div> <div>2つ目の子要素</div> <div>3つ目の子要素</div> </div> <style> .flex{ display:flex; justify-content:space-evenly; height:60px; width:90%; max-width:800px; border:1px solid #999999; margin:10px; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > *{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
align-itemsを定義して垂直方向の揃え方を指定する
align-itemsを定義すると、その子要素の垂直方向の揃え方を指定できる
align-items:stretch; (子要素を親要素の高さに合わせる[初期値])
内で改行した
- HTML・CSSソースコードを見る
-
<div class="flex"> <div style="font-size:12pt;">12ptの子要素<br>内で改行した</div> <div style="font-size:18pt;">18ptの子要素</div> <div style="font-size:24pt;">24ptの子要素</div> </div> <style> .flex{ display:flex; align-items:stretch; height:100px; width:90%; max-width:800px; border:1px solid #999999; margin:10px; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
align-items:flex-start; (上揃え)
内で改行した
- HTML・CSSソースコードを見る
-
<div class="flex"> <div style="font-size:12pt;">12ptの子要素<br>内で改行した</div> <div style="font-size:18pt;">18ptの子要素</div> <div style="font-size:24pt;">24ptの子要素</div> </div> <style> .flex{ display:flex; align-items:flex-start; height:100px; width:90%; max-width:800px; border:1px solid #999999; margin:10px; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
align-items:flex-end; (下揃え)
内で改行した
- HTML・CSSソースコードを見る
-
<div class="flex"> <div style="font-size:12pt;">12ptの子要素<br>内で改行した</div> <div style="font-size:18pt;">18ptの子要素</div> <div style="font-size:24pt;">24ptの子要素</div> </div> <style> .flex{ display:flex; align-items:flex-end; height:100px; width:90%; max-width:800px; border:1px solid #999999; margin:10px; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
align-items:center; (上下中央揃え)
内で改行した
- HTML・CSSソースコードを見る
-
<div class="flex"> <div style="font-size:12pt;">12ptの子要素<br>内で改行した</div> <div style="font-size:18pt;">18ptの子要素</div> <div style="font-size:24pt;">24ptの子要素</div> </div> <style> .flex{ display:flex; align-items:center; height:100px; width:90%; max-width:800px; border:1px solid #999999; margin:10px; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
align-items:baseline; (1行目の文字列のベースライン揃え)
内で改行した
- HTML・CSSソースコードを見る
-
<div class="flex"> <div style="font-size:12pt;">12ptの子要素<br>内で改行した</div> <div style="font-size:18pt;">18ptの子要素</div> <div style="font-size:24pt;">24ptの子要素</div> </div> <style> .flex{ display:flex; align-items:baseline; height:100px; width:90%; max-width:800px; border:1px solid #999999; margin:10px; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
align-contentを定義して折り返したときの複数行の揃え方を指定する
flex-wrap:wrap; (折り返し) を指定した時にalign-contentを定義すると、複数行の揃え方を指定できる
align-content:stretch; (親要素の高さにストレッチ[初期値])
brで改行
brで改行
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の子要素<br>brで改行</div> <div>2つ目の子要素</div> <div>3つ目の子要素</div> <div>4つ目の子要素</div> <div>5つ目の子要素</div> <div>6つ目の子要素</div> <div>7つ目の子要素</div> <div>8つ目の子要素</div> <div>9つ目の子要素</div> <div>10個目の子要素<br>brで改行</div> <div>11個目の子要素</div> <div>12個目の子要素</div> </div> <style> .flex{ display:flex; flex-wrap:wrap; align-content:stretch; height:200px; width:90%; max-width:420px; border:1px solid #999999; margin:10px; justify-content: flex-start; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
align-content:flex-start; (上寄せ。子要素の高さは行ごとに自動)
brで改行
brで改行
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の子要素<br>brで改行</div> <div>2つ目の子要素</div> <div>3つ目の子要素</div> <div>4つ目の子要素</div> <div>5つ目の子要素</div> <div>6つ目の子要素</div> <div>7つ目の子要素</div> <div>8つ目の子要素</div> <div>9つ目の子要素</div> <div>10個目の子要素<br>brで改行</div> <div>11個目の子要素</div> <div>12個目の子要素</div> </div> <style> .flex{ display:flex; flex-wrap:wrap; align-content:flex-start; height:200px; width:90%; max-width:420px; border:1px solid #999999; margin:10px; justify-content: flex-start; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
align-content:flex-end; (下寄せ。子要素の高さは行ごとに自動)
brで改行
brで改行
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の子要素<br>brで改行</div> <div>2つ目の子要素</div> <div>3つ目の子要素</div> <div>4つ目の子要素</div> <div>5つ目の子要素</div> <div>6つ目の子要素</div> <div>7つ目の子要素</div> <div>8つ目の子要素</div> <div>9つ目の子要素</div> <div>10個目の子要素<br>brで改行</div> <div>11個目の子要素</div> <div>12個目の子要素</div> </div> <style> .flex{ display:flex; flex-wrap:wrap; align-content:flex-end; height:200px; width:90%; max-width:420px; border:1px solid #999999; margin:10px; justify-content: flex-start; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
align-content:center; (上下中央寄せ。子要素の高さは行ごとに自動)
brで改行
brで改行
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の子要素<br>brで改行</div> <div>2つ目の子要素</div> <div>3つ目の子要素</div> <div>4つ目の子要素</div> <div>5つ目の子要素</div> <div>6つ目の子要素</div> <div>7つ目の子要素</div> <div>8つ目の子要素</div> <div>9つ目の子要素</div> <div>10個目の子要素<br>brで改行</div> <div>11個目の子要素</div> <div>12個目の子要素</div> </div> <style> .flex{ display:flex; flex-wrap:wrap; align-content:center; height:200px; width:90%; max-width:420px; border:1px solid #999999; margin:10px; justify-content: flex-start; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
align-content:space-between; (隙間を均等。子要素の高さは行ごとに自動)
brで改行
brで改行
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の子要素<br>brで改行</div> <div>2つ目の子要素</div> <div>3つ目の子要素</div> <div>4つ目の子要素</div> <div>5つ目の子要素</div> <div>6つ目の子要素</div> <div>7つ目の子要素</div> <div>8つ目の子要素</div> <div>9つ目の子要素</div> <div>10個目の子要素<br>brで改行</div> <div>11個目の子要素</div> <div>12個目の子要素</div> </div> <style> .flex{ display:flex; flex-wrap:wrap; align-content:space-between; height:200px; width:90%; max-width:420px; border:1px solid #999999; margin:10px; justify-content: flex-start; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
align-content:space-around; (上下を含む隙間を均等。子要素の高さは行ごとに自動)
brで改行
brで改行
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の子要素<br>brで改行</div> <div>2つ目の子要素</div> <div>3つ目の子要素</div> <div>4つ目の子要素</div> <div>5つ目の子要素</div> <div>6つ目の子要素</div> <div>7つ目の子要素</div> <div>8つ目の子要素</div> <div>9つ目の子要素</div> <div>10個目の子要素<br>brで改行</div> <div>11個目の子要素</div> <div>12個目の子要素</div> </div> <style> .flex{ display:flex; flex-wrap:wrap; align-content:space-around; height:200px; width:90%; max-width:420px; border:1px solid #999999; margin:10px; justify-content: flex-start; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
align-content:space-evenly; (上下を含む隙間を完全に均等。子要素の高さは行ごとに自動)
brで改行
brで改行
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の子要素<br>brで改行</div> <div>2つ目の子要素</div> <div>3つ目の子要素</div> <div>4つ目の子要素</div> <div>5つ目の子要素</div> <div>6つ目の子要素</div> <div>7つ目の子要素</div> <div>8つ目の子要素</div> <div>9つ目の子要素</div> <div>10個目の子要素<br>brで改行</div> <div>11個目の子要素</div> <div>12個目の子要素</div> </div> <style> .flex{ display:flex; flex-wrap:wrap; align-content:space-evenly; height:200px; width:90%; max-width:420px; border:1px solid #999999; margin:10px; justify-content: flex-start; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
flex-directionを定義して並び順を指定する
flex-directionを定義すると、その子要素の並ぶ方向を指定できる
flex-direction:row; (左から右)
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の子要素</div> <div>2つ目の子要素</div> <div>3つ目の子要素</div> </div> <style> .flex{ display:flex; flex-direction:row; height:60px; width:90%; max-width:800px; border:1px solid #999999; margin:10px; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
flex-direction:row-reverse; (右から左)
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の子要素</div> <div>2つ目の子要素</div> <div>3つ目の子要素</div> </div> <style> .flex{ display:flex; flex-direction:row-reverse; height:60px; width:90%; max-width:800px; border:1px solid #999999; margin:10px; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
flex-direction:column; (上から下)
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の子要素</div> <div>2つ目の子要素</div> <div>3つ目の子要素</div> </div> <style> .flex{ display:flex; flex-direction:column; width:90%; max-width:800px; border:1px solid #999999; margin:10px; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
flex-direction:column-reverse; (下から上)
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1つ目の子要素</div> <div>2つ目の子要素</div> <div>3つ目の子要素</div> </div> <style> .flex{ display:flex; flex-direction:column-reverse; width:90%; max-width:800px; border:1px solid #999999; margin:10px; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
子要素にalign-selfを定義して子要素ごとに垂直方向の位置揃えを指定する
子要素にalign-selfを定義すると、子要素ごとに垂直方向の位置揃えを指定できる
[初期値]
親のalign-itemsの値で計算します。
font-size:10pt;
(1行目の文字列のベースライン揃え)
font-size:20pt;
- HTML・CSSソースコードを見る
-
<div class="flex"> <div style="align-self:auto;">align-self:auto;<br>[初期値]<br>親のalign-itemsの値で計算します。</div> <div style="align-self:flex-start;">align-self:flex-start;</div> <div style="align-self:flex-end;">align-self:flex-end;</div> <div style="align-self:center;">align-self:center;</div> <div style="align-self:stretch;">align-self:stretch;</div> <div style="align-self:baseline;font-size:10pt;">align-self:baseline;<br>font-size:10pt;<br> (1行目の文字列のベースライン揃え)</div> <div style="align-self:baseline;font-size:20pt;">align-self:baseline;<br>font-size:20pt;</div> </div> <style> .flex{ display:flex; height:200px; width:90%; max-width:800px; border:1px solid #999999; margin:10px; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
子要素にflex(拡大比[flex-grow] 縮小比[flex-shrink] ベースサイズ[flex-basis])プロパティを定義して親要素(display:flex)が拡縮した時の各子要素の拡縮を設定する
140px固定
140px以上になる
デフォルト値
140px固定
- HTML・CSSソースコードを見る
-
<div class="flex""> <div style="flex:0 0 140px;">flex:0 0 140px;<br>140px固定<br></div> <div style="flex:1 0 140px;">flex:1 0 140px;<br>140px以上になる<br></div> <div style="flex:0 1 auto;">flex:0 1 auto;<br>デフォルト値<br></div> <div style="flex:0 0 140px;">flex:0 0 140px;<br>140px固定<br></div> </div> <style> .flex{ display:flex; width:90%; max-width:800px; border:1px solid #999999; margin:10px; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } </style>
最後の子要素にmargin-left:auto;を設定すると、最後の子要素だけ右寄せにできる
を入れると、ここだけ右寄せになる
- HTML・CSSソースコードを見る
-
<div class="flex""> <div>子要素1<br></div> <div>子要素2<br></div> <div>子要素3<br></div> <div>子要素に、margin-left:auto;<br>を入れると、ここだけ右寄せになる</div> </div> <style> .flex{ display:flex; width:90%; max-width:800px; border:1px solid #999999; margin:10px; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } /* .flex直下の子要素の最後の子要素 */ .flex > div:last-child{ margin-left:auto; } </style>
子要素にorder:並び順; 属性を設定すると、子要素の並び順を設定できる
order:3;
order:1;
order:2;
- HTML・CSSソースコードを見る
-
<div class="flex"> <div>1個目の子要素<br>order:3;</div> <div>2個目の子要素<br>order:1;</div> <div>3個目の子要素<br>order:2;</div> </div> <style> .flex-order{ display:flex; width:90%; max-width:800px; border:1px solid #999999; margin:10px; background-color:#FFFFEE; } /* .flex直下の子要素 */ .flex-order > div{ border:1px solid #000000; word-break: break-all; overflow-wrap: anywhere; background-color:#FFFFBB; } .flex-order > div:nth-child(1){order:3;}/*3番目に表示*/ .flex-order > div:nth-child(2){order:1;}/*1番目に表示*/ .flex-order > div:nth-child(3){order:2;}/*2番目に表示*/ </style>
(参考)本サイト内でCSSのdisplay:flexを使用したサンプル
ページ内に複数ページとページャー作成
display:flex;で横並びメニュー作成
display:flex;でサブメニューがある横並びメニュー作成
SVGアイコンを下部固定した横並びメニューのページを作る
フェードイン、フェードアウトしながら切り替わるタブメニューを作る