css樣式--flex佈局[css3]

時間 2019-12-01

標籤 css 樣式 flex 佈局 css3 欄目 CSS 简体版

原文原文鏈接

提及css3就必須提到flex佈局，特別是在移動端領域，用得很是多，這裏寫了一套flex佈局兼容（並不是全兼容），本身用過以後感受良好；css

/* ============================================================
   flex：定義佈局爲盒模型
   flex-v：盒模型垂直佈局
   flex-1：子元素佔據剩餘的空間
   flex-align-center：子元素垂直居中
   flex-pack-center：子元素水平居中
   flex-pack-justify：子元素兩端對齊
   兼容性：ios 4+、android 2.3+、winphone8+
   ============================================================ */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

兩端對齊能夠用這種方法：html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
/* ============================================================
   flex：定義佈局爲盒模型
   flex-v：盒模型垂直佈局
   flex-1：子元素佔據剩餘的空間
   flex-align-center：子元素垂直居中
   flex-pack-center：子元素水平居中
   flex-pack-justify：子元素兩端對齊
   兼容性：ios 4+、android 2.3+、winphone8+
   ============================================================ */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
</style>
</head>
<body>

<div class="flex flex-pack-justify">
    <div>模塊一</div>
    <div>模塊二</div>
    <div>模塊三</div>
    <div>模塊四</div>
</div>

</body>
</html>

使用注意：android

flex下的子元素必須爲塊級元素，非塊級元素在android2.3機器下flex失效
flex下的子元素寬度和高度不能超過父元素，不然會致使子元素定位錯誤，例如水平垂直居中

fixed BUG

ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位
android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位
ios4下不支持position:fixed

解決方案ios

可用isroll.js，暫時沒有完美解決方案。

資料參考：css3

《移動端web頁面使用position:fixed問題總結 #2》

--任何組織或我的分享、轉載本博客內容，請務必以連接方式註明出處：來自博客園--下雨天的太陽（http://www.cnblogs.com/doomjx/）----請勿以任何形式修改內容（包括文字和圖片）--

相關標籤/搜索

每日一句

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