flex.css快速入門，極速佈局

狼族小狽發表於2019-03-04

什麼是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

官方地址：github.com/lzxb/flex.c…

通過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>複製程式碼

還有更強大的，等待你的發現！

grid佈局快速入門
2018-08-03
Mybatis極速入門
2020-05-16
MyBatis
CMake極速入門
2024-05-01
Flutter 基礎（十）佈局 Widget 快速入門
2019-07-16
Flutter
"Flutter基礎（十）佈局Widget快速入門
2019-07-17
Flutter
css 佈局入門
2018-04-17
CSS
CSS佈局入門
2017-10-04
CSS
ES6極速入門
2020-12-16
Dagger 2 極速入門
2017-07-21
CSS佈局入門[css]
2005-05-08
CSS
1 小時 SQL 極速入門(三）
2019-02-22
SQL
1 小時 SQL 極速入門（一）
2018-11-22
SQL
1 小時 SQL 極速入門（二）
2018-12-03
SQL
vuex4 極速入門到上手
2021-11-12
Vue
Knative 初體驗：CICD 極速入門
2021-09-09
Android入門教程 | UI佈局之RelativeLayout 相對佈局
2021-10-30
AndroidUI
Go 語言極速入門4 - 物件導向
2018-11-11
Go物件
Kubernetes（K8s）極速入門
2021-11-26
K8S
CSS入門指南-4：頁面佈局
2019-03-03
CSS
Zend Framework 入門（4）—頁面佈局
2013-07-25
Framework
android 入門xml佈局檔案
2014-07-11
AndroidXML
Android入門教程 | UI佈局之LinearLayout 線性佈局
2021-10-29
AndroidUI
WPF 入門筆記 - 01 - 入門基礎以及常用佈局
2023-05-20
筆記
10分鐘極速入門dash應用開發
2023-04-19
你需要的Grid佈局入門教程
2022-01-29
快應用入門--頁面佈局篇
2018-04-05
[譯] 帶你入門 CSS Grid 佈局
2017-05-16
CSS
學習筆記|AS入門（三）佈局篇
2017-12-21
筆記
PCB之AD快速佈局
2019-06-06
鴻蒙極速入門(四)-透過登入Demo瞭解ArkTS
2023-10-26
鴻蒙
Spring Security系列之極速入門與實踐教程
2020-07-24
Spring
快速開始grid佈局
2018-02-10
Flexbox——快速佈局神器
2015-02-20
Flex
SpringBoot系列之Elasticsearch極速入門與實際教程
2020-07-16
Spring BootElasticsearch
Flutter&Dart-非同步程式設計Future、Stream極速入門
2021-08-11
FlutterDart非同步程式設計
《Python黑客程式設計之極速入門》正式開課
2018-12-13
Python黑客程式設計
關於Android中xml佈局檔案之android 入門xml佈局檔案
2014-07-13
AndroidXML
Android入門教程：ConstraintLayout約束佈局
2019-02-26
AndroidAI