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

【使い方】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>