Alignment

這里我特別要提到的是Flexbox，因為他可以使內(nèi)容在水平和垂直方向居中，僅需要3行CSS代碼。

示例代碼：

.box?{ ?

??display:?+flex; ?

??+justify-content:?center; ?

??+align-items:?center; ?

?} ?

? ?

<section?class="box">?

??<div>A</div><div>B</div><div>C</div>?

</section>?

?備注：代碼中的“+”表示供應(yīng)商前綴，例如“+flex”可能是-webkit-flex，-ms-flex等。

以上例子會產(chǎn)生如下布局：

演示！

display：flex——通知父容器要成為一個‘flex container’。在上面的插圖中，紅色的區(qū)域表示flex container并且里面包含三個“孩子”，藍(lán)色的區(qū)域，屬于‘flex items’。A、B、C這三個字母位于主軸和十字軸位置上。僅僅使用了：justify-content:center和align-items:center這兩行代碼。

排序和方向定位

Flexbox的另一個神奇屬性是我們可以從標(biāo)簽的呈現(xiàn)方式上對其進(jìn)行完全獨(dú)立排序。這個需要用到兩個新的CSS屬性，order和flex-direction。Order是對每個“兄弟姐妹”成員進(jìn)行排序，flex-direction修改他們的方向（行VS列）。

你想把A、B、C這三個字母放在同一個列里面嗎？沒問題，只需要設(shè)置flex-direction:column即可。

備注：默認(rèn)情況下，每個項目的排序是根據(jù)標(biāo)簽的默認(rèn)排序來的，但是我們可以輕易地覆蓋默認(rèn)排序，通過給B一個比其他家庭成員低一階的值，它將優(yōu)先于其他成員。

.box?{ ?

??+flex-direction:?column; ?

} ?

.box?>?:nth-child(2)?{ ?

??+order:?-1; ?

}?

效果：

值得注意的是，我們不能改變文件內(nèi)容，它仍然是A、B、C三個字母。Flexbox可以使我們能夠獨(dú)立于內(nèi)容進(jìn)行編排頁面樣式。

1?2 3 4 下一頁

?

Flexibility

Flexbox的“面包”和“黃油”正是flexibility這一特征的體現(xiàn)。除了alignment、orientation、和ordering，還可以通知項目成員增加/減少填充它們周圍可利用的空間。這些都可以通過flex屬性實(shí)現(xiàn)。

Flex屬性需要三個值，第一個postive flex值：與其他兄弟姐妹相比，還有多少元素可以增加；第二個是negative flex：可以縮小多少個元素；第三個表示元素所需的寬度。

修改我們之前的例子，我們可以使用flex屬性來使B的空間可以多添加2個成員。

.box?>?*?{ ?

??+flex:?1?0?auto; ?

} ?

.box?>?:nth-child(2)?{ ?

??+flex:?3?0?auto; ?

}?

期望效果：

轉(zhuǎn)載于:https://www.cnblogs.com/baoguanxia/p/4282269.html

總結(jié)

以上是生活随笔為你收集整理的css flex排序居中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。