CSSシミュレータ（display:flex）

【1】いろは歌
いろはにほへと
ちりぬるをわか
よたれそつねな
らむうゐのおく
やまけふこえて
あさきゆめみし
ゑひもせす

【2】平家物語
祇園精舍の鐘の声　諸行無常の響きあり
娑羅双樹の花の色　盛者必衰の理をあらわす
奢れる人も久しからず　ただ春の夜の夢の如し
猛き者もついには滅びぬ　ひとえに風の前の塵に同じ

【3】寿限無
寿限無　寿限無
五劫の擦り切れ
海砂利水魚の
水行末　雲来末　風来末
食う寝るところに住むところ
薮ら柑子の薮柑子
パイポ　パイポ　パイポのシューリンガン
シューリンガンのグーリンダイ
グーリンダイのポンポコピーのポンポコナーの
長久命の長助

【4】ブログ村人気投票

【5】ブログ村人気投票

【6】頑張ろうよ

【7】初期値
flex-direction: row ;
flex-wrap: wrap ;
align-content: stretch ;
justify-content: flex-start ;
align-items: stretch ;
align-self: auto ;

【8】キーワード
start
end
主軸
交差軸

【9】A8.net

【使い方】textareaの中身（値）を書き換えて色々と試してみる <style> #flexDisplay { display:flex; height: px ; flex-direction: row ; /*①横並びか縦並びか*/ flex-wrap: nowrap ; /*②一行か複数行か*/ align-content: stretch ; /*③複数行の位置関係*/ justify-content: flex-start ; /*④行の中のflexアイテム同士の位置関係（主軸方向）*/ align-items: stretch ; /*⑤flexアイテムの大きさと、行との位置関係（交差軸方向）の一括指定*/ } #flexDisplay div:nth-of-type(1){align-self: auto ;} /*⑥flexアイテムの大きさと、行との位置関係（交差軸方向）の個別指定*/ #flexDisplay div:nth-of-type(2){align-self: auto ;} /*⑥flexアイテムの大きさと、行との位置関係（交差軸方向）の個別指定*/ #flexDisplay div:nth-of-type(3){align-self: auto ;} /*⑥flexアイテムの大きさと、行との位置関係（交差軸方向）の個別指定*/ #flexDisplay div:nth-of-type(4){align-self: auto ;} /*⑥flexアイテムの大きさと、行との位置関係（交差軸方向）の個別指定*/ #flexDisplay div:nth-of-type(5){align-self: auto ;} /*⑥flexアイテムの大きさと、行との位置関係（交差軸方向）の個別指定*/ #flexDisplay div:nth-of-type(6){align-self: auto ;} /*⑥flexアイテムの大きさと、行との位置関係（交差軸方向）の個別指定*/ #flexDisplay div:nth-of-type(7){align-self: auto ;} /*⑥flexアイテムの大きさと、行との位置関係（交差軸方向）の個別指定*/ #flexDisplay div:nth-of-type(8){align-self: auto ;} /*⑥flexアイテムの大きさと、行との位置関係（交差軸方向）の個別指定*/ #flexDisplay div:nth-of-type(9){align-self: auto ;} /*⑥flexアイテムの大きさと、行との位置関係（交差軸方向）の個別指定*/ #flexDisplay,#flexDisplay div{border:1px solid;} </style> <div>【1】いろは歌<br /> いろはにほへと<br /> ちりぬるをわか<br /> よたれそつねな<br /> らむうゐのおく<br /> やまけふこえて<br /> あさきゆめみし<br /> ゑひもせす</div> <div>【2】平家物語<br /> 祇園精舍の鐘の声　諸行無常の響きあり<br /> 娑羅双樹の花の色　盛者必衰の理をあらわす<br /> 奢れる人も久しからず　ただ春の夜の夢の如し<br /> 猛き者もついには滅びぬ　ひとえに風の前の塵に同じ</div> <div>【3】寿限無<br /> 寿限無　寿限無<br /> 五劫の擦り切れ<br /> 海砂利水魚の<br /> 水行末　雲来末　風来末<br /> 食う寝るところに住むところ<br /> 薮ら柑子の薮柑子<br /> パイポ　パイポ　パイポのシューリンガン<br /> シューリンガンのグーリンダイ<br /> グーリンダイのポンポコピーのポンポコナーの<br /> 長久命の長助</div> <div>【4】ブログ村人気投票<br /> <a href="https://blogmura.com/ranking/in?p_cid=11046371" target="_blank" ><img src="https://b.blogmura.com/original/1160614" width="240" height="180" border="0" alt="にほんブログ村 にほんブログ村へ" /></a></div> <div>【5】ブログ村人気投票<br /> <a href="https://blogmura.com/ranking/in?p_cid=11046371" target="_blank" ><img src="https://b.blogmura.com/original/1205442" width="135" height="240" border="0" alt="にほんブログ村 にほんブログ村" /></a></div> <div>【6】頑張ろうよ<br /> <iframe width="320" height="180" src="https://www.youtube.com/embed/2RTU7QNSJK0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <div>【7】初期値<br />flex-direction: row ; <br /> flex-wrap: wrap ;<br /> align-content: stretch ;<br /> justify-content: flex-start ;<br /> align-items: stretch ;<br /> align-self: auto ;</div> <div>【8】キーワード<br /> start<br /> end<br /> 主軸<br /> 交差軸</div> <div>【9】A8.net<br /> <a href="https://px.a8.net/svt/ejp?a8mat=1TOPVA+B7P1TM+0K+11MLFL" rel="nofollow"> <img border="0" width="300" height="250" alt="" src="https://www21.a8.net/svt/bgt?aid=110328310678&wid=054&eno=01&mid=s00000000002006320000&mc=1"></a> <img border="0" width="1" height="1" src="https://www16.a8.net/0.gif?a8mat=1TOPVA+B7P1TM+0K+11MLFL" alt=""></div> flexコンテナ / flexアイテムを入れる大きな箱
flexアイテム / flexコンテナに入った小さな箱

①flex-direction / 横並びか縦並びか
　row / 横並び（左から右）
　row-reverse / 横並び（右から左）
　column / 縦並び（上から下）
　column-reverse / 縦並び（下から上）

②flex-wrap / 一行か複数行か（縦並びの複数行は、flexコンテナにheightの指定が必要）
　nowrap / 改行なし（一行）
　wrap / 横並びは下に改行、縦並びは右に改行
　wrap-reverse / 横並びは上に改行、縦並びは左に改行

赤線 / start 青線 / end 実線 / 主軸 破線 / 交差軸	row	row-reverse	column	column-reverse
nowrap	①②③	③②①	① ② ③	③ ② ①
wrap	①②③ ④⑤⑥ ⑦⑧⑨	③②① ⑥⑤④ ⑨⑧⑦	①④⑦ ②⑤⑧ ③⑥⑨	③⑥⑨ ②⑤⑧ ①④⑦
wrap-reverse	⑦⑧⑨ ④⑤⑥ ①②③	⑨⑧⑦ ⑥⑤④ ③②①	⑦④① ⑧⑤② ⑨⑥③	⑨⑥③ ⑧⑤② ⑦④①

③align-content / 複数行の位置関係（flexコンテナにheightの指定が必要）
　stretch / 行間なし、flexコンテナとflexアイテムの間隔なし
　flex-start / 行間なし、始まり揃え
　center / 行間なし、真ん中揃え
　flex-end / 行間なし、終わり揃え
　space-around / 行間あり、flexコンテナとflexアイテムの間隔あり
　apace-between / 行間あり、flexコンテナとflexアイテムの間隔なし

④justify-content / 行の中のflexアイテム同士の位置関係（主軸方向）
　flex-start / flexアイテム同士の間隔なし、始まり揃え
　center / flexアイテム同士の間隔なし、真ん中揃え
　flex-end / flexアイテム同士の間隔なし、終わり揃え
　space-around / flexアイテム同士の間隔あり、flexコンテナとflexアイテムの間隔あり
　space-between / flexアイテム同士の間隔あり、flexコンテナとflexアイテムの間隔なし

⑤align-items / flexアイテムの大きさと、行との位置関係（交差軸方向）の一括指定
　stretch / 行の幅いっぱいに広がる
　flex-start / flexアイテムの中身の分だけ、始まり揃え
　center / flexアイテムの中身の分だけ、真ん中揃え
　flex-end / flexアイテムの中身の分だけ、終わり揃え
　baseline / flexアイテムの中身の分だけ、baseline揃え

⑥align-self / flexアイテムの大きさと、行との位置関係（交差軸方向）の個別指定
　auto / align-itemsと同じ
　stretch / 行の幅いっぱいに広がる
　flex-start / flexアイテムの中身の分だけ、始まり揃え
　center / flexアイテムの中身の分だけ、真ん中揃え
　flex-end / flexアイテムの中身の分だけ、終わり揃え
　baseline / flexアイテムの中身の分だけ、baseline揃え

HTML <div id="flexDisplay"></div> <⚠textarea id="flexTextarea" oninput="flexSimulator();" style="height: 290px; width: 99%; font-family:monospace;"><style> #flexDisplay { display:flex; height: px ; flex-direction: row ; /*①横並びか縦並びか*/ flex-wrap: nowrap ; /*②一行か複数行か*/ align-content: stretch ; /*③複数行の位置関係*/ justify-content: flex-start ; /*④行の中のflexアイテム同士の位置関係（主軸方向）*/ align-items: stretch ; /*⑤flexアイテムの大きさと、行との位置関係（交差軸方向）の一括指定*/ } #flexDisplay div:nth-of-type(1){align-self: auto ;} /*⑥flexアイテムの大きさと、行との位置関係（交差軸方向）の個別指定*/ #flexDisplay div:nth-of-type(2){align-self: auto ;} /*⑥flexアイテムの大きさと、行との位置関係（交差軸方向）の個別指定*/ #flexDisplay div:nth-of-type(3){align-self: auto ;} /*⑥flexアイテムの大きさと、行との位置関係（交差軸方向）の個別指定*/ #flexDisplay div:nth-of-type(4){align-self: auto ;} /*⑥flexアイテムの大きさと、行との位置関係（交差軸方向）の個別指定*/ #flexDisplay div:nth-of-type(5){align-self: auto ;} /*⑥flexアイテムの大きさと、行との位置関係（交差軸方向）の個別指定*/ #flexDisplay div:nth-of-type(6){align-self: auto ;} /*⑥flexアイテムの大きさと、行との位置関係（交差軸方向）の個別指定*/ #flexDisplay div:nth-of-type(7){align-self: auto ;} /*⑥flexアイテムの大きさと、行との位置関係（交差軸方向）の個別指定*/ #flexDisplay div:nth-of-type(8){align-self: auto ;} /*⑥flexアイテムの大きさと、行との位置関係（交差軸方向）の個別指定*/ #flexDisplay div:nth-of-type(9){align-self: auto ;} /*⑥flexアイテムの大きさと、行との位置関係（交差軸方向）の個別指定*/ #flexDisplay,#flexDisplay div{border:1px solid;} </style> <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> <⚠/textarea><!--⚠は削除する-->

JavaScript <script> var flexSimulator=function(){ document.getElementById("flexDisplay").innerHTML=document.getElementById("flexTextarea").value; } setTimeout("flexSimulator()",0); </script>