CSS伸縮性Flex
Flex是一種CSS3布局模式,它可以方便地控制盒子的寬度、高度和排列方式。以下是一些關(guān)于Flex的基礎(chǔ)知識:
.box { display: flex; /*彈性布局容器*/ }
以上代碼中,“display:flex;”就是定義了一個彈性布局容器。接下來,就可以定義容器內(nèi)的彈性子元素了:
.box { display: flex; } .item { /*彈性子元素*/ }
下面是關(guān)于Flex中常用的屬性:
/* 容器屬性 */ flex-direction:row | row-reverse | column | column-reverse; /* 定義主軸為水平 | 水平反向 | 垂直 | 垂直反向 */ flex-wrap: wrap | nowrap | wrap-reverse; /* 定義是否換行 */ flex-flow:<‘flex-direction’><‘flex-wrap’>; /* flex-direction 和 flex-wrap 的快捷寫法 */ justify-content: flex-start | flex-end | center | space-between | space-around; /* 定義主軸上的對齊方式 */ align-items: flex-start | flex-end | center | baseline | stretch; /* 定義在交叉軸方向上對齊方式 */ align-content: flex-start | flex-end | center | space-between | space-around | stretch; /* 定義多軸線的對齊方式 */ /* 子元素屬性 */ order:; /* 定義子元素的排列順序 */ flex-grow: ; /* 定義子元素放大比例 */ flex-shrink: ; /* 定義子元素縮小比例 */ flex-basis: auto; /* 定義子元素的基準(zhǔn)值 */ flex: none | [<'flex-grow'><'flex-shrink'>?<'flex-basis'>]; /* flex-grow, flex-shrink 和 flex-basis 的快捷寫法 */ align-self: auto | flex-start | flex-end | center | baseline | stretch; /* 定義某個子元素在交叉軸方向上的對齊方式 */
使用Flex布局能夠在不同尺寸的屏幕上自適應(yīng),能夠讓頁面適配大多數(shù)移動設(shè)備和PC屏幕。當(dāng)然,實踐證明,排版好看的前提是得懂CSS基礎(chǔ)和細(xì)節(jié),更重要的是耐心和謹(jǐn)慎。