什麼是flex.css?
css3 flex 佈局相信很多人已經聽說過甚至已經在開發中使用過它，但是我想我們都會有一個共同的經歷，面對它的各種版本，各種坑，傻傻的分不清楚，flex.css就是對flex佈局的一種封裝，通過簡潔的屬性設定就能使得它完美的執行在移動端的各種瀏覽器，甚至能執行在ie10+的各種PC端瀏覽器中。它天然的能夠很好的將頁面佈局和css進行分離，讓css專注於元素的顯示效果，我稱之為宣告式佈局......
flex和data-flex
flex.css 有兩個版本，一個是flex.css一個是data-flex.css，這兩個版本其實是一樣的，唯一的區別是，一個是使用flex屬性設定，一個是使用data-flex屬性設定。react 不支援flex屬性直接佈局，所以data-flex.css實際上是為了react而誕生的
安裝flex.css
通過npm安裝：
npm install --save flex.css複製程式碼本例子教程例子，則是從官方專案下載下來後，解壓出來後，將dist目錄下的flex.css檔案引入使用
Hello world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello world</title>
<link rel="stylesheet" href="./flex.css">
<style type="text/css">
.box {
width: 150px;
height: 150px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="box" flex>Hello world</div>
</body>
</html>複製程式碼
設定主軸方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>設定主軸方向</title>
<link rel="stylesheet" href="./flex.css">
<style type="text/css">
.box {
width: 150px;
height: 150px;
border: 1px solid #ddd;
}
.item {
width: 30px;
height: 30px;
line-height: 30px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<h2>從上到下</h2>
<div class="box" flex="dir:top">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
<h2>從右到左</h2>
<div class="box" flex="dir:right">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
<h2>從下到上</h2>
<div class="box" flex="dir:bottom">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
<h2>從左到右（預設）</h2>
<div class="box" flex="dir:left">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
</body>
</html>複製程式碼
主軸對齊方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主軸對齊方式</title>
<link rel="stylesheet" href="./flex.css">
<style type="text/css">
.box {
width: 150px;
height: 150px;
border: 1px solid #ddd;
}
.item {
width: 30px;
height: 30px;
line-height: 30px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<h2>從右到左</h2>
<div class="box" flex="main:right">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
<h2>從左到右（預設）</h2>
<div class="box" flex="main:left">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
<h2>兩端對齊</h2>
<div class="box" flex="main:justify">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
<h2>居中對齊</h2>
<div class="box" flex="main:center">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
</body>
</html>複製程式碼
交叉軸對齊方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交叉軸對齊方式</title>
<link rel="stylesheet" href="./flex.css">
<style type="text/css">
.box {
width: 150px;
height: 150px;
border: 1px solid #ddd;
}
.item {
width: 30px;
/*height: 30px;*/
line-height: 30px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<h2>從上到下（預設）</h2>
<div class="box" flex="cross:top">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
<h2>從下到上</h2>
<div class="box" flex="cross:bottom">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
<h2>基線對齊</h2>
<div class="box" flex="cross:baseline">
<div class="item" style="font-size: 30px; background: red;">1</div>
<div class="item" style="font-size: 12px; background: blue;">2</div>
<div class="item" style="font-size: 40px; background: #000;">3</div>
</div>
<h2>居中對齊</h2>
<div class="box" flex="cross:center">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
<h2>高度並排鋪滿</h2>
<div class="box" flex="cross:stretch">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
</body>
</html>複製程式碼
子元素設定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交叉軸對齊方式</title>
<link rel="stylesheet" href="./flex.css">
<style type="text/css">
.box {
width: 150px;
height: 150px;
border: 1px solid #ddd;
}
.item {
width: 30px;
height: 30px;
line-height: 30px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<h2>子元素平分空間</h2>
<div class="box" flex="box:mean">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
<h2>第一個子元素不要多餘空間，其他子元素平分多餘空間</h2>
<div class="box" flex="box:first">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
<h2>最後一個子元素不要多餘空間，其他子元素平分多餘空間</h2>
<div class="box" flex="box:last">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
<h2>兩端第一個元素不要多餘空間，其他子元素平分多餘空間</h2>
<div class="box" flex="box:justify">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
</body>
</html>複製程式碼
flex-box元素剩餘空間比例分配
取值範圍(0-10)，單獨設定子元素多餘空間的如何分配，設定為0，則子元素不佔用多餘的多餘空間
多餘空間分配 = 當前flex-box值/子元素的flex-box值相加之和
flex-box實現兩端不需要多餘空間，中間佔滿剩餘空間
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-box實現兩端不需要多餘空間，中間佔滿剩餘空間</title>
<link rel="stylesheet" href="./flex.css">
<style type="text/css">
.box {
width: 150px;
height: 150px;
border: 1px solid #ddd;
}
.item {
width: 30px;
height: 30px;
line-height: 30px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<h2>flex-box實現兩端不需要多餘空間，中間佔滿剩餘空間</h2>
<div class="box" flex>
<div class="item" flex-box="0" style="background: red;">1</div>
<div class="item" flex-box="1" style="background: blue;">2</div>
<div class="item" flex-box="0" style="background: #000;">3</div>
</div>
</body>
</html>複製程式碼
水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平居中</title>
<link rel="stylesheet" href="./flex.css">
<style type="text/css">
.box {
width: 150px;
height: 150px;
border: 1px solid #ddd;
}
.item {
width: 30px;
height: 30px;
line-height: 30px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<h2>水平居中</h2>
<div class="box" flex="main:center cross:center">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
</body>
</html>複製程式碼