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

最新推荐文章于 2023-06-13 10:18:18 发布
最新推荐文章于 2023-06-13 10:18:18 发布
阅读量1.1k 收藏 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
前端老码农
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flex_Css完全手册
03-21
NULL 博文链接：https://as3.iteye.com/blog/936082
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
热门推荐
高大志leo的博客
12-11 4万+
前言 我们知道，网页展示就好比一个个盒子堆叠在一起，通过调整盒子的大小、位置、样式等，形成了各式各样的页面。当我们在开发一个页面的时候，我们常规的做法可能是：搭建框架、划分区域、定制排版、调整位置、嵌入内容、微调与增添样式。 今天所介绍的是基础且关键的一环--布局排版。其中，展开布局中常用的技术：Flex布局。 Flex布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box {
css之flex 布局
low666的博客
04-09 927
flex 布局 flex 布局的概念 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局，行内元素也可以通过 inline-flex 使属性值用 Flex 布局。 inline-flex 和 inline-block 一样，对设置了该属性值的元素的子元素来说是个 display:flex 的容器，对外部元素来说是个 ...
CSS中的flex布局
weixin_67644104的博客
01-15 5793
CSS中的flex布局
css中的flex（弹性）布局
domunweb的博客
07-08 3万+
flex 弹性布局 一. flex 解释 1、flex 布局 为 flexible BOX 的缩写 ，意思为 弹性布局。 2、块级元素和行内块级元素都可以使用flex布局 3、Webkit内核的浏览器，需要加上-webkit前缀。 二. flex 容器 属性 1、flex-direction 此属性决定主轴的方向 .flex{ flex-direction: row; // (默认值) 主轴水平...
CSS flex使用详解
ScottePerk的博客
09-18 1239
实现布局最早就是用浮动，但是浮动最初的目的是用来做图片环绕的。只是真好可以用来做布局，而且用浮动的时候存在高度坍塌问题，虽然可以用cleanfix来修复这个问题。但理想的状态是最后有一种功能是专门来处理这个事情的，而不是开发者缝缝补补。这是CSS本身落后的原因。flex布局是非常好用的，只是ie需要10才支持。不过目前ie10已经不维护了。其它浏览器都是支持的，包括移动端的浏览器。flex在移动端是非常流行的，在pc端也越来越流行。关于flex的定义和教程，火狐官方的文档是最详细的，w3c的好像连模型图都没
flex简介——css
mantou_riji的博客
04-19 3306
文章目录flex(弹性盒、伸缩盒)浮动的高度塌陷弹性盒弹性容器定义弹性容器属性flex-direction主轴：弹性元素的排列方向称为主轴侧轴（辅轴）：和主轴垂直的方向称为侧轴flex-directionflex-flowjustify-contentalign-items所以设置弹性容器子元素居中的方法align-content与align-content对应的align-self弹性元素的属性弹性元素弹性元素属性flex-growflex-shrink练习导航条 flex(弹性盒、伸缩盒) flex弹性
详解CSS中的flex布局
DZQ1223的博客
06-13 4165
弹性盒子（display: flex）是把设置此属性的这块区域（设置此属性的元素）变为弹性盒子，使得此元素的直接子元素按照从左到右的顺序一行排列如果盒子变小（比子元素的宽度或高度小），里面的直接子元素会随着盒子的变化而变化，同时一直保持从左往右一行排列的布局。当主轴为水平方向的时候，若设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。默认值：auto，即项目本来的大小（采用元素内容的尺寸）。
CSS-flex布局详细讲解：
weixin_45718431的博客
03-26 3938
CSS-flex布局详细及其flex布局携程网移动端案列
前端知识——css之flex布局
Caleb的博客
05-20 2万+
1.基本概念 flex布局是一种布局模型，经常被称之为flexbox，使用flex布局之后，他会给子元素提供强大空间分配和对齐能力。 在没有使用flex布局之前，常用布局有：流式布局，浮动布局，定位布局等等。缺陷是子元素需要自己控制自己在父元素中的位置，还要注意父元素高度坍塌。 flex的优点就是避免不灵活的布局形式，创建更多种布局模式供你选择，解决了子元素的对齐和分布与 响应式等问题。缺点是只能依靠自身的布局模式，稍有变化则无法改变。 2.flex...
在FLEX中使用CSS样式方法
03-05
这个就相当于flex的CSS2.0帮助文档 详细的告诉你flex中每个样式的使用方法
flex样式大全
10-07
flex组件样式大全，flex里常见组件所有的样式
CSS3 flex布局之快速实现BorderLayout布局
12-13
学习完flex的布局模式之后,我们趁热打铁,来实现一个BoxLayout布局.什么是BoxLayout布局?那我们先上一个图看看 BoxLayout布局写过后端UI代码的编程者应该不陌生了,写前端的代码的也同样很熟悉,包括html的框架frame....
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一...
Flex.less:一套用于CSS3 Flex布局的Less mixins
05-26
22中，您需要将以下代码段添加到您设置的display: flex每个元素中display: flex 。 /* * Legacy Firefox implementation treats all flex containers * as inline-block elements. */ @-moz-document url-...
flex.css:轻松使用CSS3 Flexbox
05-15
flex.css 轻松使用CSS3 Flexbox 用法 flex-row和flex-col 添加flex-row或flex-col以将元素样式设置为具有Flex方向行或列的Flex框。 或者，您可以将flex-box与flex-row一样使用，其高度和宽度为100％。 要包装孩子...
grid-flex.css
04-08
使用flex布局实现响应式布局。
node-v10.22.0-darwin-x64.tar.xz
最新发布
05-03
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基于JAVA的物流管理系统的源码设计与实现.zip
05-03
毕业设计-->物流管理系统的设计与实现（Java版本） 采用Struts2+hibernate+Oracle10g+Tomcat 涉及车辆管理，配送点管理，运输方式管理，订单管理，员工管理，用户管理，部门管理，权限管理，角色管理等基础管理功能。
常用的flex布局css样式
09-12
常用的flex布局CSS样式有以下几种： 1. 父容器属性： - `display: flex;`：将父容器设置为flex布局。 - `flex-direction: row/column;`：设置主轴方向，row为水平方向，column为垂直方向。 - `justify-content: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值