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 ~~~