2. 程式人生 > >css3 flex流動自適應響應式佈局設計

css3 flex流動自適應響應式佈局設計

阿新 • • 發佈：2019-01-06

一、flex應運而生

HTML是骨骼、架構，CSS是肌肉、美妝，JS是運動、表現。他們的互相配合才誕生了成千上萬的網頁，豐富多彩的前端世界讓前端開發人員越來越痴迷。尤其是HTML5、CSS3的出現，更加讓這種感覺越來越深厚。

在以往要排版一個圖片、文字的列表，如：

在做這樣的貼邊均勻等分列表，一般有2種做法。

1、浮動方法（普通）

採用ul>li的DOM結構，li左浮動（ie6需要設定為行內樣式）。假設ul的寬度為W，每個li專案的總寬度是x，每一行有4個專案。為了讓每一行的第一個li都貼邊對齊，那麼就需要設定ul左邊距為負值。可得，li之間的左邊距ML=(W-x*4)/4。詳細程式碼如下：

  1. <!doctype html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <linkrel="stylesheet"href="http://static.qianduanblog.com/css/3/last.css">
  6. <title>貼邊的均勻等分列表1</title>
  7. <style>
  8. .container{
  9. margin:50pxauto;
  10. width:700px;
  11. overflow: hidden;
  12. }
  13. .container ul{
  14. width:700px;
  15. margin:0auto
    ;
  16. margin-left:-75px;
  17. background:#DEF3FF;
  18. }
  19. .container li{
  20. width:100px;
  21. margin-left:75px;
  22. margin-bottom:20px;
  23. }
  24. .container .img{
  25. width:100px;
  26. height:100px;
  27. }
  28. .container .title{
  29. height:20px;
  30. line-height:20px;
  31. text-align: center;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <divclass="container">
  37. <ulclass="clearfix">
  38. <liclass="pull-left">
  39. <pclass="img"><imgsrc="http://dummyimage.com/100x100"alt=""></p>
  40. <pclass="title"><ahref="#">標題名稱</a></p>
  41. </li>
  42. <liclass="pull-left">
  43. <pclass="img"><imgsrc="http://dummyimage.com/100x100"alt=""></p>
  44. <pclass="title"><ahref="#">標題名稱</a></p>
  45. </li>
  46. <liclass="pull-left">
  47. <pclass="img"><imgsrc="http://dummyimage.com/100x100"alt=""></p>
  48. <pclass="title"><ahref="#">標題名稱</a></p>
  49. </li>
  50. <liclass="pull-left">
  51. <pclass="img"><imgsrc="http://dummyimage.com/100x100"alt=""></p>
  52. <pclass="title"><ahref="#">標題名稱</a></p>
  53. </li>
  54. <liclass="pull-left">
  55. <pclass="img"><imgsrc="http://dummyimage.com/100x100"alt=""></p>
  56. <pclass="title"><ahref="#">標題名稱</a></p>
  57. </li>
  58. <liclass="pull-left">
  59. <pclass="img"><imgsrc="http://dummyimage.com/100x100"alt=""></p>
  60. <pclass="title"><ahref="#">標題名稱</a></p>
  61. </li>
  62. <liclass="pull-left">
  63. <pclass="img"><imgsrc="http://dummyimage.com/100x100"alt=""></p>
  64. <pclass="title"><ahref="#">標題名稱</a></p>
  65. </li>
  66. <liclass="pull-left">
  67. <pclass="img"><imgsrc="http://dummyimage.com/100x100"alt=""></p>
  68. <pclass="title"><ahref="#">標題名稱</a></p>
  69. </li>
  70. </ul>
  71. </div>
  72. </body>
  73. </html>

上述程式碼，ul應占用的寬度為700px，每個li的寬度是100px，每行4個，有3個空隙，如果要貼邊對齊，就再加一個。每個空隙的寬度為(700-100*4)/4=75px。

2、兩端對齊方法（另類）

兩端對齊方法採用的是css2中text-align:textify; 屬性，它具有良好的文字排版效果，就像word裡的兩端對齊一樣，表現效果也一致。

一般認為，兩端對齊只對行內樣式起作用，而CSS當中是可以重置任意元素為行內或者塊狀樣式的。要想目標群體兩端對齊，那麼就需要設定所有專案的display為inline-block（行內塊狀樣式）。因為每一行要兩端對齊，每行四個專案li，那麼每個專案li佔用的寬度就是25%，但在實際情況中，因為要處理空白的緣故，寫20~24%都是比較合理的，下面例子就是一個簡單的說明。

詳細的頁面程式碼如下：

  1. <!doctype html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <linkrel="stylesheet"href="http://static.qianduanblog.com/css/3/last.css">
  6. <title>貼邊的均勻等分列表2</title>
  7. <style>
  8. .container{
  9. margin:50pxauto;
  10. width:600px;
  11. overflow: hidden;
  12. }
  13. .container ul{
  14. width:600px;
  15. margin:0auto;
  16. background:#DEF3FF;
  17. font-size:0;
  18. text-align: justify;
  19. }
  20. .container li{
  21. width:24%;
  22. margin-bottom:20px;
  23. display:inline-block;
  24. *display:inline;
  25. *zoom:1;
  26. background:#C23A3A;
  27. }
  28. .container .inner,
  29. .container .img{
  30. width:100px;
  31. height:100px;
  32. }
  33. .container .title{
  34. height:20px;
  35. line-height:20px;
  36. text-align: center;
  37. font-size:14px;
  38. }
  39. .container .break-li{
  40. height:0;
  41. width:100%;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <divclass="container">
  47. <ulclass="clearfix">
  48. <li>
  49. <divclass="inner">
  50. <pclass="img"><imgsrc="http://dummyimage.com/100x100"alt=""></p>
  51. <pclass="title"><ahref="#">標題名稱</a></p>
  52. </div>
  53. </li>
  54. <li>
  55. <divclass="inner">
  56. <pclass="img"><imgsrc="http://dummyimage.com/100x100"alt=""></p>
  57. <pclass="title"><ahref="#">標題名稱</a></p>
  58. </div>
  59. </li>
  60. <li>
  61. <divclass="inner">
  62. <pclass="img"><imgsrc="http://dummyimage.com/100x100"alt=""></p>
  63. <pclass="title"><ahref="#">標題名稱</a></p>
  64. </div>
  65. </li>
  66. <li>
  67. <divclass="inner">
  68. <pclass="img"><imgsrc="http://dummyimage.com/100x100"alt=""></p>
  69. <pclass="title"><ahref="#">標題名稱</a></p>
  70. </div>
  71. </li>
  72. <li>
  73. <divclass="inner">
  74. <pclass="img"><imgsrc="http://dummyimage.com/100x100"alt=""></p>
  75. <pclass="title"><ahref="#">標題名稱</a></p>
  76. </div>
  77. </li>
  78. <li>
  79. <divclass="inner">
  80. <pclass="img"><imgsrc="http://dummyimage.com/100x100"alt=""></p>
  81. <pclass="title"><ahref="#">標題名稱</a></p>
  82. </div>
  83. </li>
  84. <li>
  85. <divclass="inner">
  86. <pclass="img"><imgsrc="http://dummyimage.com/100x100"alt=""></p>
  87. <pclass="title"><ahref="#">標題名稱</a></p>
  88. </div>
  89. </li>
  90. <li>
  91. <divclass="inner">
  92. <pclass="img"><imgsrc="http://dummyimage.com/100x100"alt=""></p>
  93. <pclass="title"><ahref="#">標題名稱</a></p>
  94. </div>
  95. </li>
  96. <liclass="break-li"></li>
  97. </ul>
  98. </div>
  99. </body>
  100. </html>

這種方法工程量比較大，結果如下圖：

上面說的例子是前端開發中遇到最多的情況，處理的方式也多種多樣，並不侷限於以上2種。前端開發中要處理的排版是比較多的，上下排版最簡單，左右排版比較麻煩一點，均勻分佈、錯位排版是最難處理的，我們需要處理和計算各種寬度，這是一個很繁重的過程。

二、什麼是flex

在這種情況，CSS3的flex屬性應運而生了。它的作用是能夠按照設定好的規則來排列容器內的專案，而不必去計算每一個專案的寬度和邊距。甚至是在容器的大小發生改變的時候，都可以重新計算，以至於更符合預期的排版。不僅解放了計算器，而且更加優美的服務於響應式設計。

在使用了flex屬性之後，居左對齊、居右對齊、兩端對齊、居中對齊、頂端對齊、底部對齊，以及處理專案之間的空白和專案寬度、高度的伸縮都可以簡單的設定到。

flex的字面意思是，伸縮性的、彎曲的，引申含義為可自由配置的、靈活的意思。CSS3中的flex屬性也是這麼理解，具有flex屬性的容器和容器內的專案都具有彈性計算的能力，以至於符合預定的規則。

三、flex屬性

flex是display的屬性值，目前還處於草稿狀態中，所以在書寫的時候，需要加上各個瀏覽器的私有字首，即-webkit、-moz、-ms、-o等，下面的例子都省略了字首。

flex屬性的命名可謂是一波三折：

  • 2009年以前：display:box;
  • 2011年：display:flex-box;
  • 2012年：display:flex;

目前的格式為：

  1. .container{
  2. display:-webkit-flex;
  3. display:-moz-flex;
  4. display:-ms-flex;
  5. display: flex;

  6. 相關推薦

    css3 flex流動自適應響應式佈局設計

    一、flex應運而生 HTML是骨骼、架構，CSS是肌肉、美妝，JS是運動、表現。他們的互相配合才誕生了成千上萬的網頁，豐富多彩的前端世界讓前端開發人員越來越痴迷。尤其是HTML5、CSS3的出現，更加讓這種感覺越來越深厚。 在以往要排版一個圖片、文字的列表，如：

    java自適應響應式 企業網站源碼 SSM 生成靜態化 手機 平板 PC

    java企業網站源碼 模版 有前後臺 freemaker springmvcssm java 企業網站源碼 前後臺都有 靜態模版引擎， 代碼生成器大大提高開發效率前臺： 支持兩套模版， 可以在後臺切換系統介紹：1.網站後臺采用主流的 SSM 框架 jsp JSTL，網站後臺采用freema

    java自適應響應式 企業網站源碼 SSM 生成靜態化 手機 平板 PC

    java企業網站源碼 模版 有前後臺 springmvcSSM freemaker java 企業網站源碼 前後臺都有 靜態模版引擎， 代碼生成器大大提高開發效率 前臺： 支持三套模版， 可以在後臺切換 系統介紹： 1.網站後臺采用主流的 SSM

    java 企業站源碼 兼容手機平板PC 自適應響應式 SSM主流框架 freemaker 靜態引擎

    java企業網站源碼 模版 有前後臺 springmvcssm freemaker 前臺： 支持四套模版， 可以在後臺切換系統介紹：1.網站後臺采用主流的 SSM 框架 jsp JSTL，網站後臺采用freemaker靜態化模版引擎生成html2.因為是生成的html，所以訪問速度快，輕便

    java 企業站源碼 自適應響應式 兼容手機平板PC SSM freemaker 靜態引擎主流框架

    圖片 支持 連接 速度 合作 3.3 href 案例 導出excel 前臺： 支持四套模版， 可以在後臺切換系統介紹：1.網站後臺采用主流的 SSM 框架 jsp JSTL，網站後臺采用freemaker靜態化模版引擎生成html2.因為是生成的html，所以訪問速度快，輕

    java 自適應響應式 網站 源碼 SSM 生成 靜態化 手機 平板 PC

    行號 san 3.3 火墻 文本 列表 構建 賬號 聯系我們 前臺： 支持四套模版， 可以在後臺切換系統介紹：1.網站後臺采用主流的 SSM 框架 jsp JSTL，網站後臺采用freemaker靜態化模版引擎生成html2.因為是生成的html，所以訪問速度快，輕便，對服

    java 企業站源碼 兼容手機平板PC 自適應響應式 freemaker 靜態引擎 SSM 框架

    why 統計 百度 禁止 定義 web pan 獨立ip 官網 前臺： 支持四套模版， 可以在後臺切換官網 http://www.fhadmin.org/系統介紹：1.網站後臺采用主流的 SSM 框架 jsp JSTL，網站後臺采用freemaker靜態化模版引擎生成htm

    如何在Hexo中實現自適應響應式相冊功能

    use images tin 博客 pps otc markdown min win 用最清晰簡潔的方法整合一個響應式相冊 效果 技術選型 由於我選用的主題使用了fancyBox作為圖片彈出展示的框架，查看後表示很不錯，能滿足需要 http://fancyapps.c

    java 企業門戶網站 源碼 自適應響應式 freemarker 靜態引擎 html5 SSM

    pan order 平板 報表 完整 普通 KS 關於 mvc 1.網站後臺采用主流的 SSM 框架 jsp JSTL，網站後臺采用freemaker靜態化模版引擎生成html 2.因為是生成的html，所以訪問速度快，輕便，對服務器負擔小 3.網站前端采用主流的響應式

    響應式佈局設計指南和教程（1）--響應式時代的設計歷程

    如果你還沒有接觸過響應式佈局，你得先明白響應式佈局和之前用的佈局方式稍稍有些不同，因為響應式佈局的目的是為了使網頁適應不同裝置，你需要一段時間的學習來最終實現一個響應式佈局的網頁。 我想展示一些舊的設計流程帶來的問題，在此基礎上引入一些新的方法和工具，在這個過程中，你將在學

    笨鳥兒 靜態佈局、自適應佈局、流式佈局、響應式佈局、彈性佈局等的概念和區別

    一、靜態佈局（Static Layout） 即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。 1、佈局特點：不管瀏覽器尺寸具體是多少，網頁佈局始終按照最初寫程式碼時的佈局來顯示。常規的pc的網站都是靜態（定寬度）佈局的，也就是設定了min-width，這樣的話，如果小於這個寬度就會

    CSS3 - 使用彈性盒子（Flex Box）實現完美居中、柵格系統及響應式佈局

    CSS3彈性盒子介紹 彈性盒子是 CSS3 的一種新的佈局模式。 CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的佈局方式。 引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子

    響應式佈局和自適應佈局詳解

    注：響應式佈局等於流動網格佈局，而自適應佈局等於使用固定分割點來進行佈局。 自適應佈局給了你更多設計的空間，因為你只用考慮幾種不同的狀態。而在響應式佈局中你卻得考慮上百種不同的狀態。雖然絕大部分狀態差異較小，但仍然也算做差異。它使得把握設計最終效果變得更難，同樣讓響

    響應式佈局和自適應的區別

    第一點：自適應的目的是在不同解析度的不同裝置上面顯示相同的頁面。 手機的螢幕比較小，寬度通常在600畫素以下，pc的畫素一般在1000畫素以上，部分配置高的筆記本在2000畫素以上的也有，同樣的頁面要顯示在不同的裝置上面，還要呈現出滿意的效果，不是一件容易的事情。因此就

    自適應佈局，響應式佈局以及rem,em區別

    一、簡而言之， 自適應：不同大小裝置呈現同樣的頁面效果，只是文字、圖片等的大小不一樣，但是相對位置一樣。即在不同大小裝置看起來一樣 響應式：不同大小裝置可能呈現不一樣的頁面效果            自己畫了一個簡略的示意圖，如下： 二、rem,em區別 rem,em都

    靜態佈局、自適應佈局、流式佈局、響應式佈局、彈性佈局等的概念和區別

    一、靜態佈局（Static Layout）即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。1、佈局特點：不管瀏覽器尺寸具體是多少，網頁佈局始終按照最初寫程式碼時的佈局來顯示。常規的pc的網站都是靜態（定寬度）佈局的，也就是設定了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大

    靜態佈局、自適應佈局、流式佈局、響應式佈局、彈性佈局簡析

    靜態佈局：給頁面元素設定固定的寬度和高度，單位用px，當視窗縮小，會出現滾動條，拉動滾動條顯示被遮擋內容。針對不同解析度的手機端，分別寫不同的樣式檔案。 　　自適應佈局：建立多個靜態佈局，每個靜態佈局對應一個螢幕解析度範圍，使用@media媒體查詢技術。 　　流式佈局：元素的寬高用百分比做單位，元素寬高按

    響應式佈局：CSS3彈性盒flex佈局模型

    頁面佈局一直都是web應用樣式設計的重點  我們傳統的佈局方式都是基於盒模型的  利用display、position、float來佈局有一定侷限性  比如說實現自適應垂直居中  隨著響應式佈局的流行，CSS3引入了更加靈活的彈性佈局模型 flex彈性佈局 使用彈性佈

    Bootstrap 手機螢幕自適應的響應式佈局開關

    Bootstrap提供了一套響應式佈局的解決方案。但是有時候我們需要自己控制是否需要這個響應式佈局。 在3.x的bootstrap裡面，如果想要開啟，需要新增下面的東西： <head> <meta name="viewport" content="widt

    自適應網頁(響應式佈局)+彈性佈局

    1.自適應網頁1.宣告viewport元標籤<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes/no">注：width=device-width