CSS 排列對齊 flex-wrap,

<pre><t1>CCS flex-wrap 屬性介紹</t1> <r>flex-wrap</r> : 彈性項目單行的數量多到超過容器，你想要讓它換行， 它就會以相交軸的方向換行。 屬性值: nowrap | wrap | wrap-reverse nowrap: 它使項目用單行換行。 預設 wrap: 項目的寬度將彈性項目換行成多行。 wrap-reverse: 反轉彈性項目的流動。 <t1>CCS justifyContent 屬性介紹</t1> <r>justifyContent</r>: 項目周圍有額外空間時如何對齊子項目。 屬性值: flex-start | flex-end | center space-between | space-around | space-evenly flex-start: 從容器的開頭對齊彈性項目。 flex-end: 它用於在容器的末端對齊彈性項目。 center: 目對齊到容器的中心。 space-between: 兩端對齊平分。 space-around: 整體平均分配。 space-evenly: 從左向右等間距平分。 本範例 : 張不同大小 img(圖片) 擠壓對齊掛列在 div 內， CSS { display: flex; flex-wrap: nowrap ; justify-content: space-between; } </pre> <style> pre {font-size: 20px ;} t1{font-size: 30px;color : blue;font-weight : bold;} r {color : red} </style>

00

<div id="MMdiv"> <div id="Mdiv"> <img alt="" border="0" height="200" data-original-height="5664" data-original-width="2752" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlsqgvtbtMMw9gpcE7nwt7yL2EHl69kHvpoXNyXXm66zikbro9EZcah31RDRaasi49_uIkrKnTT8kdSWnruLHE72MpmtsWQ6zYLtn3-MYRQzkjg_8aRq_dsS_P8aFJaR2snH-bSFfvkrlZc86Qu8a5DzcQvuPMyNIwdGBsK4BkMIkODSOs-v71SbCB_Q/s200/20191126_143256.jpg"/> <img alt="" border="0" width="200" data-original-height="1200" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuyvs16AgCFxqcUQwJL-hbM6BO1KqesIX6dhv0b_OuoJxGHtGol8D2AK-n9b4-G1Mb6QVk9eEgkbehZ3Ok3g7D_fE_cTgc-RpgZn3vLs0L-DumSz9KfEsKlz-uDzv0J-AGbLvY4z51QGUph4DNj0QR0yDk9r_QM7Ht2swrkHGqmNm3xgplRhDE2wuzag/s200/IMG-20191202-WA0000.jpg"/> <img alt="" border="0" width="200" data-original-height="3264" data-original-width="4912" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXzxk8QtStXyTKYD_uLrleYOlcUSApF6E7nEqwgh1FtheSzocK4S7tCcXCZ7JCHUYwU4jKAApO_oGZiqFyjPfTXh_Hs6MXHHNCkE3PX94OlfPRiKbevDO5nzi6u_aZFFvvGkY3tvsfIvMM2rdIMeBtxaQpPmITY1tqWoWGcfaTlRcr-10dSI232d6M3A/s200/AddText_02-15-09.19.27.jpg"/> <img alt="" border="0" width="200" data-original-height="2752" data-original-width="2752" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIwGexo4tbEHt0nK-rLTeaFXk_ufMClKBVfCuI5J52aUYTSeD6Elh70bS3HjD0v8xopsjZidmUq84gCPG300s-Y3xHLTXpvq4tC3U19AGFzTe_sjLC1kjJbLw4sjkz7zd0k8UFeLSnBcQjA3Mm8_UCVH1X92CJUZPlw-3mAsWdEakkBvk5WpwmwPyKNQ/s200/IMG_20191205_095751_455.jpg"/> <img alt="" border="0" width="200" data-original-height="3264" data-original-width="4912" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT1wna2A7EYai6fN4oXIakGkJYQbSRbM5IGfotjXE_Cq3SPNRucSBrEHErotfR1lo1HfS00kP17-RG599OU50hJBv7uWoUV0ussRaVFpstlTL8c6nGTN6fxR_p5V7NxcI3avfR2B4M9XarIcQjeU0sTH_ubrXrG8nTAGe5J8JJDFWI-JccwqM9_AddHA/s200/AddText_02-09-02.53.42.jpg"/> <img alt="" border="0" width="200" data-original-height="3264" data-original-width="4912" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcAyJSaOjkG2NeVAF7ZuHjusrgr54ph7tsIQc3JeYgyScrD_dCLfWc-LiKFl_BRKhXvZu3kcQyO9-ODRRkZTQuUZPUxhNkil7ujHqAp2CFGtZGywS0crGSgQMw0PJLv3qycYVWRaUcEOhvpZ4r-1yPTUWLsTk-oBSbVjw5ZeH6JB2z5XirC2mkt69rYg/s200/IMG-20200910-WA0020.jpg"/> <img alt="" border="0" width="200" data-original-height="3264" data-original-width="4912" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil9Z2xaH7ZHyGECK_4VZ37ZMiL1zhnQPJEN31qQaRfOduowssNO2aVxkBjc2wemSH-7Y3B7e--zuytxtFsVDz3Q4aQsjZCbyY3SWwV6ciZClTKWMhhDAv2B2_bUafLP08Oo04Rg6Kq1qrXNZFl4IW9UTGEx79XFy95k6vPrqqj1qwpV2RixCRBJfBMaQ/s200/20200627_182247.jpg"/> <img alt="" border="0" width="200" data-original-height="3264" data-original-width="4912" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3QDcfnkB1vG7u0cjB5iwUt7l4osEFtG4rP0fOE1QK4XoqpQNzPuQXANpic1ddJkPjeD4tx48dCLEb5IGijY6lQG1K3mznGVI9tnQek4gzOa0Mct1A00HTFnITTLjAGaN9ZDQK13E-GjmAhk_m81dsIWDzBbWBxowOzl8WLNhHSdzSPUVMNAmxOWmTEg/s200/20200522_164632.jpg"/> <img alt="" border="0" width="200" data-original-height="225" data-original-width="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcCdmlHrUu0DktPN0hnQfPYaga2EE_OitD9V66MAcYOdIt4Nt493PklqbbuTGCxKtFoxmf7sauZsHq-YfVQToybSxukjtU5hdfFo3sPoYzyLyYfVQnntjH4Dq0jiDp0ROr8AH8uVassI6975Q3uBmNsa50riyAY3o23vuNQNB7p_8BPkbGpgOYiIqRgg/s200/IMG-20200506-WA0017.jpeg"/> <img alt="" border="0" height="200" data-original-height="1600" data-original-width="900" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCd4jJPg_kWVL4J7ZbaTlwr4EK2HB9HuZfa-cdFUvwyY2Rwy_9174RDtUCx0q-RnQYZOYa1qbnF0YtWT6dRg6UJ_8Q5Plrq3ZaiML0XWCYdzmAUnFKOrGyI6-XavlxC5ah1viPXqYMNnBEqhWEgcgz33Ziv0VciR3EJRILNaLAyCikx3tZFXZqPkE_Q/s200/IMG-20200519-WA0006.jpg"/> <img alt="" border="0" width="200" data-original-height="192" data-original-width="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNvVfS1bX20uCNGnwpJcD1EAiyc-_JxkDRVbzZ2Ce6QUnzh9_NbCtuRRuXm3v2C60cQGWhR0_RBkOkUEiH82EGXXhjGaNkQj0Ww9ND_1bQnhYazRo2iKM0zwCPxi1BryC_Bk5efrq-b3-hwHwg17L0isYZS-G9t93xVo2T-zJ6dHbVDKdJgahH_9WQdw/s200/IMG_20191222_184038_885.jpg"/> <img alt="" border="0" width="200" data-original-height="192" data-original-width="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxFzqkel49Ji7X1wn0DbGS5EvXzaEI8P7-a02xTExPWexumxR4QYrJZ_8XCfFVi1WWXdBoFylRPYfnWyEy7veQ9ezUB7najfXKkXf53DnROYxcUu0pXNIr8HcreVZaVa9WwTvNnFRAZ0_xjLnje4oB_Ig8D0N7z53var9ZBC4PRHd1CDdQPucBh9Y9LQ/s200/IMG-20201004-WA0005.jpg"/> <img alt="" border="0" width="200" data-original-height="192" data-original-width="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk2PElNglFSR1m_LLV2tgdkPI_HgR4S05N9fnn0o0aA9tLk7rEqW9MiTSGaOPzDz5Wf9VIe1dyop4bICQr6DMCYzqvd--OUdKDC1pp31hmSqTh3R9UkMft68mxOcrzjWwn56_FNdSuWSpcHeXasuC0juRl-cxHLIfn8pXVvHXOA_Jhg6DATqTmLe2INA/s200/IMG_20191208_103211_472.jpg"/> <img alt="" border="0" width="200" data-original-height="3264" data-original-width="4912" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3QDcfnkB1vG7u0cjB5iwUt7l4osEFtG4rP0fOE1QK4XoqpQNzPuQXANpic1ddJkPjeD4tx48dCLEb5IGijY6lQG1K3mznGVI9tnQek4gzOa0Mct1A00HTFnITTLjAGaN9ZDQK13E-GjmAhk_m81dsIWDzBbWBxowOzl8WLNhHSdzSPUVMNAmxOWmTEg/s200/20200522_164632.jpg"/> <img alt="" border="0" width="200" data-original-height="225" data-original-width="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcCdmlHrUu0DktPN0hnQfPYaga2EE_OitD9V66MAcYOdIt4Nt493PklqbbuTGCxKtFoxmf7sauZsHq-YfVQToybSxukjtU5hdfFo3sPoYzyLyYfVQnntjH4Dq0jiDp0ROr8AH8uVassI6975Q3uBmNsa50riyAY3o23vuNQNB7p_8BPkbGpgOYiIqRgg/s200/IMG-20200506-WA0017.jpeg"/> <img alt="" border="0" height="200" data-original-height="1600" data-original-width="900" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCd4jJPg_kWVL4J7ZbaTlwr4EK2HB9HuZfa-cdFUvwyY2Rwy_9174RDtUCx0q-RnQYZOYa1qbnF0YtWT6dRg6UJ_8Q5Plrq3ZaiML0XWCYdzmAUnFKOrGyI6-XavlxC5ah1viPXqYMNnBEqhWEgcgz33Ziv0VciR3EJRILNaLAyCikx3tZFXZqPkE_Q/s200/IMG-20200519-WA0006.jpg"/> <img alt="" border="0" width="200" data-original-height="192" data-original-width="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNvVfS1bX20uCNGnwpJcD1EAiyc-_JxkDRVbzZ2Ce6QUnzh9_NbCtuRRuXm3v2C60cQGWhR0_RBkOkUEiH82EGXXhjGaNkQj0Ww9ND_1bQnhYazRo2iKM0zwCPxi1BryC_Bk5efrq-b3-hwHwg17L0isYZS-G9t93xVo2T-zJ6dHbVDKdJgahH_9WQdw/s200/IMG_20191222_184038_885.jpg"/> </div> </div> <div class="st"> display:flex ; flex-wrap: <select onchange="Mdiv.style.flexWrap = this.value"> <option value="nowrap" > wrap-reverse </option> <option value="wrap" > wrap </option> <option value="wrap-reverse" > wrap-reverse </option> </select> <Br> justifyContent : <select onchange="Mdiv.style.justifyContent = this.value" > <option value="initial" > initial </option> <option value="flex-start" > flex-start </option> <option value="flex-end" > flex-end </option> <option value="space-between"> space-between </option> <option value="space-around" > space-around </option> <option value="space-evenly" > space-evenly </option> <option value="center " > center </option> <option value="initial" > initial </option> </select> <br> </div> <style> img {width:auto;height:100px; border: 5px solid snow; margin:10px; } .st ,.st select { font-size: 22px; } #MMdiv{ width:100%;height:600; display: flex; justify-content: center; align-items : center; } #Mdiv{ width:70%;height:500; overflow:scroll; border: 3px solid black; display: flex; flex-wrap: initial; justify-content: initial; } </style>

00

Edit

#flex-wrap #flex-wrap () #擠壓對齊掛列 img #擠壓對齊掛列 div #script javascript #javascript #wrap #wrap-reverse #nowrap #html #img #div #justifyContent #flex-start #flex-end #space-between #space-around #space-evenly #center #平分兩端對齊 #整體平均分配 #script #CSS #script