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

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

atao4年前 (2020-12-25)技术文章2984

什么是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

分享给朋友:

相关文章

CSS度量的单位px、rem、em、vw、vh有什么区别

CSS度量的单位px、rem、em、vw、vh有什么区别

1、px绝对单位,页面按精确像素展示2、em相对长度单位,相对于当前对象内文本的字体尺寸, 根据父元素的大小变化而变化对单位,基准点为父节点字体的大小。em是指字体高度 浏览器默认1em=16px,所...

PHP获取和操作配置文件php.ini的几个函数介绍

PHP获取和操作配置文件php.ini的几个函数介绍

1.ini_get()获取配置参数,ini_set()设置配置参数<?php echo ini_get('display_errors'); //1 //...

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

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

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

thinkphp6资源路由解决同源策略、跨域问题。

thinkphp6资源路由解决同源策略、跨域问题。

一般开发接口资源请求服务端都会遇到跨域请求。在跨域请求的时候,明明设置的是POST请求,却请求的时候报跨域错误,检查http请求头发现不是POST请求,而是发起了OPTIONS请求。路由设置:Rout...

curl实用请求方法函数(个人用),含支付pem校验

curl实用请求方法函数(个人用),含支付pem校验

curl 是常用的命令行工具,用来请求 Web 服务器。它的名字就是客户端(client)的 URL 工具的意思。它的功能非常强大,命令行参数多达几十种。如果熟练的话,完全可以取代 Postman 这...

php版微信公众平台之微信网页登陆授权示例详解

php版微信公众平台之微信网页登陆授权示例详解

之前在项目中遇到网页授权登录这个需求,就对此做些总结记录。OAuth2.0授权:OAuth是一个开放协议,允许用户让第三方应用以安全且标准的方式获取该用户在某一网站、移动或桌面应用上存储的个人信息,而...