當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

flex.css快速入门，极速布局

發布時間：2023/12/2 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 flex.css快速入门，极速布局小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

官方地址：https://github.com/lzxb/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>

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

更多專業前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的flex.css快速入门，极速布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。