HTML
CCS align-content 屬性介紹 不對齊彈性項目,而是對齊彈性線 (垂直)。 屬性 : center 置中對齊 flex-start 靠上對齊 flex-end 靠下對齊 space-between 均勻上下分布 space-around 均勻分散上下對齊( 上下邊 間距一半) space-evenly 均勻分散上下對齊 start 靠上對齊 end 靠下對齊 baseline 對齊 flex 基準線 first baseline; last baseline stretch 撐滿對齊 initial 繼承 inherit 最初的 normal 設置對齊 safe center 安全的 置中對齊 unsafe center 不安全 置中對齊 CCS flex-wrap 屬性介紹 flex-wrap 屬性規定flex容器是單行或者多行, 同時橫軸的方向決定了新行堆疊的方向。 屬性 : nowrap 默認值。規定靈活的項目不拆行或不拆列。 wrap 規定靈活的項目在必要的時候拆行或拆列。 wrap-reverse 規定靈活的項目在必要的時候拆行或拆列,但是以相反的順序。 initial 設置該屬性為它的默認值。請參閱 initial 。 inherit 從父元素繼承該屬性。請參閱 inherit 。
CCS flex-wrap 屬性介紹 flex-wrap : 彈性項目單行的數量多到超過容器,你想要讓它換行, 它就會以相交軸的方向換行。 屬性值: nowrap | wrap | wrap-reverse nowrap: 它使項目用單行換行。 預設 wrap: 項目的寬度將彈性項目換行成多行。 wrap-reverse: 反轉彈性項目的流動。 CCS justifyContent 屬性介紹 justifyContent: 項目周圍有額外空間時如何對齊子項目。 屬性值: flex-start | flex-end | center space-between | space-around | space-evenly flex-start: 從容器的開頭對齊彈性項目。 flex-end: 它用於在容器的末端對齊彈性項目。 center: 目對齊到容器的中心。 space-between: 兩端對齊平分。 space-around: 整體平均分配。 space-evenly: 從左向右等間距平分。 本範例 : 張不同大小 img(圖片) 擠壓對齊掛列在 div 內, CSS { display: flex; flex-wrap: nowrap ; justify-content: space-between; }