BasicHTML Flex

控制外層，讓內層能並排，並且如果寬度超過會做比例上的調整，不會超出父層，每層一樣高

父層

display:flex;
flex-direction: row(default)
flex-directiion: row-reverse(從右到左)
flex-direction: column(上到下排版)
flex-direction: column-reverse

flex排版靠左對齊

justify-content: flex-start;

置中

justify-content: center;

等距，並且有留margin

justify-content:space-around;

靠右

judtify-content: flex-end;

等距，沒有留margin，貼齊容器

judtify-content: space-between;

換行

flex-wrap: wrap;

交錯軸：(如果主軸從左到右，交錯軸就是由上到下)

align-items

靠上

align-items: flex-start;

垂直置中

align-items: center;

靠下

align-items: flex-end;

滿版

align-items: stretch;

BasicHTML Flex ​