響應式佈局：Flexbox應用總結

時間 2019-11-10

標籤響應佈局 flexbox 應用總結欄目 Flex 简体版

原文原文鏈接

距離上篇文章《佈局神器:Flexbox》的發表已有一週時間，轉眼這周又到了週五（O(∩_∩)O~~）；css

習慣性在週五對本身的一週工做進行下總結，記錄下這周值得被記念的工做事件，不管是好的，亦或壞的；html

本週繼續是響應式網頁的開發，手機瀏覽器，以及微信頁面的開發，因此，我就有了大量的實踐機會；web

因而，本週就將以前的百分比響應式佈局，轉向基於FLEX的響應式佈局。chrome

紙上得來終覺淺，絕知此事要躬行。segmentfault

實際應用中發現還有不少細節要格外注意：瀏覽器

下面就以今天寫的Demo做爲示例來講明：微信

演示地址：http://jsfiddle.net/8f50uvzw/
app

1# flex是display的屬性值，目前還處於草稿狀態中，因此在書寫的時候，須要加上各個瀏覽器的私有前綴，即-webkit、-moz、-ms、-o等.svg

因此display:flex 應該要寫成：函數

    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;

　那麼相似於justify-content:space-around;這樣的次級屬性要不要加前綴呢？

在chrome調試時，不用加前綴不影響其表達效果；可是，真的網頁上線以後，真正用手機去打開時，不加前綴的語句都沒能有效顯示效果；

因此，涉及到flex的標籤屬性，務必記得加上前綴，尤爲是-webkit-;

Demo

.main-center,.main-subcenter,.subForm{
	display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
	display: flex;
	-webkit-justify-content:space-around;
	justify-content:space-around;
	-webkit-align-items:flex-end;
	align-items:flex-end;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
}

---------------------------- 重要更新（2014/4/13） ------------------------------

經測試，單純地用display:flex方式實現的頁面沒法兼容安卓版本較低的瀏覽器，通過緊急搶救，如今已經解決問題。

線上頁面地址：星巴巴-手機版

向後兼容解決方案：

「display:box;」或者「box-{*}」屬性，是2009年版本的Flexbox。

「display:flexbox;」或者「flex()」函數，是2011年版本的Flexbox。

「display:flex;」和「flex-{*}」屬性，是如今HTML5定稿後的規範。

具體flexbox的屬性可查看國內飄零霧雨整理的

有區分新版和舊版的flexbox屬性

http://css.doyoe.com/

Flexbox新舊語法不衝突，可參考混用實現最佳瀏覽器兼容demo

http://codepen.io/chriscoyier/pen/zlntC

資料參考：詳解CSS3彈性盒模型（Flexbox）

另：含有box前綴的屬性換行起來很麻煩，建議，此處的換行用：float:left/right取代。

演示地址：http://jsfiddle.net/8ca9zq8q/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>Centering an Element on the Page</title>
  <style type="text/css">
      html {
  height: 100%;
} 

body {
  display: -webkit-box;  /* 老版本語法: Safari,  iOS, Android browser, older WebKit browsers.  */
  display: -moz-box;    /* 老版本語法: Firefox (buggy) */ 
  display: -ms-flexbox;  /* 混合版本語法: IE 10 */
  display: -webkit-flex;  /* 新版本語法： Chrome 21+ */
  display: flex;       /* 新版本語法： Opera 12.1, Firefox 22+ */

  /*垂直居中*/  
  /*老版本語法*/
  -webkit-box-align: center; 
  -moz-box-align: center;
  /*混合版本語法*/
  -ms-flex-align: center; 
  /*新版本語法*/
  -webkit-align-items: center;
  align-items: center;

  /*水平居中*/
  /*老版本語法*/
  -webkit-box-pack: center; 
  -moz-box-pack: center; 
  /*混合版本語法*/
  -ms-flex-pack: center; 
  /*新版本語法*/
  -webkit-justify-content: center;
  justify-content: center;

  margin: 0;
  height: 100%;
  width: 100% /* needed for Firefox */
} 
/*實現文本垂直居中*/
h1 {
  display: -webkit-box; 
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-align: center; 
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 10rem;
}   

  </style>
</head>
<body>
  <h1>OMG, I’m centered</h1>
</body>
</html>

2# 不少常見的 flex 相關的屬性都被應用於父元素，而不是單個的子元素。

HTML結構：

<div class="container">
<img src="http://www.xing88.com/Areas/Mobile/Content/Article/Index/message.svg" />
<a href="#">專欄</a>
</div>

此時，無需再用單獨定義img,a來使其顯示在div中間，只要在父div裏面添加以下css代碼便可：

    display: flex;
    justify-content: center;
    /*水平居中*/
    align-items: center;
     /*垂直居中*/
    flex-direction: column;
    /*同級的a,以及img 按【列】排序*/

3#經過設置 min-width 和 flex-wrap:wrap 能夠輕鬆控制網頁在不一樣屏幕尺寸下的顯示方式：

經過給主要模塊添加如下樣式：

    .flex-ele{
     -webkit-flex-wrap:wrap;
     flex-wrap:wrap;
     min-width:180px;
   }

在屏幕尺寸縮小到180px的時候，顯示效果以下：

4#Flex 對齊方式

space-between 最大化分佈了容器內部的元素。無論是兩個 flex-item 仍是十幾個，這都是成立的。

justify-content: space-between;
justify-content: space-around;
它很容易讓人聯想到「已經被用爛了的margin: 0」。Flex-item 默認會被均勻的分佈，可是每個都會在其給定的空間內居中顯示

該條內容系引用，內容來源：http://zhuanlan.zhihu.com/FrontendMagazine/19955794

5# Flex 容器的每一個直接子元素被稱爲一個「flex-item」。然而，子元素裏面的全部元素不會繼承任何特殊的樣式，而且能夠添加任何你想要的 CSS。

由於每一個子元素是一個 flex-item，你會發現本身經過將元素包裹在一個 div 或者其它的元素中，「保護」裏面的內容。使該元素成爲 flex-child，而不是它裏面的內容；

6# 「Block」，「inline」，「float」和「text-align」在 flex-item 的環境下無心義；

默認狀況，全部的 flex-item 會按照 flex 容器的頂部和左側對齊

HTML代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
    <meta content="yes" name="apple-mobile-web-app-capable">     
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <title>winPhone</title>
</head>


<body>

<div class="main">
	
<div class="header common">
    <div class="logo"></div>
	<div class="title">Flexbox</div>
</div>

<div class="main-center">
<div class="item left common">
<img src="http://www.xing88.com/Areas/Mobile/Content/Article/Index/message.svg" />
	<a href="#">專欄</a>
</div>
<div class="item right common">
    <img src="http://www.xing88.com/Areas/Mobile/Content/Article/Index/moneyface.svg" />
<a href="#">通告</a>
</div>
</div>

<div class="main-subcenter">

<div class="item left subleftMain">
    <a href="#" class="sunTitle">寫真集</a>
</div>
<div class="item right subForm" >
<div class="subitem sub-left-top">
	<a href="#">發通告</a>
</div>
<div class="subitem sub-right-top">
	<a href="#">找藝人</a>
</div>
<div class="subitem sub-left-bottom">
	<a href="#">帳戶設置</a>
</div>
<div class="subitem sub-right-bottom">
<a href="#"><img src="http://www.xing88.com/pic/Avater//Big/159.png"></a>
</div>
</div>

</div>

<div class="footer common">
<span>Copyright © <strong>me-kevin</strong>
 All Right Reserved</span>
</div>

</div>
	
</body>
</html>

CSS代碼：

/*
*mIndex.css
*2015/4/7
*built by @kevin
 */

*{
	margin:0;
	padding: 0;
}

li{
	list-style: none;
}

a{
	color:#fff;
	text-decoration: none;
}
.clearfix:after{
	content: '.';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix{
	*zoom:1;
}

body{
	background-color: #333;
	font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
	font-size: 100%;
}

.header,.footer{
	position: relative;
	width: 100%;
	height:160px;
	background-color: #345AA3;
	color:#fff;
	font-size: 100%;
	text-align: center;
    　　-webkit-flex-direction: column;
    　　flex-direction: column;
}

.main-center .left, .main-center .right {
    -webkit-flex-direction: column;
    flex-direction: column;
}

.header img{
	width: 64px;
}


.logo {
width: 60px;
height: 60px;
background: url(http://www.xing88.com/Areas/Mobile/Content/Article/Index/logonoword2x.png);
background-size: 60px 60px;
background-repeat: no-repeat;
background-position: center center;
}

.title {
margin-top: 6px;
font-size: 120%;
}

.main-center img {
    width:80px;
}

.messageNo {
	font-size: 150%;
}

.footer{
	background-color: #999;
	color: #666;
	font-size: 100%;
}

.main-center,.main-subcenter,.subForm{
	display: -webkit-flex;
    　　display: -moz-flex;
    　　display: -ms-flex;
	display: flex;
	-webkit-justify-content:space-around;
	justify-content:space-around;
	-webkit-align-items:flex-end;
	align-items:flex-end;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
}

.common {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
　　display: flex;
　　-webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;

}

.item{
	width:48%;
	margin:1% 0;
	color:#fff;
	min-height: 160px;
}

.left{
	background-color: #913E8E;
}

.right{
	background-color: #00B1BD;
}

.userface{
	width: 120px;
}


.subitem{
	width: 50%;
	height: 80px;
	background-color: #333;
	display: -webkit-flex;
      　display: -moz-flex;
    　　display: -ms-flex;
	display: flex;
	-webkit-justify-content: center;
    　　justify-content: center;
   　　 -webkit-align-items: center;
   　　 align-items: center;
}

.sub-left-top{
	background-color: #31569C;
}

.sub-right-top{
    background-color: #00BB8C;
}

.sub-left-bottom{
	background-color:#00B4BF; 

}

.subleftMain {
    background: url(http://www.xing88.com/Areas/Mobile/Content/Home/rgBg.jpg) no-repeat top center;    
    background-size: cover;
}


.sunTitle {display:inline-block;
width: 100%;
text-align: center;
background-color: rgba(0,0,0,0.4);
height: 160px;
line-height: 160px;
font-size: 120%;
text-shadow: 0 0 0 rgba(0,0,0,0.3);
}

.sub-right-bottom{
	background-color: #f7f7f7;
}

.sub-right-bottom img{
	margin-top: 5px;
	width:70px;
	height: 70px;
	border-radius: 35px;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。