CSS彈性盒子布局是CSS3中新增的一種布局方式,也稱為Flex布局。
彈性盒子由一個父元素和多個子元素組成,可以在不同的方向上靈活地進行布局。如下是一個簡單的彈性盒子布局示例:
.container { display: flex; flex-direction: row; /* 主軸方向為水平方向 */ justify-content: center; /* 主軸對齊方式為居中對齊 */ align-items: center; /* 交叉軸對齊方式為居中對齊 */ } .item { flex: 1; /* 子元素等分父元素寬度 */ height: 50px; text-align: center; line-height: 50px; background-color: #eee; border: 1px solid #333; }
在上面的示例中,.container表示父元素,.item表示子元素。我們通過display: flex將父元素設置為彈性盒子布局,接著通過flex-direction設置主軸方向為水平方向,justify-content設置主軸對齊方式為居中對齊,align-items設置交叉軸對齊方式為居中對齊。子元素則通過flex: 1實現等分父元素寬度。
使用彈性盒子布局還可以通過order將子元素進行排序,通過flex-wrap設置子元素的換行方式,通過align-self設置單個子元素對齊方式。彈性盒子是一種十分靈活的布局方式,可以實現各種復雜的布局需求。