1. 程式人生 > >Flex-彈性布局

Flex-彈性布局

最大的 space ble cal -a align ica 靈活 行內元素

Flex是Flexible Box的縮寫,意為“彈性布局”,用來為盒狀模型提供最大的靈活性。

任何一個容器都可以指定為Flex布局。如:

.box{

  display:flex;

}

行內元素也可以使用Flex布局。

.box{

  display:inline-flex;

}

註意,設為Flex布局以後,子元素的float、clear和vertical-align屬性將失效。

關於彈性布局,在這段時間的學習中,我總結了以下幾個常用的屬性

1.容器的屬性

1.1是否換行

flex-wrap:nowrap/wrap/wrap-reverse;

1.2justify-content屬性

justify-content:center(居中)/space-between(對齊);

2.項目的屬性

flex-grow

flex-grow:1;

如果所有項目的flex-grow屬性都為1,則它們將等分剩余空間(如果有的話)。如果一個項目的flex-grow屬性為2,其他項目都為1,則前者占據的剩余空間將比其他項多一倍。

Flex-彈性布局