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

時間 2019-11-16

標籤 flex.css flex css 快速入門佈局欄目 Flex 简体版

原文原文鏈接

什麼是flex.css?

css3 flex 佈局相信不少人已經據說過甚至已經在開發中使用過它，可是我想咱們都會有一個共同的經歷，面對它的各類版本，各類坑，傻傻的分不清楚，flex.css就是對flex佈局的一種封裝，經過簡潔的屬性設置就能使得它完美的運行在移動端的各類瀏覽器，甚至能運行在ie10+的各類PC端瀏覽器中。它自然的可以很好的將頁面佈局和css進行分離，讓css專一於元素的顯示效果，我稱之爲聲明式佈局......javascript

flex和data-flex

flex.css 有兩個版本，一個是flex.css一個是data-flex.css，這兩個版本實際上是同樣的，惟一的區別是，一個是使用flex屬性設置，一個是使用data-flex屬性設置。react 不支持flex屬性直接佈局，因此data-flex.css其實是爲了react而誕生的css

安裝flex.css

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

經過npm安裝：java

npm install --save flex.css複製代碼

本例子教程例子，則是從官方項目下載下來後，解壓出來後，將dist目錄下的flex.css文件引入使用react

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，則子元素不佔用多餘的多餘空間css3

多餘空間分配 = 當前flex-box值/子元素的flex-box值相加之和git

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>複製代碼

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

相關標籤/搜索

每日一句

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