CSS3手冊中最重要的功能之一是Flex布局,它是一種強大的排版方式,可以用于創建響應式的布局。
.container {
display: flex;
}
上面這段代碼表示將元素的父元素設置為Flex容器。接下來,我們將來討論Flex容器和其內部的Flex項。
1. Flex容器屬性
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
- flex-direction:指定Flex容器中的主軸方向,可以是row(默認值,水平方向),column(垂直方向)等。
- justify-content:定義Flex項在主軸上的對齊方式,如居中,左對齊,右對齊等。
- align-items:定義Flex項在交叉軸上的對齊方式,如居中,頂部對齊,底部對齊等。
- flex-wrap:設置Flex項是否換行。
2. Flex項屬性
.item {
flex-grow: 1;
flex-basis: 0;
flex-shrink: 0;
}
- flex-grow:定義Flex項的放大比例,值越大,占據的空間越大。
- flex-basis:設定Flex項的基礎大小。
- flex-shrink:定義Flex項的縮小比例,當空間不足時,值越大的Flex項會先縮小。
以上是關于CSS3手冊中Flex布局的一些介紹,希望可以對開發者們有所幫助。