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

最新推荐文章于 2025-03-17 21:53:44 发布
最新推荐文章于 2025-03-17 21:53:44 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： 前端 文章标签： HTML CSS JavaScript flexbox
原文链接：https://www.mk2048.com/blog/blog.php?id=0achcabhkj&title=flex.css%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%EF%BC%8C%E6%9E%81%E9%80%9F%E5%B8%83%E5%B1%80
版权

什么是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
Vue.js 入门项目：轻松实现会员系统页面！」 「Vue.js 实战教程：会员系统页面的开发与设计」 「从零开始构建 Vue.js 会员系统页面，快速上手！」
南北极之间
11-07 475
效果图 教程目录 引言 简要介绍项目目标和页面功能。 项目准备 下载 Vue.js 并创建 HTML 框架。 实现页面结构 设置页面布局，包括标题、选项卡、会员时长选择按钮、以及特权显示。 应用 Vue.js 数据绑定 使用 Vue.js 数据绑定显示动态数据。 实现交互功能 编写方法控制选项卡切换和会员时长选择。 美化页面样式 使用 CSS 使页面更具吸引力。 总结 复习项目中实现的功能，并提供下一步学习建议。 完整教程 1. 引言 在这篇教程中，我们将使用
HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试
牛肉胡辣汤
07-19 6152
/ xxx.ets @Entry @Component struct CounterExample { @State value: number = 0 build() { Column() { Counter() { Text(this.value.toString()) }.margin(100) .onInc(() => { this.value++ }) .onDec(() => { this.value-- }) }.width("100%") } }D. 多设备预览时，不支持双向预览功能。
Flex_Css完全手册
03-21
NULL 博文链接：https://as3.iteye.com/blog/936082
FLEX3中应用CSS完全详解手册
jCuckoo的专栏
10-24 1122
在FLEX中使用样式方法                  ---转载http://bbs.airia.cn一、使用本地样式定义使用标签在MXML文件中创建本地的样式定义。这个标签包含了符合CSS2.0语法的样式表定义。这些定义会应用到当前文档以及当前文档的子文档。.solidBorder{//类选择样式border-style:solid;}button{//组件定义样式border-sty
CSS-flex弹性布局
最新发布
m0_73941339的博客
03-17 907
本文深入探讨Flex布局的核心原理与应用，通过携程网移动端首页案例，详细解析Flex布局的常见属性与使用技巧。涵盖主轴与侧轴设置、子元素排列方式、背景渐变等实用技术，帮助开发者快速掌握Flex布局，提升页面布局效率与灵活性。
flex.css
weixin_39205240的博客
09-18 554
/* 定义元素是flex*/ .flex { display: box; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } /* 主轴方向从左到右 */ .flex-zLeftRight {...
CSS file
11-02 652
 /* CSS file *//* Global{color: #FFFFFF;themeColor: #000000;} */Application{color: #FFFFFF;backgroundColor: #000000;backgroundImage: Embed(source="images/theme3.jpg");backgroundSize: auto;paddingTop:
CSS flex
whan8080的专栏
03-31 684
CSS flexible Box Layout 弹性盒模型针对用户界面设计进行了优化，弹性容器的子元素可以在任何方向上排布。元素可以弹性伸缩。从而使子元素可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出，更好的适应父元素的大小。flex优点：1.便于对齐元素。.box { /*定义一个flex contianer*/ display: flex; /...
css极速入门 —— grid布局
05-01
CSS极速入门——Grid布局 Grid布局是一种强大的CSS布局方案，它可以将容器划分成行和列，产生单元格，然后指定项目所在的单元格。相比Flex布局，Grid布局更为灵活和强大，但学习成本相对困难一些。 基本概念： 1....
"快速入门CSS Grid布局：灵活强大的二维布局方式，优于传统和Flex布局
CSS极速入门 —— Grid布局 Grid布局是CSS的一种强大的布局方案，旨在将容器划分为行和列，并将项目放置在相应的单元格中。相对于Flex布局来说，Grid布局更加灵活、强大，可以看作是一种二维布局方式。 传统布局...
HCIA-从0到1快速学习HarmonyOS应用开发能力
牛肉胡辣汤
07-19 3379
原子化服务是鸿蒙系统提供的一种全新的应用形态，无需显式安装，由程序框架后台静默安装后即可使用，可为用户提供便捷服务。正确(True)卡片常用于嵌入到其他应用（当前只支持系统应用）中作为其界面的一部分显示，并支持拉起页面，发送消息等基础的交互功能。正确(True)根据设备的内存差异，OpenHarmony适配的系统类型分为三类：轻量系统、小型系统、标准系统。正确(True)部件是指在部署视图中具有相对独立性，能完成一定功能的可独立交付，并且能独立部署的软件实体。错误(False)
Flex_Css完全手册.docFlex关于样式专题.pdf
08-12
在FLEX中使用样式方法 2 一 .使用本地样式定义 2 二、使用外部样式表 3 三、使用内联样式 4 四、使用setStyle()方法 4 五、脚本方法 4 Application组件样式属性 5 panel组件样式属性 5 color文本颜色 6 TabNavigator组件样式属性 7 color主体内容的文本颜色 8 color标签头文字的颜色 11 LinkBar组件样式属性 12 color链接文字颜色 13 List组件样式属性 15 color文字颜色 18 Tree组件样式属性 18 color文本颜色 19 TextInput组件样式属性 19 borderColor边框颜色 20 CheckBox组件样式属性（包含单选和多选） 23
Flexcss完全手册.pdf
10-04
Flexcss完全手册.pdf
在FLEX中使用CSS样式方法
03-05
这个就相当于flex的CSS2.0帮助文档 详细的告诉你flex中每个样式的使用方法
flex类名组合使用 scssFlex.scss
12-03
整理的flex类名组合使用，项目属性中的order，flex-grow，flex-shrink，flex-basis，flex，直接使用@include order(),@include flex-grow(),@include flex-shrink(),@include flex-basis(),@include flex(),出入相应的属性值调用。
flex简介——css
mantou_riji的博客
04-19 4824
文章目录flex(弹性盒、伸缩盒)浮动的高度塌陷弹性盒弹性容器定义弹性容器属性flex-direction主轴：弹性元素的排列方向称为主轴侧轴（辅轴）：和主轴垂直的方向称为侧轴flex-directionflex-flowjustify-contentalign-items所以设置弹性容器子元素居中的方法align-content与align-content对应的align-self弹性元素的属性弹性元素弹性元素属性flex-growflex-shrink练习导航条 flex(弹性盒、伸缩盒) flex弹性
CSS中的flex布局
weixin_67644104的博客
01-15 6796
CSS中的flex布局
CSS 之 Flex布局
热门推荐
qq_33934427的博客
01-06 3万+
CSS 之 Flex布局 文章目录CSS 之 Flex布局1、Flex布局 vs 网格布局 （1D vs 2D）2、Flex属性1）flex-direction属性 & 排列方向2）flex控制横纵轴 & 排列顺序（单/双项目）a）理解justify-content & align-itemsb）理解justify-content ：space-betweenc）for循环排列卡片3、Flex响应式布局 1、Flex布局 vs 网格布局 （1D vs 2D） 个人理解：Flex是一维
Flex.less: Less mixins实现CSS3 Flex布局
Flex.less是一套基于Less语言开发的混入（mixins），其目的是为了简化CSS3 Flex布局的代码编写过程。在详细说明这部分内容之前，我们先了解一些基础知识。 ### CSS3 Flex布局简介 Flex布局，又称弹性盒子布局模型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值