亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS中使用Flexbox來達到居中效果的實例

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

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

CSS Code復制內容到剪貼板
  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. }  

　　好處：

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

　　同時注意： 不支持IE8-9

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

相關文章

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

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

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

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

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

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

  • 基礎的CSS3彈性盒Flexbox布局使用實例

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

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

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

  • css使用flexbox布局容器內多元素水平居中

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

  • css3彈性盒模型（Flexbox）詳細介紹

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

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

    當flex items的大小超過了flex container時， 各個flex item的壓縮比例，下面有個不錯的教程，大家可以參考下
    2013-12-30

  • CSS Flexbox的具體用法詳解

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

最新評論