原文网址:CSS--flex布局--教程/详解_IT利刃出鞘的博客-程序员宅基地
本文详细介绍CSS的flex布局,包括:原理、属性。
简介
flexbox(Flexible Box)是一种一维的布局模型,它给 flexbox 的子元素提供了强大的空间分布和对齐能力。
flexbox 是一种一维的布局,因为一个 flexbox 一次只能处理一个维度上的元素布局(一行或者一列)。相对而言,Grid 布局是一个二维布局,可以同时处理行和列上的布局。
设置 flex 布局之后,子元素的 float、clear、vertical-align 的属性将会失效。
基本概念
flex布局,涉及到里外两层。外面一层叫做Flex容器(flex container),简称”容器”。容器里的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
flex 容器中默认存在两条轴,水平主轴(main axis) 和垂直于它的交叉轴(cross axis)。(这是默认设置,可以设置使垂直方向变为主轴,水平方向变为交叉轴)。
每个flex项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。
flex 布局需要先指定一个容器,任何一个容器都可以被指定为 flex 布局,这样容器内部的元素就可以使用 flex 来进行布局。
.container {
display: flex | inline-flex;
}
生成一个块状或行内的 flex 容器盒子。(如果使用块元素如 div,用 flex;如果使用行内元素,使用 inline-flex。)
有下面六种属性可以设置在容器上,它们分别是:
flex-direction:决定主轴的方向(即项目的排列方向)。
flex-direction: row | row-reverse | column | column-reverse;
四个值分别代表:
效果分别对应如下:
flex-wrap:定义如果一条轴线排不下,如何换行。有三个属性值,默认情况下是wrap。
flex-wrap: nowrap | wrap-reverse | wrap;
分别表示:不换行 | 反转换行 | 换行,效果分别如下:
flex-flow:flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。这里就不再具体测试。
justify-content:定义项目在主轴上(即相当于X轴)的对齐方式。一共有五个属性值:
justify-content: flex-start | flex-end | center | space-between | space-around;
分别表示:左对齐 | 右对齐 | 居中 | 两端对齐 | 每个项目两侧的间隔相等。以下是对应的效果:
align-items:定义项目在交叉轴上(即Y轴上)如何对齐。有五个属性值:
align-items: flex-start | flex-end | center | baseline | stretch;
分表表示:上对齐 | 下对齐 | 居中对齐 | 项目的第一行文字的基线对齐 | 如果项目未设置高度或设为auto,将占满整个容器的高度(默认值)。下面是对应的效果图:
align-content:定义多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。该属性定义多跟轴线在Y轴上的对齐方式,与align-items有点类似。其有以下六个属性值:
上边介绍了容器的属性,本处介绍容器内部的项目的属性。外部的容器设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
如果内部的项目不想受flex约束,可以设置position属性为absolute或者fixed。
flex项目有以下六个属性:
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。有了这个属性,可以调整在HTML中出现的顺序。
order: <integer>;
flex-basis定义了项目占据的主轴空间(main size)(分配剩余空间之前)。浏览器根据这个属性,计算主轴是否有多余空间。
默认值:auto,即项目本来的大小(采用元素内容的尺寸)。所以:给Flex元素的父元素声明display: flex,所有子元素会排成一行,且自动分配小大以充分展示元素的内容。
flex-basis: <length> | auto; /* default auto */
当主轴为水平方向的时候,若设置了 flex-basis,项目的宽度设置值会失效。
flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。
flex-basis的取值:
flex-grow属性用来“瓜分”父项的“剩余空间”。默认为0(即使存在剩余空间也不放大)。
flex-grow在 flex 容器下的子元素的宽度和比容器和小的时候起作用。
flex-grow定义了子元素的尺寸增长因子,父容器被子项的flex-basis占用后,剩下的尺寸会按照各个子元素的 flex-grow值进行加大到各个子元素上。
flex-grow: <number>; /* default 0 */
flex-shrink属性用来“吸收”超出的空间。默认为1。
flex-shrink在子元素宽度比父元素宽度大的时候起作用。
flex-shrink定义了子元素的尺寸缩小因子,子元素总尺寸减去父元素尺寸得到的尺寸会按照各个子元素的 flex-shrink值进行平分缩小到各个子元素上。
取值:
flex-shrink: <number>; /* default 1 */
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
flex: [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
特殊的取值
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
.item {flex: 0;}
.item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 0%;
}
.item-1 {flex: 0%;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-2 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;
}
.item {flex: 2 3;}
.item {
flex-grow: 2;
flex-shrink: 3;
flex-basis: 0%;
}
.item {flex: 11 32px;}
.item {
flex-grow: 11;
flex-shrink: 1;
flex-basis: 32px;
}
align-self:允许单个项目有与其他项目不一样的对齐方式,会覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
上面六个取值中,除了auto,其他值与align-items属性完全一致。
典型使用场景
html {
scroll-padding-top: 150px;
}
.sidebar,.sidebar_lefe {
top: 1em;
}
文章浏览阅读1.6k次。 他,是一个有15年开发经验的优秀软件工程师! 他,是我学习C++的老师! 他,可以解决公司里其他所有大侠们解决不了的技术难题! 他,是公司每一个技术人员值得学习的榜样! 他,从一个项目经理后来成为一家Nasdaq上市公司的技术总监! 他,后来负责这家公司一个分公司的管理,做了公
文章浏览阅读9.9k次,点赞7次,收藏33次。编写程序:先设计一个函数fun(char *s)把字符串中的内容逆置后,将字符串输出。例如:字符串中原有内容为:gfedcba,则调用该函数后,串中的内容为:abcdefg。思想:把字符串中的内容逆置,也就是调换位置,通过中间变量,把s[len-i-1]的内容和s[i]的内容调换位置,从而实现内容逆置的结果。下面展示一些 输入输出结果。_输入一个字符串将其逆序输出
文章浏览阅读4.6w次,点赞9次,收藏13次。function formatDate(date) {console.log(date);// date = new Date();date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Data();console.log(date);var y = date.getFullYear();console.log(y);var m = date.getMonth() + 1;m = m < 10 ? '0' + m :..._js 日期格式化为yyyy-mm-dd
文章浏览阅读5.8w次,点赞38次,收藏218次。HQL(Hibernate Query Language) 是面向对象的查询语言, 它和 SQL 查询语言有些相似. 在 Hibernate 提供的各种检索方式中, HQL 是使用最广的一种检索方式. 它有如下功能:在查询语句中设定各种查询条件;支持投影查询, 即仅检索出对象的部分属性;支持分页查询;支持连接查询;支持分组查询, 允许使用 HAVING 和 GROUP BY 关键字;提供内_hql sql
文章浏览阅读6k次。MFC下,提供了List Control控件,当选择Report模式时,可以方便的做数据报表之类的应用。类似下图: 但是有个不大不小的问题是,当List Control选择可编辑模式时,只有每一行的第一列的单元格才能编辑,而且在默认情况下,当选中的时候,也只有被选中的这一行的第一个单元格才会反色显示~~这未免太BT了~在网上找了一些相关的帖子,解决整行选中的问题可以采用为List _mfc listctrl 编辑
文章浏览阅读2.3k次。Landsat-TM-辐射定标和大气校正步骤 Landsat TM 辐射定标和大气校正步骤 一、数据准备 从USGS网站或者马里兰大学下载TM原始数据, USGS网站下载的数据是原始数据,在ENVI软件File–Open External File–Landsat – Geotiff with meta中只需打开***********_MTL.txt即可打开所有波段数据(除band6); usgs..._tm影像辐射定标的流程
文章浏览阅读917次。**关于CountDownLatch的认识** 今天在浏览论坛的时候发现了一个有趣的东西,自己之前没有用过,在此记录一下,一遍日后阅读浏览, 作为程序员,尤其使一个已近做了3年的java程序员来说,总感觉自己都会了,其实自己稍微看看又发现自己咋又不知道呢, 这个也是我的感慨,应为即将面临这找工作,自己还有有一点压力的,还是比较怕技术面试的,不知道面试官会问哪些奇怪的问题,这些问题又是我不知道的_关于cyclicbarrier和countdownlatch说法正确的是
文章浏览阅读2k次。安卓蓝牙动态权限安卓7.0及以下版本在 IDE 的 Project - Options 菜单弹出来的窗口里面,找到左边树结构的: Application -- Uses Permissions 项目,则右边会出来一堆权限让你打勾。这里要勾选上 Bluetooth 和 Bluetooth admin 两项。老的安卓版本,勾选这两项就可以了。安卓8.0及以上版本,还需要运行期用代码动态申请权限。代码里..._android witbluetoothmanager.requestpermissions
文章浏览阅读1.1k次。顺序表就是在内存中按顺序连续开辟一段空间来存储数据的结构,在java中就是数组,如a所示链表就是在内存中随机开辟内存一段段存储数据的结构,如图b所示线性表的接口使用一个接口表明基本操作的需求:public interface Ilist { //清空线性表 public void clear(); //判断线性表是否为空 public boolean isEmpty(); //获取线性表的长度 public int length(); /._画出线性表两种不同实现方式的示意图
文章浏览阅读1.4k次。参考文章:https://mp.weixin.qq.com/s?__biz=MjM5NjQ4MjYwMQ==&mid=2664609207&idx=3&sn=4a0331832b280f2f58644030a8771abe&chksm=bdce8ef18ab907e7c8b2cc6687ec69521cb196de9008..._网卡bro端口
文章浏览阅读5.4k次,点赞5次,收藏8次。2-1:一般情况下,源程序有效注释量必须在20%以上。说明:注释的原则是有助于对程序的阅读理解,在该加的地方都加了,注释不宜太多也不能太少,注释语言必须准确、易懂、简洁。2-2:文件头部应进行注释,注释必须列出:版权说明、版本号、生成日期、作者、内容、功能、修改日志等。示例:下面这段头文件的头注释比较标准,当然,并不局限于此格式,但上述..._c语言 版本号注释
文章浏览阅读792次。LINUX系统加固目录一、关于服务器的安全级别 2二、系统加固 2A、漏洞修补 21、内核漏洞 42、应用漏洞 4B、系统防护提升 51、系统配置的安全性 52、应用软件配置的安全性 83、用户权限配置的安全性 12一、关于服务器的安全_2.linux系统加固中下图的命名执行后会输出一条执行结果