色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css 伸縮性flex

劉姿婷2年前9瀏覽0評論
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)慎。