1.flex教程 · html-css

~~~ justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly; ~~~ - space-between兩端對齊，子元素之間的間隔相等 - space-around子元素之間的間隔,比子元素到父元素邊框的間隔大一倍 - space-evenly父元素的邊界到子元素之間的間隔,和子元素與子元素之間的間隔相等(所有的間隔相等) ~~~ <style> *{margin:0;padding:0} .container { height: 500px; width: 1000px; margin-left: auto; margin-right: auto; } .list { display: flex; justify-content: space-between; } .list>div { width: 240px; height: 300px; border: 1px solid #333; margin-bottom: 10px; } </style> <body> <div class="container"> <div class="list"> <div><img src="images/data_image.png" alt=""></div> <div><img src="images/data_image.png" alt=""></div> <div><img src="images/data_image.png" alt=""></div> <div><img src="images/data_image.png" alt=""></div> </div> <div class="list"> <div><img src="images/data_image.png"" alt=""></div> <div><img src="images/data_image.png"" alt=""></div> <div><img src="images/data_image.png"" alt=""></div> <div><img src="images/data_image.png"" alt=""></div> </div> </div> </body> ~~~ ~~~ <div class="box"> </div> //css .box{ display:flex } ~~~ ~~~ //能夠給父元素設置的屬性 justify-content -- 設置子元素水平方向 align-items--設置子元素垂直方向 flex-direction -- 設置子元素的排列方向 flex-wrap --子元素是否換行 ~~~ ~~~ //能夠給子元素設置的屬性 order flex align-selft ~~~