在CSS中，布局一直是前端開發的一項核心技能，而新一代布局方式 flex（flexible box）的出現，則進一步提升了CSS的布局能力和便利性。

.flex-container{
display: flex;
}
.flex-item{
flex: 1; 
}

Flex布局方式是指可以在容器中設置一些彈性盒子（flexbox），通過控制彈性盒子的排列方式來達到我們想要的布局效果。其中，一些常用的屬性如下：

• display: flex/flex-inline/flex-inline-block：定義彈性容器，使得子元素成為彈性項
• flex-direction: row/column/row-reverse/column-reverse：定義主軸方向
• flex-wrap: nowrap/wrap/wrap-reverse：定義彈性盒子是否換行
• justify-content: flex-start/flex-end/center/space-between/space-around：定義元素在主軸上的對齊方式
• align-items: stretch/flex-start/flex-end/center/baseline：定義元素在交叉軸上的對齊方式
• align-content: flex-start/flex-end/center/space-between/space-around/ stretch：定義多行彈性盒子的對齊方式
• flex-grow: 數值：定義彈性盒子的放大比例
• flex-shrink: 數值：定義彈性盒子的縮小比例

Flex布局方式具有響應式的特性，使得頁面能夠更好地適應不同尺寸的屏幕。同時，由于各個盒子之間的相對位置是基于容器而不是瀏覽器窗口的，因此也能夠更好地處理布局和相對定位的問題。此外，Flex布局方式相比傳統的float和position需要考慮更多的樣式和媒體查詢，Flex布局方式更加直觀和方便。