欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS中使用Flexbox來達(dá)到居中效果的實(shí)例

WEB開發(fā)者   發(fā)布時(shí)間：2015-07-15 16:59:00   作者：佚名   我要評論
這篇文章主要介紹了CSS中Flexbox來達(dá)到居中效果的實(shí)例,注意一下IE瀏覽器中的兼容問題,需要的朋友可以參考下

CSS未來發(fā)展的方向就是采用Flexbox這種設(shè)計(jì)，解決像垂直居中這種共同的問題。請注意，F(xiàn)lexbox有不止一種辦法居中，他也可以用來分欄，并解決奇奇怪怪的布局問題。
2015715165959729.jpg (606×399)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .Center-Container.is-Flexbox {   
  2.   display: -webkit-box;   
  3.   display: -moz-box;   
  4.   display: -ms-flexbox;   
  5.   display: -webkit-flex;   
  6.   display: flex;   
  7.   -webkit-box-align: center;   
  8.      -moz-box-align: center;   
  9.      -ms-flex-align: center;   
  10.   -webkit-align-items: center;   
  11.           align-items: center;   
  12.   -webkit-box-pack: center;   
  13.      -moz-box-pack: center;   
  14.      -ms-flex-pack: center;   
  15.   -webkit-justify-content: center;   
  16.           justify-content: center;   
  17. }  

　　好處：

    內(nèi)容可以是任意高寬，溢出也能表現(xiàn)良好
    可以用于各種高級布局技巧

　　同時(shí)注意： 不支持IE8-9

    需要在body上寫樣式，或者需要額外容器
    需要各種廠商前綴兼容現(xiàn)代瀏覽器
    可能有潛在的性能問題

相關(guān)文章

  • 利用CSS3的flexbox實(shí)現(xiàn)水平垂直居中與三列等高布局

    這篇文章給大家介紹了三個(gè)小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實(shí)現(xiàn)水平垂直居中對齊和三列等高自適應(yīng)頁腳區(qū)域黏附底部的布局，有需要的可以參考
    2016-09-12

  • Flexbox制作CSS布局實(shí)現(xiàn)水平垂直居中的簡單實(shí)例

    下面小編就為大家?guī)硪黄狥lexbox制作CSS布局實(shí)現(xiàn)水平垂直居中的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-07-27

  • CSS3的Flexbox骰子布局的實(shí)現(xiàn)及問題講解

    骰子布局顧名思義,就是好比骰子的一面最多可以放置9個(gè)點(diǎn),而每個(gè)面放置的點(diǎn)數(shù)正好就是一個(gè)布局的模型圖,這里我們就帶來CSS3的Flexbox骰子布局的實(shí)現(xiàn)及問題講解:
    2016-06-27

  • 基礎(chǔ)的CSS3彈性盒Flexbox布局使用實(shí)例

    這篇文章主要介紹了基礎(chǔ)的CSS3彈性盒Flexbox布局使用實(shí)例,文中最后也提到了解決兼容性問題的基本方法,需要的朋友可以參考下
    2016-04-08

  • CSS3的Flexbox布局的簡明入門指南

    這篇文章主要介紹了CSS3的Flexbox布局的簡明入門指南,Flexbox在"布局界"可謂風(fēng)光無限,近來Facebook開源的React Native也采用Flexbox來布局,需要的朋友可以參考下
    2016-04-08

  • css使用flexbox布局容器內(nèi)多元素水平居中

    這篇文章主要為大家詳細(xì)介紹了css使用flexbox布局容器內(nèi)多元素水平居中的方法，如何使用flexbox布局多元素水平居中？本文為大家進(jìn)行解答，感興趣的小伙伴們可以參考一下
    2016-03-17

  • css3彈性盒模型（Flexbox）詳細(xì)介紹

    今天剛學(xué)了css3的彈性盒模型，這是一個(gè)可以讓你告別浮動(dòng)、完美實(shí)現(xiàn)垂直水平居中的新特性。本文主要是總結(jié)一下今天所學(xué)，有需要的朋友可以參考下
    2014-10-08

  • CSS3 Flexbox中flex-shrink屬性的用法示例介紹

    當(dāng)flex items的大小超過了flex container時(shí)， 各個(gè)flex item的壓縮比例，下面有個(gè)不錯(cuò)的教程，大家可以參考下
    2013-12-30

  • CSS Flexbox的具體用法詳解

    這篇文章主要介紹了CSS Flexbox的具體用法詳解的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-12-15

最新評論