HTML
CCS flex-direction 屬性介紹 属性指定了内部元素是如何在 flex 容器中布局的, 定义了主轴的方向(正方向或反方向)。
CSS justify-content 屬性介紹 內容物會依照交錯軸線排列成一行。
CSS align-items 屬性介紹 相交軸上彈性項目的對齊位置。
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; }
visibility:hidden 物件內容隱藏了,的位置保持著不會消失 display:none 物件內容連原本所在的位置都一起被隱藏了