flex弹性布局，快速精通！

最新推荐文章于 2021-12-02 16:14:53 发布
置顶 最新推荐文章于 2021-12-02 16:14:53 发布
阅读量333 收藏
点赞数 2
文章标签： flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maoer66/article/details/106188894
版权

介绍

传统的css布局是基于css盒模型，依赖display、position、float等属性的布局方案，有稳定的跨浏览器兼容性，但在某些布局方面仍存在限制，
flex布局是Flexible Box的缩写，意为 弹性布局。用来为盒状模型提供最大的灵活性。
flex布局的特点：
任意方向的伸缩；
在样式层可以调换和从排顺序
主轴和交叉轴方便配置
子元素的空间拉伸和填充
沿着容器对齐

开启了flex布局的元素叫flex container
flex container里面的子元素叫做flex item

display属性为flex或者inline-flex可以成为flex container
如：

 .container {
        width: 400px;
        height: 400px;
        border: 1px solid #000000;
        margin: 50px 50px;
        display: inline-flex;
    }

在这里插入图片描述

模型图

在这里插入图片描述
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
注意：这里的图我是在网上截取的一个，所以纵轴就是交叉轴

应用在flex container上的css属性

flex-flow
flex-direction
flex-wrap
justify-content
align-items
align-content

flex-direction

flex-item默认都是沿着main axis（主轴）从main start开始往main end方向排布。
flex-direction决定了main axis 的方向，有4个取值
row（默认值）、row-reverse、column、column-reverse

 .container {
        width: 400px;
        height: 400px;
        border: 1px solid #000000;
        margin: 50px 50px;
        display: flex;
        flex-direction: row;
    }

在这里插入图片描述

.container {
        width: 400px;
        height: 400px;
        border: 1px solid #000000;
        margin: 50px 50px;
        display: flex;
        flex-direction: row-reverse;
    }

row-reverse 就是将主轴的main start 和main end位置做颠倒，而交叉轴不变

在这里插入图片描述

.container {
        width: 400px;
        height: 400px;
        border: 1px solid #000000;
        margin: 50px 50px;
        display: flex;
        flex-direction: column;
    }

在这里插入图片描述

column-reverse就是将corss start 和 corss end位置作颠倒而主轴不变

在这里插入图片描述

justify-content

justify-content决定了flex item在main axis（主轴） 上的对齐方式
flex-start（默认值）：与main start对齐
flex-end：与main end对齐
center：居中对齐
space-between： flex item之间的距离相等，与mian start、mian end两端对齐
space-evenly： flex item之间的距离相等 ，flex item与main start、main end之间的距离等于flex item之间的距离
space-around： flex item之间的距离相等，flex item与main start、main end之间的距离是flex item之间的距离的一半

  .container {
        width: 400px;
        height: 400px;
        border: 1px solid #000000;
        margin: 50px 50px;
        display: flex;
        justify-content: flex-start;
    }

在这里插入图片描述

 .container {
        width: 400px;
        height: 400px;
        border: 1px solid #000000;
        margin: 50px 50px;
        display: flex;
        justify-content: flex-end;
    }

在这里插入图片描述

center这就没什么好说的了，就是在main axis(主轴)上居中对齐

.container {
        width: 400px;
        height: 400px;
        border: 1px solid #000000;
        margin: 50px 50px;
        display: flex;
        justify-content: center;
    }

在这里插入图片描述

.container {
        width: 400px;
        height: 400px;
        border: 1px solid #000000;
        margin: 50px 50px;
        display: flex;
        justify-content: space-between;
    }

在这里插入图片描述

.container {
        width: 400px;
        height: 400px;
        border: 1px solid #000000;
        margin: 50px 50px;
        display: flex;
        justify-content: space-evenly;
    }

在这里插入图片描述

.container {
        width: 400px;
        height: 400px;
        border: 1px solid #000000;
        margin: 50px 50px;
        display: flex;
        justify-content: space-around;
    }

在这里插入图片描述
align-items

align-items决定了flex item在cross axis（交叉轴）上的对齐方式
stretch（默认值）：当flex item在cross axis方向的size为auto时，会自动拉伸至填充flex container
flex-start：与cross start对齐
flex-end：与cross end对齐
center：居中对齐
baseline：与基准线对齐

看完前的justify-content和space-evenly之后相信你对这个flex布局当中的布局方式你已经知道了，主要分清除主轴和交叉轴的方向，判断出start 和 end在什么地方然后了解到了每一个属性的意思就明白了。

所以这里的align-items的每一个属性我就放图上来
这里我特别说明一下baseline，baselin它时与基准线对齐，意思就是与文字的基准线对齐（你可以这样理解，把基准线理解为下划线，这样就直观了）
在这里插入图片描述

然后说一下stretch（默认值）：当flex item在
cross axis方向的size为auto时，会自动拉伸至填充flex container
意思就是：当你的flex item的size为auto时（例如：height: auto;）会自动拉伸。

在这里插入图片描述

flex wrap

flex-wrap决定了flex container是单行还是多行
nowrap（默认）：单行
wrap：多行
wrap-reverse：多行（对比wrap，corss start与cross end相反）

在这里插入图片描述

flex-flow

flex-flow是flex-direction || flex-wrap的简写

比如：flex-flow：column wrap 等价于：flex-direction:column flex-wrap:wrap

比如：flex-flow:row-recerse 等价于: flex-direction:row-reverse flex-wrap:nowrap

比如：flex-flow：wrap 等价于flex-wrap:wrap

align-content

align-content决定了多行flex item在cross axis上的对齐方式，用法与justify-content类似
stretch（默认值）：与多行align-items的stretch类似
flex-start：与corss start对齐
flex-end：与corss end对齐
center：居中对齐
space-between: flex item之间的距离相等，与cross start、cross end两端对齐
space-around：flex item之间距离相等，flex item是与cross start、 cross end之间距离
是flex item之间距离的一半

在这里插入图片描述

这里说一下flex-start和flex-end他两个的对齐方式是在cross axis（交叉轴）上对齐，所以在主轴 main axis（主轴）不会有变化，依旧是按照main start（左对齐）对齐，当然这里需要添加多行显示也就是 flex-wrap: wrap才能实现这些布局效果，不然flex默认为单行显示将会缩进；如下图：
在这里插入图片描述

应用在flex item上的css属性

flex
flex-grow
flex-basis
flex-shrink
order
align-self

order

可以设置任意整数（正整数，负整数，0），值越小就月排在前面。
默认值是0

如下图在2号flex item加上order：1；因为默认值为0，所以2排在最后面
在这里插入图片描述

在三号felx items中添加一个order：-1；这时候3就排在最前面
在这里插入图片描述

align-self

flex item 可以通过align-self覆盖flex container设置align-items
auto（默认值）：遵从flex container的align-items设置
stretch、flex-start、flex-end、center、baseline，效果跟align-items一致

这个我就不多说了

 .item:nth-of-type(1) {
        background-color: red;
        align-self: flex-start;
    }
    
    .item:nth-of-type(2) {
        background-color: yellow;
        align-self: flex-end;
    }
    
    .item:nth-of-type(3) {
        background-color: blue;
    }
    
    .item:nth-of-type(4) {
        background-color: rgb(60, 104, 68);
    }

在这里插入图片描述

flex-grow

flex-grow决定了flex item如何扩展
可以设置任意非负数字（正小数，正整数，0），默认值0
当flex container 在main axis方向上有剩余size时，flex-grow属性才会有效
这里的意思就是在一个容器当中，在主轴方向有剩余空间flex-grow属性才会生效。也就是有多余的宽度。
当然flex-grow有几种情况：

1、这种情况为整数的时候就是按比例扩展，比如容器总宽度为400，flex size宽度为100，三个为300余下的100就是100/3这样子分给每一个flex item
我这里设置的宽度是一样的，当然这里还可以设置每一各flex item的宽度不一样的，同样也是按照比例开扩展

 .item:nth-of-type(1) {
        background-color: red;
        flex-grow: 1;
    }
    
    .item:nth-of-type(2) {
        background-color: yellow;
        flex-grow: 1;
    }
    
    .item:nth-of-type(3) {
        background-color: blue;
        flex-grow: 1;
    }

在这里插入图片描述

2、如果所有flex item的flex-grow总和不超过1，每个flex item扩展的size为flex container的剩余size*flex-grow
这一种情况就是小数之和不大于或等于1的情况，就是每一个的flex item * 0.2（flex-grow的值）来扩展

  .item:nth-of-type(1) {
        background-color: red;
        flex-grow: 0.2;
    }
    
    .item:nth-of-type(2) {
        background-color: yellow;
        flex-grow: 0.2;
    }
    
    .item:nth-of-type(3) {
        background-color: blue;
        flex-grow: 0.2;
    }

在这里插入图片描述

3、如果所有flex item的flex-grow总和sum大于1，每个flex item扩展的size为flex container的剩余size*flex-grow/sum
当小数之和大于1之后就是按照比列来扩展了，比如说分别给三个flex item分配0.2、0.8、0.8给flex-grow这时候的扩展的宽度就是应该是size * flex-grow / sum

  .item:nth-of-type(1) {
        background-color: red;
        flex-grow: 0.2;
    }
    
    .item:nth-of-type(2) {
        background-color: yellow;
        flex-grow: 0.8;
    }
    
    .item:nth-of-type(3) {
        background-color: blue;
        flex-grow: 0.8;
    }

在这里插入图片描述

4、flex item扩展后的最终size不能超过max-width\max-height

flex-grow:max-width;
flex-grow:max-height;

这里我就不用解释了吧，意思就是不管 你扩展的比例不管有多大，flex size都不能超过最大值

flex-shrink

flex-shrink决定了flex item如何收缩
可以设置任意非负数字（正小数、正整数、0），默认值是1
当flex item 在main axis方向上超过了flex container 的size，flex-shrink属性才会有效

每个flex item收缩size为
flex item超出flex container的size*收缩比例/所有flex item的收缩比例之和

收缩比例 = flex-shrink * flex item的base size
base size就是flex item放入flex container之前的size

        width: 110px;
        background-color: red;
        flex-shrink: 1;
    }
    
    .item:nth-of-type(2) {
        width: 120px;
        background-color: yellow;
        flex-shrink: 2;
    }
    
    .item:nth-of-type(3) {
        width: 130px;
        background-color: blue;
        flex-shrink: 3;
    }
    
    .item:nth-of-type(4) {
        width: 140px;
        background-color: rgb(230, 23, 119);
        flex-shrink: 4;
    }
    
    .item:nth-of-type(5) {
        width: 150px;
        background-color: rgb(8, 150, 79);
        flex-shrink: 5;
    }

在这里插入图片描述

这里可以看见宽度变化是不一样的；至于他是如何算的呢？马上就给你分析
下面这个的意思呢就是，flex item总和的宽度 - container总的宽度 = 超出部分的宽度
flex item的宽度 * flex- shrink的值 = item收缩的比例（注意这里的收缩比例的计算）
需要收缩的距离 = 超出部分的宽度 * item收缩的比例 / item收缩的比例之和

felx item之和: 110+120+130+140+150 = 650
item之和超出容器部分：650 - 400 = 250

假设 sum=110 * 1+120 * 2+130 * 3+140 * 4+150 * 5
item1的收缩比例是 110 * 1，需要收缩的距离250 * (110 * 1)/sum
item2的收缩比例是 110 * 2，需要收缩的距离250 * (110 * 2)/sum
item3的收缩比例是 110 * 3，需要收缩的距离250 * (110 * 3)/sum
item4的收缩比例是 110 * 4，需要收缩的距离250 * (110 * 4)/sum
item5的收缩比例是 110 * 5，需要收缩的距离250 * (110 * 5)/sum

这里也是一样， flex item收缩后的最终size不能小于min-width/min-height

看到这里是不是头疼了呢？可能你会问道，难道做项目的时候还要来算一算这多宽拿多宽吗？我敢百分百的肯定，基本没有人会在这上面去算这个东西，虽然在做项目的时候不去算，但是你要知道其中的原理后，做项目的时候才会快，才知道哪一个flex item收缩之后在容器中大概占据的位置是多少。

flex-basis

flex-base用来设置flex item在mian axis方向上的base size

auto（默认值）、content：取决于内容本省的size

决定flex item最终base size的因素，从优先级高到低

max-width\max-height\min-width\min-height
flex-basis (只能用在flex布局上取决于主轴)
width\height
内容本身size
只能用在flex布局上取决于主轴

felx-base用法和width是一样的只是一个只能使用在flex布局上面，同时使用还有一个优先级顺序

总结：

lex-flow是flex-direction || flex-wrap简写
flex-dirction设置main axis（主轴）的方向
flex-wrap设置是否能换行
justify-content设置flex item在main axis（主轴）上的对齐方式
align-items设置flex item在cross axis（主轴）上的对齐方式（一般是针对单行）
align-content设置flex item 在cross axis（主轴）上的对齐方式（一般是针对多行对齐）
flex是flex-grow flex-shrink? || flex-basis的简写
flex-grow决定了flex item在main axis（主轴）方向上如何扩展
flex-shrink决定了flex item在mian axis方向上如何扩展
flex-basis设置flex item是在main axis方向如何收缩的
flex-basis设置flex item在main axis方向上的base size
order设置flex item的排布顺序
align-self允许flex item覆盖flex container设置的align-items

这里我就介绍完了flex布局了，希望能给你们带来帮助，本文纯手打，然后截图粘贴花了不少的时间，以上有什么不对的，或者需要补充的，欢迎指点！

** 本文中若出现侵权请留言联系**

'青山'
关注
FLEX从入门到精通.pdf
11-05
图书目录： 第Ⅰ部分　Flex概述 　第1章　使用Flex的理由 　　1.1　Flex的含义 　　1.2　RIA的含义 　　1.3　受欢迎的Flex 　　1.3.1　揭秘Flash和Flex 　　1.3.2　用户喜爱Flex的十大理由 　　1.4　本章小结 　第2章　Flex3生态系统 　　2.1　Flex历史简介 　　2.2　Adobe　Flex3生态系统， 　　2.2.1　运行时 　　2.2.2　语言 　　2.2.3　框架和API 　　2.2.4　数据通信 　　2.2.5　服务器 　　2.3　Adobe　Flex　RIA工作流程 　　2.3.1　设计与开发 　　2.3.2　运行 　　2.3.3　通信 　　2.3.4　基本设施 　　2.4　Flex生态系统未来的扩展 　　2.5　本章小结　　 　第3章　ActionScript3.0基础 　　3.1　核心语言概念 　　3.1.1　基本语法 　　3.1.2　保留关键字 　　3.1.3　变量和数据类型 　　3.2　控制结构 　　3.2.1　条件语句 　　3.2.2　循环 　　3.3　使用类和数据类型 　　3.3.1　值类型 　　3.3.2　数字型 　　3.3.3　字符串 　　3.3.4　数组 　　3.3.5　向量 　　3.3.6　对象 　　3.3.7　类型转换 　　3.3.8　自检 　　3.4　面向对象编程 　　3.4.1　Object类 　　3.4.2　包和类 　　3.4.3　类特性 　　3.4.4　类成员 　　3.4.5　接口和继承 　　3.5　本章小结　　 　第4章　运用ActionScript3.0 　　4.1　Flash平台框架 　　4.2　显示编程 　　4.3　事件模型 　　4.3.1　事件类和类型 　　4.3.2　事件进程 　　4.3.3　事件流 　　4.3.4　Event　Dispatcher类 　　4.4　Flash　Player　API 　　4.4.1　Display　API 　　4.4.2　Flash　AIR的API 　　4.4.3　Flash　10的API 　　4.5　本章小结　　 　第5章　Flex　BuiIder3 　　5.1　Flex　Builder入门 　　5.1.1　FlexBuilder和Eclipse 　　5.1.2　学习Flex和获取帮助 　　5.2　FlexBuilder3工作台 　　5.2.1　工作区 　　5.2.2　创建和交换工作区 　　5.2.3　工作区配置 　　5.2.4　编辑器 　　5.2.5　视图 　　5.2.6　透视图 　　5.2.7　创建自定义透视图 　　5.3　FlexBuilder3中的新内容 　　5.3.1　新向导 　　5.3.2　设训，模式的增强 　　5.3.3　开发功能的增强 　　5.3.4　CS3套件的整合 　　5.4　本章小结 第Ⅱ部分　使用FIex3开发应用程序 　第6章　使用FIexBuilder3 　　6.1　Flex编译过程 　　6.1.1　开发 　　6.1.2　编译 　　6.1.3发布 　　6.2　关于项目 　　6.3　创建Flex应用程序 　　6.3.1　创建一个Flex项目 　　6.3.2　使用设计模式 　　6.3.3　使用数据绑定 　　6.3.4　使用触发器和特效 　　6.3.5　编译应用程序 　　6.4　创建ActionScript应用程序 　　6.4.1　创建ActionScript项目 　　6.4.2　比较文件大小 　　6.5　非正式的SWF元数据标记 　　6.6　本章小结　　 　第7章　MXML基础 　　7.1　语言原则 　　7.1.1　MXML是XML 　　7.1.2　命名约定 　　7.1.3　MXML语法 　　7.1.4　显示层次 　　7.1.5　MXML名称空间 　　7.2　使用MXML 　　7.2.1　MXML标签 　　7.2.2　MXML属性 　　7.2.3使用MXMI和CSS 　　7.2.4　使用MXML和ActiOnScript 　　7.3　本章小结　 　第8章　使用FlexBu1ider3进行开发 　　8.1　项目管理 　　8.1.1　项目属性 　　8.1.2　导出项目 　　8.1.3　导入项目 　　8.1.4　导航项目 　　8.2　创建应用程序 　　8.2.1　创建调试版本 　　8.2.2　创建导出版本 　　8.2.3　激活源视图 　　8.3　语言智能 　　8.3.1　编辑代码 　　8.3.2　代码参数 　　8.3.3　代码自检 　　8.3.4　键盘快捷键 　　8.4　本章小结　　 　第9章　自定义Flex　Bu1ider3 　　9.1　优化FlexBuilder性能 　　9.1.1　项目开发的最佳实践 　　9.1.2　Eclipse的性能管理 　　9.2　定制工作台
详解CSS3 弹性布局快速入门
12-09
【CSS3 弹性布局快速入门】 弹性布局（Flexbox）是现代网页设计中用于创建灵活、响应式布局的一种重要工具。它解决了传统布局模式，如浮动布局（float）和定位（position）带来的诸多问题，使得CSS代码更加独立于...
CSS3 弹性布局快速入门
weixin_34064653的博客
06-06 203
前言 弹性布局是新一代的布局方式，传统布局中使用浮动布局会给我们带来不少弊端，如CSS代码高度依赖于HTML代码结构等等，下面我将用几个例子让大家快速学会弹性布局。 PS：弹性布局适用于较简单的场景，过于复杂的场景可以尝试着使用CSS3的Grid布局，弹性布局在PC端中还存在兼容性问题，移动端中无兼容性问题，可以放心使用。 1.容器属性 css3为新增的弹性布局提供了多个属性，分别为弹性盒模型的容...
快速掌握CSS3弹性布局
MyBlog
05-17 221
简介 display:flex; 弹性布局是css3的一种新的布局方式，它能够快速轻易的实现页面的各种布局。 采用弹性布局的盒子叫做弹性盒子 弹性盒子中的元素称为弹性项目 容器中有两条轴，沿水平方向的叫主轴，垂直于主轴的叫侧轴 常用属性 flex-direction: (控制项目的排列方向) row(默认) row-reverse column(纵向) column-reverse flex-direction: row; flex-direction: column; flex-wrap
精通css3 flex弹性布局
Ga Ga Love Front
04-01 806
精通flex弹性布局 在远古时代，兼容ie6的年代使用float、position+display传统方式布局，经常会遇到一些奇奇怪怪的布局问题，所以在css3中的flex布局就营运而生，也就是弹性布局。 一、兼容性 目前为止已经有超过98%的浏览器已经全面支持flex布局(除非你的项目属于远古时代的项目)，所以基本都可以使用flex布局。 二、注意要点 如果使用了flex布局之后，容器中子元素...
flex布局（弹性布局）
美奇软件开发工作室
04-10 310
一、Flex布局是什么？Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex; }行内元素也可以使用Flex布局。.box{ display: inline-flex; }Webkit内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-...
Web-前端html+css从入门到精通 184. flex弹性布局（1-7）.mp4.zip.zip
05-23
flex弹性布局（1-7）.mp4.zip.zip”和描述“Web-前端html+css从入门到精通 172. 布局扩展之圣杯布局.zip”来深入探讨这两个知识点。 首先，让我们关注“flex弹性布局”。Flex布局，也称为 Flexible Box 或 Flexbox...
弹性布局-less--综合案例
11-02
弹性布局允许开发者声明容器的flex属性，进而控制其子元素的排列、对齐和大小调整。主要概念包括： 1. **flex容器**：通过设置`display: flex`或`display: inline-flex`，一个元素变为flex容器，其所有直接子元素...
快速精通div
07-02
通过这个“快速精通div”资料，你将能够逐步掌握`div`元素的使用，从基本布局到复杂的响应式设计，提升你的网页设计能力。无论你是初学者还是希望深化对`div`理解的开发者，这份资料都将为你提供宝贵的指导。不断...
精通Flex 3.0――14.5.2 JMS介绍
Flex
04-29 1271
　　Java消息服务（JMS）是一组Java API。这组API定义了创建、发送、接收、读取消息的服务。消息是软件组件或应用之间的一种通信方法。消息客户可以向其他客户发送消息，也可以接收来自其他客户的消息。每一个客户和一个消息代理相连，由消息代理提供创建、发送、接收、读取消息的服务。消息实现了松散耦合的分布式通信。组件发送消息到目的，消息接收者从该目的提取消息。但是，消息的发送和接收却不是
flex-pilot-x-0.8.0.xpi
03-28
Flex Pilot A library for doing easy testing automation of Flash and Flex applications. Includes a locator/lookup mechanism, eventing, and an AS3 test.
精通Flex 3.0――4.4.1 Date类
Flex
04-28 1705
  在ActionScript 3.0中，使用Date类来表示日期和时间。Date类提供了一系列的方法操作日期与时间。要使用Date类必须创建Date类的实例。创建Date类实例的代码如下代码所示。var flexDate:Date=new Date();var flexDate1:Date=new Date(1000*60*60*24*365*37);var flexDate:D
精通Flex 3.0――14.2 一个最基本的LCDS应用
Flex
04-28 1319
 　　在Flex Builder 3.0当中提供了一个构建基于LCDS的Flex应用向导。这个向导同前一章的构建基于J2EE服务器向导的使用方式几乎一致。LCDS的Flex应用也是基于J2EE服务器的。下面就以一个例子说明如何构建一个基于LCDS的Flex应用。（1）在Flex Builder3.0的IDE环境中，单击【File】|【New】|【Flex Project】命令，弹出【New
微信小程序样式Flex Box精通课程
01-08
讲解微信小程序中flex box界面设计布局的使用，flex容器属性的使用，flex项目属性的使用
flex布局方法
m0_54281425的博客
03-22 175
标题伸缩盒子模型 伸缩盒子模型控制的是父子关系 父元素：伸缩容器 子元素：伸缩项目 主轴：start-end 交叉轴（侧轴） Flex容器 display:flex display:-webkit-box(旧版本) 主轴布局方向 flex容器flex-direction： row row-reverse column：主轴与侧轴发生对调 column-reverse 富余空间管理（主轴） justify-content： flex-start flex-end center space-arou
Vue 实现验证码功能
code12313的博客
09-01 1007
在src下面添加js文件夹，不放到静态文件夹下引用比较麻烦，然后添加verifyCode.js文件， 文件内容为（可直接复制）： function GVerify (options) { // 创建一个图形验证码对象，接收options对象为参数 this.options = { // 默认options参数值 id: '', // 容器Id canvasId: 'verifyCanvas', // canvas的ID width: '80', // 默认canvas宽度 ..
flex.css快速入门，极速布局
weixin_34233421的博客
11-17 230
什么是flex.css? css3 flex 布局相信很多人已经听说过甚至已经在开发中使用过它，但是我想我们都会有一个共同的经历，面对它的各种版本，各种坑，傻傻的分不清楚，flex.css就是对flex布局的一种封装，通过简洁的属性设置就能使得它完美的运行在移动端的各种浏览器，甚至能运行在ie10+的各种PC端浏览器中。它天然的能够很好的将页面布局和css进行分离，让css专注于元素的显示效果，我...
flex属性总结
weixin_43723064的博客
12-14 1676
一.父元素属性 1.display:flex;（定义了一个flex容器） 2. flex-direction（决定主轴的方向） row（默认值，水平从左到右）colunm（垂直从上到下）row-reverse（水平从右到左）column-reverse（垂直从下到上） 3. flex-wrap（定义如何换行） nowrap（默认值，不换行）wrap（换行）wrap-reverse（换行，且颠倒行顺...
关于CSS3：justify-self，justify-items和justify-content之间的区别
热门推荐
奶绿走糖的博客
12-02 1万+
这篇文章应该能帮到你 https://www.codenong.com/48535585/
Flex弹性布局详解与用法
"flex弹性布局用法笔记，主要包括display:flex属性开启弹性布局，flex-direction定义主轴方向，flex-wrap控制是否换行，justify-content调整主轴上的对齐方式，align-items处理交叉轴上的对齐，align-content用于...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值