/* justify-content: space-around;
運用在父級元素上
第一個子元素距離左邊的距離==最后一個子元素距離右邊的距離
除第一個子元素和最后一個子元素外,第2個,第3個...一直到倒數第二個子元素，這些子元素距離左右兩邊的間距都是相等
巧記：around 是四周，說明四周是有間距的。
*/
/* justify-content: space-between;
運用在父級元素上
第一個子元素和最后一個子元素 分別靠在最左和最右
除第一個子元素和最后一個子元素外,第2個,第3個...一直到倒數第二個子元素，這些子元素距離左右兩邊的間距都是相等
*/
<style>
*{ padding: 0; margin: 0; } ul{ list-style: none; width:100%; background: orchid; } ul{ display: flex; justify-content: space-around; } ul>li{ width: 180px; height: 100px; background: pink; }
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
</html>
justify-content: space-between;如下
