什么是Flex

简介: 1:屏幕和浏览器窗口大小发生改变也可以灵活调整布局; 2:可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间),从而调整伸缩项目的大小; 3:可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间; 4:可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围; 5:可以控制元素在页面上的布局方向; 6:可以按照不同于文档对象模型(DOM)所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

什么是flex

一、(了解)Flexbox布局功能主要具有以下几点:
1:屏幕和浏览器窗口大小发生改变也可以灵活调整布局;
2:可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间),从而调整伸缩项目的大小;
3:可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间;
4:可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围;
5:可以控制元素在页面上的布局方向;
6:可以按照不同于文档对象模型(DOM)所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

二、创建Flex容器:
第一步需要将父盒子设置为 display:flex; flex容器

注意: 设为Flex布局以后,子元素的float、clear和vertical-align属性将失效

三、基本概念:
采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。
它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。

容器默认存在两根轴:水平的主轴(main axis)和垂直的纵轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

四、容器属性:
以下6个属性设置在容器上。

1、flex-direction      设置项目的排列方向
2、flex-wrap           设置如何换行
3、flex-flow           是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
4、justify-content     定义项目在主轴上的对齐方式
5、align-items         定义项目在纵轴上如何对齐 
6、align-content       定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用


1-1、flex-direction      设置项目的排列方向
        row (默认)      水平方向起点在左边
        row-reverse    水平方向起点在右边
        column         竖直方向 起点在上方
        column-reverse 竖直方向 起点在下方

2-1、flex-wrap           设置如何换行
        nowrap(默认)   不换行
        wrap            换行
        wrap-reverse    换行,第一行在下方

3-1、flex-flow           是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

4-1、justify-content     定义项目在主轴上的对齐方式
        flex-start(默认值)     左对齐
        flex-end               右对齐   
        center                 居中对齐 
        space-between          两端对齐 项目之间的间隔相等 
        space-around           每个项目两侧的间隔相等

5-1、align-items         定义项目在纵轴上如何对齐
        stretch(默认值)         如果项目未设置高度或设为auto,将占满整个容器的高度。
        flex-start              纵轴的起点对齐。
        flex-end                纵轴的终点对齐。
        center                  纵轴的中点对齐。
        baseline                项目的第一行文字的基线对齐。

6-1、align-content       定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
        flex-start          与纵轴的起点对齐。
        flex-end            与纵轴的终点对齐。
        center              与纵轴的中点对齐。
        space-between       与纵轴两端对齐,轴线之间的间隔平均分布。
        space-around        每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
        stretch(默认值)     轴线占满整个交叉轴。

五、项目属性
以下6个属性设置在项目上。
1、order 定义项目的排列顺序。数值越小,排列越靠前,默认为0
2、flex-grow 定义项目的放大比例,默认为0,即如果有剩余空间,也不放大。
3、flex-shrink 定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
4、flex-basis
5、flex
6、align-self

1-1、order          定义项目的排列顺序。数值越小,排列越靠前,默认为0

2-1、flex-grow     定义项目的放大比例,默认为0,即如果有剩余空间,也不放大。
        如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。
        如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

3-1、flex-shrink    定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
        如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,
        其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。
目录
相关文章
|
机器学习/深度学习 PyTorch 算法框架/工具
【实操】涨点神器你还不会,快点进来学习Label Smooth
【实操】涨点神器你还不会,快点进来学习Label Smooth
379 1
|
存储 安全 测试技术
【软件设计师备考 专题 】软件质量:特性、控制与改进
【软件设计师备考 专题 】软件质量:特性、控制与改进
220 0
|
存储 JavaScript 安全
基于Springboot和vue的餐饮管理系统的设计与实现
基于Springboot和vue的餐饮管理系统的设计与实现
|
JavaScript 测试技术 C#
【C#】【xUnit】【Moq】.NET单元测试Mock框架Moq初探!
在TDD开发模型中,经常是在编码的同时进行单元测试的编写,由于现代软件开发不可能是一个人完成的工作,所以在定义好接口的时候我们就可以进行自己功能的开发(接口不能经常变更),而我们调用他人的功能时只需要使用接口即可。
5530 0
|
6月前
|
NoSQL 数据库 Redis
什么是 Redis 主从同步?
Redis 的主从同步(replication)机制,允许 Slave 从 Master 那里,通过网络传输拷贝到完整的数据备份,从而达到主从机制。 主数据库可以进行读写操作,当发生写操作的时候自动将数据同步到从数据库,而从数据库一般是只读的,并接收主数据库同步过来的数据。一个主数据库可以有多个从数据库,而一个从数据库只能有一个主数据库。 主从数据同步主要分二个阶段 : 第一阶段 : 全量复制阶段 ● slave节点请求增量同步 ● master节点判断replid,发现不一致,拒绝增量同步 ● master将完整内存数据生成RDB,发送RDB到slave ● slave清空本地数据,加载m
|
8月前
|
存储 人工智能 Cloud Native
函数计算×百炼新春活动正式上线!三步赢取蛇年精美好礼
本次场景利用函数计算 FC 构建 Web 服务,由其提供函数计算资源以及工作流能力,您无需管理服务器等基础设施,函数计算 FC 能够根据需求自动扩展,按需计算,结合百炼模型服务实现了从文案、声音、字幕、图像生成到视频合成的一站式自动化流程,大幅简化使用 AI 创作的流程,降低了技术要求,使创作者能够更高效地生产出高质量的内容,快速响应市场需求,同时保证了作品的专业水准和创意表达。
196 24
|
7月前
|
人工智能 语音技术
首个可保留情感的音频LLM!Meta重磅开源7B-Spirit LM,一网打尽音频+文本多模态任务
Meta AI 研究团队提出了一种名为 SpiRit-LM 的新型多模态语言模型,该模型能够处理文本和音频,实现两者无缝融合。SpiRit-LM 通过“交织”方法训练,具备多模态融合、情感保留和多任务学习能力,在自动语音识别、文本转语音等任务上表现出色。它有 Base 和 Expressive 两个版本,后者能更好地捕捉情感表达。研究团队在多个基准上测试了其性能,并探索了其在语音助手、内容创作、教育和音频编辑等领域的应用前景。
213 1
|
JSON JavaScript 前端开发
JsonPath使用和示例
JsonPath使用和示例
286 1
《QT从基础到进阶·十九》QThread多线程使用
《QT从基础到进阶·十九》QThread多线程使用
274 0