当前位置:首页 > 技术教程 > 技术文章 > 正文内容

什么是flex布局,它的常用属性有哪些

atao2年前 (2020-12-25)技术文章1212

什么是flex 布局?

flex是 flexible box 的缩写,就是弹性布局的意思。

任何一个元素(块元素、行内块元素、行内元素),都可以设置为弹性盒子属性。

语法:块元素: display:flex; 

行内元素:display:inline-flex;

注意:webkit 内核的浏览器,须要加上 -webkit 前缀;

须要注意的是:设置为flex 布局后,子元素 的 clear(清除浮动)、float(浮动)和vertical-align(垂直对齐方式)属性将失效;

flex布局的基本概念:

设置为flex布局的元素,称为flex容器,它的所有子元素就是容器成员,被称为项目。

flex容器默认有两个轴:

水平主轴(main axis)和垂直交叉轴(cross axis)。

主轴的开始位置叫做 main start(与容器边框的交叉点),结束位置叫做 main end;交叉轴的开始位置叫做cross start,结束位置叫做 cross end;

项目(容器成员)默认沿着主轴排列,单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size;

容器的属性:

1、flex-direction 设置项目的排列方向;

row (默认值):主轴为水平方向,起点在左端;row-reverse: 主轴为水平方向,起点在右端;column:主轴为垂直方向,起点在上端。column-reverse: 主轴为垂直方向,起点在下端。

2、flex-wrap 设置项目换行方式;

 nowrap(默认值) :不换换;wrap :换行,第一行在上方;wrap-reverse: 换行,第一行在下方;

3、flex-flow(常用,设置主轴方向和换行方式)

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

row(默认值):row-reverse:column:column-reversenowrap | wrap | wrap-reverse

4、justify-content :(常用)定义项目在主轴上的对齐方式。

flex-start(默认值):左对齐flex-end:右对齐center: 居中space-between:两端对齐,项目之间的间隔都相等。space-around:每个项目两侧的间隔相等。所以,项目之间的间    隔比项目与边框的间隔大一倍。

5、align-items: 定义项目在交叉轴上的对齐方式;

flex-start:交叉轴的起点对齐。flex-end:交叉轴的终点对齐。center:交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

6、align-content :定义项目在多行容器中的对齐方式;如果项目只有一行容器,该属性不起作用。

flex-start:与交叉轴的起点对齐。flex-end:与交叉轴的终点对齐。center:与交叉轴的中点对齐。space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间    隔大一倍。stretch(默认值):轴线占满整个交叉轴。

项目的属性:

1、order属性;定义项目在主轴上的排列顺序;

语法: *{order: 1}数字1是根据需求自己定义的值,填写整数,*表示须要设置排序的项目;

2、flex属性:定义项目的缩放比例与基准款宽;

是 flex-grow/flex-shrink/flex-basis的简写,默认值为0 1 auto,后面2各属性可选;flex属性有两个快捷值: none和auto(none表示0 0 auto)(auto表示1 1 auto)


3、align-self: 定义单个项目在交叉轴上的对齐方式;可覆盖align-items属性。

默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

4、flex-grow属性

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。flex-grow:1;默认值为0;

5、flex-shrink属性

flex-shrink:属性定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。


6、flex-basis属性

flex-basis属性定义项目在分配多余空间之前,项目占据的主轴空间(main size)。浏览    器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。语法:    .项目 {          flex-basis: <length> | auto; /* default auto */    }它可以设为跟width或height属性一样的值(比如500px),则项目将占据固定空间。

扫描二维码推送至手机访问。

版权声明:本文由武景涛的博客发布,如需转载请注明出处。

本文链接:http://www.yizhanhongtu.cn/post/42.html

分享给朋友:

相关文章

jQuery Growl 插件(消息提醒) 弹出层插件

jQuery Growl 插件(消息提醒) 弹出层插件

jQuery Growl 插件(消息提醒) 允许您很容易地在一个覆盖层显示反馈消息。消息会在一段时间后自动消失,不需要单击"确定"按钮等。用户也可以通过移动鼠标或点击关闭按钮加快隐...

【推荐】10个提升用户体验图像特效库

【推荐】10个提升用户体验图像特效库

1.imagehover地址:https://github.com/ciar4n/imagehover.css imagehover.css- 纯CSS3鼠标滑过图片效果动画库,44种鼠标滑过效果2....

用PHP如何打造一个高可用高性能的网站

用PHP如何打造一个高可用高性能的网站

1. 说到高可用的话要提一下redis,用过的都知道redis是一个具备数据库特征的nosql,正好弥补了PHP的瓶颈,个人认为PHP的 瓶颈在于数据库,像Apache和Nginx的高级web服务器在...

PHP开发api接口,如何做才算是安全的

PHP开发api接口,如何做才算是安全的

php的api接口在实际工作中,使用PHP写api接口是经常做的,PHP写好接口后,前台就可以通过链接获取接口提供的数据,而返回的数据一般分为两种情况,xml和json,在这个过程中,服务器并不知道,...

MySQL中,21个写SQL语句的好习惯

MySQL中,21个写SQL语句的好习惯

每一个好习惯都是一笔财富,本文分 SQL 后悔药、SQL 性能优化、SQL 规范优雅三个方向,分享写 SQL 的 21 个好习惯。1. 写完 SQL 先 explain 查看执行计划。【SQL 性能优...

TP6常用的增删改查方法合集(DB类+模型类)

TP6常用的增删改查方法合集(DB类+模型类)

注意:1、注意引入DB和模型的门面类2、想要添加视图文件,一定要先composer引入view模板引擎3、下面方法来自官方手册,只是写了一些个人常用的,并非齐全。增(添加)DB类方法方法一: ...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。