flex弹性布局详解
一、什么是弹性布局
弹性布局(flex container),页面中任何一个元素只要设置了display:flex属性,那么当前盒子都称为弹性盒子。弹性盒子默认有两条轴: 默认水平显示的主轴 和 始终要垂直于主轴的侧轴(也叫交叉轴),在弹性盒子中所有的子元素都是沿着主轴方向显示。
与传统布局的区别
传统布局,基于盒模型,依赖 display属性 、position属性 、float属性,它对于那些特殊布局非常不方便。
传统布局
- 兼容性好
- 布局繁琐
- 局限性,不能在移动端很好的布局
flex布局
- 操作方便,布局及其简单,移动端使用比较广泛
- pc端浏览器支持情况比较差
- IE11或更低版本不支持flex或仅支持部分
建议
- 如果是pc端页面布局,采用传统方式
- 如果是移动端或是不考虑兼容的oc则采用flex
二、容器和项目
1、容器
采用flex布局的元素,成为flex布局
只要将一个元素的display的值设置为flex或者inline-flex,此元素就变成flex容器
2、项目
flex容器中的所有子元素都自动成为容器成员,称为flex项目
flex容器中的所有flex元素都会有下列行为:
- 元素排列一行(
flex-direction
属性的初始值是row
) - 元素从主轴的起始线开始。
- 元素不会再主维度方向拉伸,但是可以缩小
flex-basis
属性为autoflex-wrap
属性为norap(不换行)
3、主轴和交叉轴
当使用flex布局时,首先想到的是两根轴线——主轴和叫交叉轴
主轴由flex-direction
定义,另一根轴垂直于它。也就是说主轴和交叉轴不是固定的,而是可以自己定义的
- 默认情况下,水平方向是主轴,垂直方向是交叉轴,单可以通过flex-direction属性更改
- 元素成为容器后,元素的子元素默认成为容器的项目,但项目中的子元素不会,除非设置项目也成为容器
- 项目被设置容器后,也拥有主轴和交叉轴
**注意:**当为父元素设置flex布局后,子元素的float、clear和vertical-align属性将失效。
4、两种容器
容器可以设置为两个值flex,inline-flex
区别
- flex:容器成为块元素
- inline-flex:容器成为行内块元素,不会占满全屏
三、容器属性
属性 | 说明 |
---|---|
flex-direction | 设置主轴方向 |
justify-content | 项目再主轴上的排列方式 |
flex-wrap | 项目是否换行 |
align-items | 项目在交叉轴的排列方式(单行) |
align-content | 项目在交叉轴的排列方式(多行) |
flex-flow | 复合属性,相当于同时设置了 flex-direction 和 flex-wrap |
1、flex- direction
主轴方向
属性 | 说明 |
---|---|
row | 默认值。元素将水平显示,正如一个行一样。 |
row-reverse | 与 row 相同,但是以相反的顺序。 |
column | 垂直 |
end-reverse | 反向垂直 |
2、justify-content
主轴对齐方式
属性 | 说明 |
---|---|
flex-start | 起点 |
flex-end | 终点 |
center | 居中 |
space-around | 环绕对齐 |
space-between | 两端对齐 |
3、align-items
侧轴对齐方式
属性 | 说明 |
---|---|
flex-start | 起点 |
flex-end | 终点 |
center | 居中 |
stretch | 填充 |
baseline | 项目位于容器的基线上。 |
4、align-content
设置侧轴上的子元素的排列方式**(多行)**
设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况(多行),在单行下是没有效果的。
.box {display: flex;width: 1400px;height: 600px;justify-items: center;flex-wrap: wrap;
}
.box div {width: 200px;height: 200px;border: 1px solid #000;background-color: pink;box-sizing: border-box;
总结:
- align-items 适用于单行情况下, 只有上对齐、下对齐、居中和 拉伸
- align-content适应于换行(多行)的情况下(单行情况下无效), 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
- 总结就是单行找align-items 多行找 align-content
- 无论 aligh-items 和 align-content 在设置有高度时,对齐方式设置为 strech 都无效
5、flex-wrap
属性规定flex容器是单行或者多行
值 | 描述 |
---|---|
nowrap | 默认值。规定元素不拆行或不拆列。 |
wrap | 规定元素在必要的时候拆行或拆列。 |
wrap-reverse | 规定元素在必要的时候拆行或拆列,但是以相反的顺序。 |
nowrap (默认):不换行。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。
6、flex-flow
简写属性
是 flex-diretion 和 flex-wrap 的简写属性,就像 border 是 border-width、border-style 和 border-color 的简写属性一样
第一个指定 flex-diretion,第二个值指定 flex-wrap
.box{display:flex;flex-flow:row wrap;width:600px;height:500px;
}
四、项目属性
1、order
定义项目的排列方式
order属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order
属性的值的增序进行布局。拥有相同 order
属性值的元素按照它们在源代码中出现的顺序进行布局。
数值越小,排列越靠前,默认为0。
.box div:nth-child(1) {order: 2;
}
.box div:nth-child(2) {order: 1;
}
2、flex-grow
指定flex容器中剩余空间的多少应该分配给项目
剩余的空间是flex容器的大小减去所有flex项的大小加起来的大小。如果所有的兄弟项目都有相同的flex-grow系数,那么所有的项目将获得相同的剩余空间,否则将根据不同的flex-grow系数定义的比例进行分配
- 负值无效,默认值为0,有剩余空间页不会扩大
- 如果某项有宽度,则减去这个宽度后才分配剩余空间
未设置flex-grow
设置flex-grow
3、flex-shring
flex-shrink
属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值
- 负值无效,默认值为1,表示空间不够将缩小,则应该配合换行使用
- 如果值为0,表示空间不够不会缩小
- 如果所有项目的 flex-shring 值都为1,当空间不足时,都会等比例缩小
未设置flex-shring
设置flex-shring
4、flex-basis
CSS 属性 flex-basis
指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing
改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的尺寸
.box div {width: 100px;flex-basis: 200px;height: 100px;background: brown;border: 1px solid #000;
}
5、flex
flex-grow、flex-shring、flex-basis 三个属性的缩写形式
flex:1
表示
flex:1 1 auto
6、align-self
控制子项自己在侧轴上的排列方式
align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。
默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。
.box div:nth-child(2) {align-self: flex-start;
}
flex弹性布局详解相关推荐
- Flex 弹性布局详解
什么是Flex布局 flex布局表示弹性布局,为盒状模型提供最大的灵活性. 适用范围 任何一种元素都可以指定为flex布局 使用时应该注意些什么? 如果是Webkit内核的浏览器,需要加上 -webk ...
- Flex弹性盒子详解:从量变到质变的理解
Flex弹性盒子 在前端css3中有个非常重要的属性,就是弹性盒子了,他在页面布局中起到的作用可谓是有着王霸之业,那么我们如何正确的使用flex布局呢?让我来介绍一下吧.我们可以将整个flex布局分成 ...
- CSS3 Flex 弹性布局用法详解
什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...
- 什么是Flex弹性布局
什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...
- (淘宝无限适配)移动手机端rem布局详解(转载非原创)
https://www.cnblogs.com/well-nice/p/5509589.html (淘宝无限适配)手机端rem布局详解(转载非原创) 从网易与淘宝的font-size思考前端设计稿与工 ...
- 【C++】C++对象模型:对象内存布局详解(C#实例)
C++对象模型:对象内存布局详解 0.前言 C++对象的内存布局.虚表指针.虚基类指针解的探讨,参考. 1.何为C++对象模型? 引用<深度探索C++对象模型>这本书中的话: 有两个概念可 ...
- 页面布局 - flex弹性布局
flex弹性布局 html: <!DOCTYPE html> <html><head><meta charset="utf-8" /> ...
- Linux进程地址空间与进程内存布局详解,内核空间与用户空间
Linux进程地址空间与进程内存布局详解 程序段(Text):程序代码在内存中的映射,存放函数体的二进制代码. 初始化过的数据(Data):在程序运行初已经对变量进行初始化的数据. 未初始化过的数据( ...
- DevExpress控件GridControl中的布局详解 【转】
DevExpress控件GridControl中的布局详解 [转] 2012-10-24 13:27:28| 分类: devexpress | 标签:devexpress |举报|字号 订阅 h ...
最新文章
- poj3683(2-SAT)
- 在Spring 4.2中更简单地处理异步事务绑定事件
- python tkinter Listbox用法
- 批量添加手机联系人 | csv/excel转vcf
- 多元统计分析基于r课后答案_应用多元统计分析课后答案
- python成绩统计_利用python进行学生成绩分析
- html毕业论文参考文献,本科毕业论文参考文献规范格式
- 大数据信息安全问题有哪些
- 短视频“音频化”,音乐“视频化”
- Java实现蜗牛爬井的问题
- Chrome浏览器下调试和动态修改网页JavaScript
- 动态规划算法实现0/1背包问题
- chrome控制台设置网页自动刷新
- javascript入门实例:实现简单网页功能
- 新职业人才缺口近千万,90后最担心失业;字节跳动回应TikTok被收购传闻;Twitter公布账号劫持事故细节 | EA周报...
- 网络流量大数据分析平台(1)
- 面向对象版贪吃蛇大作战游戏创作
- 阿里巴巴淘宝全链路性能优化(上)
- Vue 3 快速上手
- Linux 安装并搭建 3.10.7 RabbmitMQ 集群之搭建RabbitMq服务器(一)
热门文章
- 销售管理的六个能力是什么?
- 也聊聊BLDC 电机的 10 大热门应用---【其利天下技术分享】
- 饥荒机器人怎么解锁_这篇文章带你了解饥荒机器人
- C++ 虚表 多态的实现原理
- 硬盘容量限制变化历史
- 如何更改电脑名称和管理员账号名称?
- 文字转语音怎么用?手把手教你转换
- ios html5上架,IOS免签封装,完美解决H5应用上架App Store受阻的尴尬
- Statement lambda can be replaced with expression lambda
- Unity TouchScripts.Gestures.PressGesture