05justify-content

display: flex; 的預設軸是x軸

justify-content: 設定主軸上的子元素排列的方式

是以在使用之前要确定好哪一個是主軸

/* justify-content:flex-start; 如果主軸是x,從左到右 如果主軸是y,從上到下*/

/* justify-content: flex-end; 如果主軸是y,從下到上到右 如果主軸是x,從右到做*/

/* justify-content:center; 居中*/

/* justify-content: space-around; */

/* justify-content: space-between; */

#main {
    width: 800px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: flex; 
    flex-direction: row;
    justify-content:flex-start;
}


#main>div{
    width: 150px;
    height: 100px;
    background: #0099FF;
}

<div id="main">
  <div style="background-color:coral;">11</div>
  <div style="background-color:lightblue;">22</div>
  <div style="background-color:pink;">33</div>
  <div style="background-color:olive;">4</div>
</div>      

justify-content:flex-end;

justify-content: space-around;

我們公司正在尋找前端和後端，感興趣的小哥哥或者小姐姐可以私聊我

如果你是大佬，請帶我們飛

如果你是菜鳥，我們帶你飛

僅限成都

作者：明月人倚樓

出處：https://www.cnblogs.com/IwishIcould/

想問問題，打賞了卑微的部落客，求求你備注一下的扣扣或者微信；這樣我好聯系你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注部落客，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，是以如果你心情還比較高興，也是可以掃碼打賞部落客(っ•̀ω•́)っ✎⁾⁾！

支付寶

微信

本文版權歸作者所有，歡迎轉載，未經作者同意須保留此段聲明，在文章頁面明顯位置給出原文連接配接

如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。