学习flex布局(弹性布局)

 

  Flex是Flexible Box的缩写,意为弹性布局。是W3C早期提出的一个新的布局方案。可以便捷的实现页面布局,目前较高版本的主流浏览器都能兼容,兼容情况如下:

 

Flex在移动端开发上已是主流,比如在h5页面,微信小程序等等。

  为什么要用弹性布局呢?

  在传统的布局方案主要基于CSS盒子模型,依赖display、position、float等属性。但是它对于一些特殊的布局非常不方便,比如盒子水平剧中,实现起来比较繁琐,各种黑科技。现在我们用多种方法实现盒子剧中,基础dom如下:父容器背景为粉色的容器,目标盒子为200px的天蓝色子容器:

实现效果:

传统方法一:

 

传统方法二:

 

 

Flex布局方法就简单多了

 

  下面是Flex的使用

   任何一个容器都可以指定为Flex布局,写法: .box{ display: flex; },

   行内元素也可以使用Flex布局, 写法: .box{ display: inline-flex; },

   注意:Webkit内核的浏览器需加上-webkit前缀,另外,设为Flex布局后,子元素的float、clear及vertical-alian属性都将失效。

  

  基本概念

  父容器设为flex后,它所有的子元素自动成为容器成员(这里的子元素不论是什么元素,块级还是行内,而且只作用于子元素,对孙元素无效,需要继续在子元素上设置display:flex)。

   Flex的基本概念就是容器和轴,容器包括外层的父容器和内层的子容器(也叫项目,flex item),轴包括主轴和交叉轴。如下图:

 

  容器默认存在两根轴,水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框交叉的点)叫做main start;结束的位置叫main end;交叉轴的开始位置叫cross start;交叉轴结束的未知叫cross end。

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

  Flex 布局主要涉及12个属性(不含display:flex),其中容器和子容器各6各,但是平常使用到的基本只有4个属性,父容器和子容器各2个。

  作用于父容器的属性

  . flex-direction

  . flex-wrap

  . flex-flow

  . justify-content

  . align-items

  . align-content

  作用于子容器(项目)的属性

  . order

  . flex-grow

  . flex-shrink

  . flex-basis

  . flex

  . align-self

 

  详细介绍

 容器属性

  1、flex-direction

  flex-direction属性决定主轴的方向,及子容器(项目)的排列方向。

  。 row(默认值):主轴为水平方向,起点在左端(从左到右排序,相当于float:left);

  

  。 row-reverse:主轴为水平方向,起点在右端(从右往左排序,相当于float:right);

  

  。 column:主轴为垂直方向,起点在上沿;

  

  。 column-reverse:主轴为垂直方向,起点在下沿。 

  

 

  2、flex-wrap 

  默认情况下,项目都排在一条线(又称“轴线”)上。flex-wrap属性定义,如果一条轴线排不下如何换行。

  

  。 nowrap(默认):不换行;

  

  。 wrap:换行,第一行在上方;

  

  。wrap-reverse:换行,第一行在下方;

  

  3、flex-flow

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

  

 

  4、justify-content

  justify-content定义了子容器(项目)在主轴上的对齐方式。

  。 flex-start(默认值):左对齐;

  

  。 center:居中;

  

  。 flex-end:右对齐;

  

  。 space-between:两端对齐,子容器(项目)之间的间隔相等;

  

  。 space-around:每个子容器(项目)两侧的间距相等,所以子容器(项目)的间隔比子容器(项目)与边框的间隔大一倍;

  

 

  5、align-items

  align-items属性定义了子容器(项目)在交叉轴的对齐方式。

  

 

  。 flex-start:交叉轴的起点对齐;

  

  。 center :交叉轴居中;

  

  。 flex-end:交叉轴的终点对齐;

   

  。 baseline:子容器(项目)的第一行文字的基线对齐;

  

  。 stretch(默认值):如果子容器(项目)未设置高度或者设为auto时,将占满整个容器的高度;

  

  

  6、algin-content

  align-content属性定义了多根轴线的对齐方式,如果子容器(项目)只有一根轴线,该属性不起作用。

  

 

  。 flex-start:与交叉轴的起点对齐;

  。 center:与交叉轴的中点对齐;

  。 flex-end:与交叉轴的终点对齐;

  。 space-between:与交叉轴两端对齐,轴线之间的间隔平均分布;

  。 space-around:每根轴线两侧的间隔都相等,所以,轴线之间的间隔比轴线与边框的间隔大一倍;

  。 stretch(默认值):轴线占满整个交叉轴;

  

  容器(项目)属性

  1、order  

  order属性定义项目的排列顺序,数值越小,排在越前,默认为0。 .item { order: <integer> }

  2、flex-grow

  flex-grow属性定义项目方大比例,默认为0,即如果存在剩余空间,也不放大。 .item{ flex-grow: <number>}  注意:负数是相当于默认值

   

  

  

  3、flex-shrink

  flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 .item { flex-shrink: <number> }

   

  

  

  如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。

  注意:只有当父容器空间不够时该属性才会生效,另外当空间继续减小时,flex-shrink属性值越大的子容器(项目)先缩小。

 

  4、flex-basis 

  flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。

  它的默认值为auto,即项目的本来大小。 .item { flex-basis: <length> | auto }

  

  

  

  注意:它可以设为跟widthheight属性一样的值(比如350px),则项目将占据固定空间。

 

  5、flex

  flex属性是flex-growflex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}

  该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

  建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

 

  6、align-self

  align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

  .item align-self: auto | flex-start | flex-end | center | baseline | stretch;}

  

  注意:该属性可能取6个值,除了auto,其他都与align-items属性完全一致。auto为默认值!

 

转载于:https://www.cnblogs.com/Jacky-MYD/p/7692087.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/399566.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php创建无限级树型菜单以及三级联动菜单

http://www.php.cn/php-weizijiaocheng-373500.html 这篇文章主要介绍了php创建无限级树型菜单 &#xff0c;主要使用的是递归函数&#xff0c;感兴趣的小伙伴们可以参考一下 写递归函数&#xff0c;可考虑缓存&#xff0c;定义一些静态变量来存上一次运行的结果&#xff0c;多…

oracle数据库用脚本运行SQL语句

1. 在同一个目录下创建 runBatch.bat sqlplus sys/sangfororcl as sysdba sql.txtpausesql.txt 要执行的SQL语句 2. 双击runBatch.bat转载于:https://www.cnblogs.com/ddmiao/p/3654227.html

使用Docker镜像和仓库

为什么80%的码农都做不了架构师&#xff1f;>>> Docker镜像 由文件系统叠加而成最底端第一层是引导文件系统bootfs&#xff0c;类似grub镜像第二层是root文件系统rootfs列出镜像 huangyiHP ~ % sudo docker images REPOSITORY TAG IMAGE …

ip_forward

Linux系统缺省并没有打开IP转发功能&#xff0c;要确认IP转发功能的状态。可以查看/proc文件系统&#xff0c;使用下面命令&#xff1a; cat /proc/sys/net/ipv4/ip_forward如果上述文件中的值为0,说明禁止进行IP转发&#xff0c;如果是1,则说明IP转发功能已经打开。要想打开I…

C++primer plus第六版课后编程题答案8.3(正解)

在百度知道里面得到了正确的答案 http://zhidao.baidu.com/question/198940026560129285.html?quesup2&oldq1 #include<iostream> #include <string>//出问题时&#xff0c;使用的是cstring,但换成string一样出问题 using namespace std; struct stringy{char…

WordPress后台删除不需要的侧边栏菜单

https://www.ludou.org/remove-admin-menu-in-wordpress.html function remove_submenu() {// 删除"设置"下面的子菜单"隐私"remove_submenu_page( options-general.php, options-privacy.php );// 删除"外观"下面的子菜单"编辑"remov…

CSS 实例

CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片&#xff08;这个图片不会随页面的其余部分滚动&#xff09; 在一个声明的所有背景属性 高级的背景…

通过ajax提交到url路由

$regBoxform.find(button).on(click, function(){/*通过ajax提交请求*/$.ajax({type:post, /*用post 方式提交*/url:/user/register, /*提交到api的指定路由路径*/dataType: json,data:{username: $regBoxform.find([name"username"]).val(),password: $regBoxform.f…

wordpress发布文章时右侧边栏选择作者的功能代码

因为本网络营销博客现在有了两个作者&#xff0c;在后台发布文章时&#xff0c;希望可以选择作者&#xff08;以前仅是一个管理员&#xff09;。通过在网上查找资料&#xff0c;并进行实践成功。特分享如下。 一 在当前使用主题目录下的functions.php中添加以下php代码&#x…

查找邮件日志

#查找收件人的邮件get-messagetrackinglog -start "10/08/2015 17:00" -end "10/08/2015 21:00" -recipients "l1xin.com" #查找发件人的邮件get-messagetrackinglog -start "10/08/2015 17:00" -end "10/12/2015 17:00" -s…

c# webbrowser  获取用户选中文字

c# webbrowser 获取用户选中文字 原文:c# webbrowser 获取用户选中文字最近一直被一个问题困扰&#xff0c;有一个文本框&#xff0c;一个webbrowser控件&#xff0c;一个上下文菜单&#xff0c; 用户用鼠标左键选中文字&#xff0c;右键点击搜索&#xff0c;就把选中的文字赋…

修改节点的属性 节点默认不允许修改

xml的节点默认是不允许修改的&#xff0c;本文也就不做处理了 XmlDocument xmlDoc new XmlDocument(); xmlDoc.Load(xmlPath); XmlElement element (XmlElement)xmlDoc.SelectSingleNode("BookStore/NewBook"); element.SetAttribute("Name", "Zhan…

敏捷现状10周年调查

敏捷现状第10届调查 已于2015年10月2号对外开放。本次调查探讨了全球范围内敏捷实施的现状。\\\ [敏捷现状]报告给出了敏捷发展趋势&#xff0c;最佳实践和成功向敏捷转型获得的经验教训等方面的洞见&#xff0c;并且这些都是软件人才的真知灼见。该报告已然成为全球范围内规模…

解决EF 4.0 中数据缓存机制

EF4.0默认开启缓存机制&#xff0c;如果想要禁用缓存机制的话&#xff0c;则须加上一句话&#xff1a;_db.CreateObjectSet().MergeOption MergeOption.OverwriteChanges; public IQueryable<T> LoadEntities(Func<T, bool> whereLambda){try{var set _db.Create…

cannot be deleted directly via the port API: has device owner network:floatingip

cannot be deleted directly via the port API: has device owner network:floatingip posted on 2015-10-13 19:26 秦瑞It行程实录 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/ruiy/p/4875605.html

170. Two Sum III - Data structure design【easy】

170. Two Sum III - Data structure design【easy】 Design and implement a TwoSum class. It should support the following operations:add and find. add - Add the number to an internal data structure.find - Find if there exists any pair of numbers which sum is e…

paip.提升效率---提升绑定层次--form绑定取代field绑定

paip.提升效率---提升绑定层次--form绑定取代field绑定 编辑form中,常常需要,绑定一个对象到个form.. 传统上要绑定field开始...降低效率..jsp>>>也是绑定field开始...asp.net也是,,,.net winform ,c 也是...从理论上说,Jsp把对象绑定到个form不好弄,只能输出js来客…

c# params 工作原理。

2019独角兽企业重金招聘Python工程师标准>>> 高级语言之所以成为高级语言&#xff0c;编译器付出了很多。params在给我们带来方便的同时&#xff0c;编译器也是贡献不少。 实例代码&#xff1a; using System; public class Test { public static void Main(){ C…

这7个在线工具,帮助您快速开发WordPress主题

由于WordPress遵从GPL协议&#xff0c;这个协议规定WordPress可以免费用于商业用途。这样做一个网站的成本就比较低。相对应的开发WordPress主题的需求就多起来了。结合笔者多年开发WordPress主题的经验&#xff0c;熟练使用下面一些免费的工具&#xff0c;在开发WordPress主题…

参数依赖查找(ADL,Argument-dependent lookup)

参数依赖查找&#xff08;Argument-dependent lookup&#xff09;&#xff0c;又称 ADL 或 Koenig 查找&#xff0c;是一组于函数调用表达式查找非限定函数名的规则&#xff0c;包含对重载运算符的隐式函数调用。在通常非限定名称查找所考虑的作用域和命名空间之外&#xff0c;…