更优雅的布局， 更多的时候我们实现功能又不仅仅是实现功能， 代码也可以更美好
再之后可能是是因为这个问题真的很困扰，就有了本文要讲述的主题 Flex 弹性布局。
仿佛发现了什么不得了的事情 有木有，我就问有木有~ ~，这个必须有~
他可以由开发者自由的定义元素的排列方式, 排列顺序, 元素分布的方向, 通过拉伸缩小以适应容器的大小. 听起来都还有点小激动呢
对浏览器的支持,也还可以, 如果不是非要兼容某些不常用的老版本浏览器的话,都可以考虑用这个来布局, 简直不能更美好~~
注: 本文仅为学习记录, 参考网上提供的资料结合自己的理解和测试而成, 不考虑兼容性, 若需考虑兼容性, 再去查~ ~
属性
display: flex;
声明使用弹性布局
当元素少的时候,会靠左排列(既是外层元素加了center)
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
display: inline-flex;
声明使用弹性布局(内联块级)
外层元素center之后会居中
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
无论是inline-flex 还是flex 当子容器内元素有很多时,全都会排在一排, 挤在一起, 若是容器本身放不下的话就会超出容器, 若是不设置flex-wrap就不换行~~
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
flex-direction
控制内容的显示的方向, 如下:
flex-direction: row; 水平排列显示(默认)
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
flex-direction: row-reverse; 水平倒序排列显示
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
flex-direction: column; 垂直排列显示
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
flex-direction: column-reverse; 垂直倒序排列显示
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
flex-wrap
控制内容是否需要换行, 如下:
flex-wrap: nowrap; 不换行 (默认, 坚决不换行,一直延伸到天际~)
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
flex-wrap: wrap; 换行超出容器部分换行,正序显示
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
flex-wrap: wrap-reverse; 换行超出容器部分换行,倒序显示(就连没填满的缺口都显示在第一行)~
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
flex-flow
flex-direction和flex-wrap的合体(默认row nowrap), 如下:
多个组合,
flex-flow: row-reverse wrap-reverse;
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
justify-content
控制对齐方式, 如下:
justify-content: flex-start; 左对齐(默认);
- 白骨夫人
- 唐僧骑马咚啦个咚
- 盘丝大仙
justify-content: flex-end; 右对齐
- 白骨夫人
- 唐僧骑马咚啦个咚
- 盘丝大仙
justify-content: center; 居中对齐
- 白骨夫人
- 唐僧骑马咚啦个咚
- 盘丝大仙
justify-content: space-between; 两边对其, 元素之间间隔等分
- 白骨夫人
- 唐僧骑马咚啦个咚
- 盘丝大仙
justify-content: space-around; 单个元素两边等分, (和使用margin类似, 元素与元素之间的距离,是一个元素的边距*2)
- 白骨夫人
- 唐僧骑马咚啦个咚
- 盘丝大仙
align-items
align-items: stretch; (默认) 全部拉伸使其和最高的元素一致
- 白骨夫人, 都是白骨,虽然也是可怜的人儿,是妖怪,可是还是挺漂亮的呀
- 女儿国主, 女儿国之主, 说什么王权富贵,怕什么戒律清规~
- 嫦娥姐姐, 第一美人儿~
- 盘丝大仙
- 玉兔妹妹, 呆萌呆萌的小兔子
- 白面狐狸,这个真不知道是哪一集出现的了
align-items: center; 上下居中
- 白骨夫人, 都是白骨,虽然也是可怜的人儿,是妖怪,可是还是挺漂亮的呀
- 女儿国主, 女儿国之主, 说什么王权富贵,怕什么戒律清规~
- 嫦娥姐姐, 第一美人儿~
- 盘丝大仙
- 玉兔妹妹, 呆萌呆萌的小兔子
- 白面狐狸,这个真不知道是哪一集出现的了
align-items: flex-start; 基于容器顶部对齐
- 白骨夫人, 都是白骨,虽然也是可怜的人儿,是妖怪,可是还是挺漂亮的呀
- 女儿国主, 女儿国之主, 说什么王权富贵,怕什么戒律清规~
- 嫦娥姐姐, 第一美人儿~
- 盘丝大仙
- 玉兔妹妹, 呆萌呆萌的小兔子
- 白面狐狸,这个真不知道是哪一集出现的了
align-items: flex-end; 基于容器底部对齐
- 白骨夫人, 都是白骨,虽然也是可怜的人儿,是妖怪,可是还是挺漂亮的呀
- 女儿国主, 女儿国之主, 说什么王权富贵,怕什么戒律清规~
- 嫦娥姐姐, 第一美人儿~
- 盘丝大仙
- 玉兔妹妹, 呆萌呆萌的小兔子
- 白面狐狸,这个真不知道是哪一集出现的了
align-items: baseline; 基线对齐(就是每个元素第一排的文字的底部位置呈一条直线)
- 白骨夫人, 都是白骨,虽然也是可怜的人儿,是妖怪,可是还是挺漂亮的呀
- 女儿国主, 女儿国之主, 说什么王权富贵,怕什么戒律清规~
- 嫦娥姐姐, 第一美人儿~
- 盘丝大仙
- 玉兔妹妹, 呆萌呆萌的小兔子
- 白面狐狸,这个真不知道是哪一集出现的了
align-content
视觉上的效果呢,感觉和align-items差不多,就是他是纵向的
align-content: center; 整体上下居中对齐
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
align-content: stretch; 上下等分之后在拉伸,使其子节点高度全都相等
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
align-content: flex-start; 基于容器顶部对齐
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
align-content: flex-end; 基于容器底部对齐
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
align-content: space-between; 使每列之间的间隔都相等
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
align-content: space-around; 上下等分之后,再在每一行的上下居中
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
order
自动按照设置的值来排列位置, 数字越小越靠前
- order:3
- order:2
- order:1
- order:0
flex-grow
放大容器中的元素(占用剩余元素, 按照flex-grow数值的多少来按比例分配)
默认为0, 剩余不占用, 若全部设置为一样的值,则均分
- 白骨夫人4
- 女儿国主3
- 盘丝大仙1
flex-shrink
缩小容器中的元素(当元素过多的时候自动缩小元素的大小,以适应当前容器)
默认为1, 过多时自动缩小, 若设置为0,则不会缩小
- 白骨夫人0
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
- 玉兔妹妹
- 白面狐狸
flex-basis
分配剩余空间(当元素有剩余空间的时候, 各自可以占有的长度, 当元素增多的时候,就会按照这个值的比例来慢慢缩小元素的大小)
可以为数值或者auto
- 白骨夫人
- 女儿国主
- 盘丝大仙
- 盘丝大仙
- 盘丝大仙
- 白骨夫人
- 白骨夫人
- 白骨夫人
flex
flex-grow(放大) flex-shrink(缩小) flex-basis(分配剩余) 三者的简写形式
默认值initial = 0 1 auto
auto = 1 1 auto; 未满时放大 溢出时缩小 剩余空间自动分配 (最常用)
none = 0 0 auto; 未满时不放大 溢出时不缩小 剩余空间自动分配
- 白骨夫人
- 女儿国主
- 嫦娥姐姐
- 盘丝大仙
align-self
可以为某个特定元素设置对齐方式
默认为auto 表示集成父元素的align-items 如果没有父元素等于stretch
- 白骨夫人, 都是白骨,虽然也是可怜的人儿,是妖怪,可是还是挺漂亮的呀
- align-self: flex-end
女儿国主, 女儿国之主, 说什么王权富贵,怕什么戒律清规~ - align-self: center
嫦娥姐姐, 第一美人儿~ - align-self: baseline;
盘丝大仙 - 玉兔妹妹, 呆萌呆萌的小兔子
- align-self: stretch;
白面狐狸,这个真不知道是哪一集出现的了 - 侍香,奎木狼守护的女子,侍香下凡后,他追随而下,共同生活了十三年~
实例
1.
- 西游记
- 师徒四人
- 妖精
- 唐僧
- 悟空
- 八戒
- 老沙
- 白骨夫人
- 女儿国主
- 盘丝大仙
- 嫦娥姐姐