一、简介
- 1.1、flex 布局 (Flexible布局，弹性布局)是在小程序里面常用的布局方式
官方文档：flexbox
官方文档：align - 1.2、开启了 flex 布局元素叫做 flex container(里面的元素叫做flex items)
- 1.3、设置 display属性为 flex 或者 inline-flex 也可以成为 flex container
flex：flex container以block-level形式存在
inline-flex：flex container以inline-level形式存在
二、CSS常用属性
- 2.1、应用在
flex container上的CSS属性：flex-flow、flex-direction、flex-wrap、justify-content、align-items、align-content
flex 布局模型如下：
<1>、flex-direction (决定了 main axis(主轴) 的方向)
flex items 默认都是沿着 main axis(主轴)从 main start 开始往 main end 方向排布
flex-direction：决定了 main axis(主轴) 的方向，有 4 个取值 row(默认值)、row-reverse、column、column-reverse
<2>、justify-content 决定了flex items 在 main axis 上的对齐方式，取值如下：
flex-start(默认值)：与 main start 对齐flex-end：与 main end 对齐center：居中对齐space-between：flex items之间的距离相等，flex items与main start、main end 两端对齐space-evenly：flex items之间的距离相等，flex items与main start、main end之间的距离等于flex items之间的距离space-around：flex items之间的距离相等，flex items与main start、main end之间的距离等于flex items之间的距离的一半
- <3>、align-items 决定了flex items 在 cross axis 上的对齐方式，取值如下：
stretch(默认值)：当flex items在 cross axis 方向上的size为auto时，会自动拉伸填充 flex containerflex-start：flex items与cross start对齐flex-end：flex items与cross end对齐center：居中对齐baseline：与基准线对齐- <4>、flex-wrap 决定了 flex container 是单行还是多行
nowrap(默认)：单行wrap：多行wrap-reverse：多行(对比wrap,cross start与cross end 相反) - <5>、flex-flow ：是
flex-direction || flex-wrap的简写，如下
flex-flow:column wrap 等价于 => 如下
flex-direction:column flex-wrap:wrap
- flex-flow:row reverse 等价于 => 如下
flex-direction:row reverse flex-wrap:nowrap
- flex-flow:wrap 等价于 => 如下
flex-direction:row flex-wrap:wrap
- <6>、align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与justify-content类似
stretch(默认值)：与 align-items 的 stretch 类似flex-start：与 cross start 对齐flex-end：与 cross end 对齐center：居中 对齐space-between：flex items之间的距离相等；flex items与cross start、cross end两端对齐space-around：flex items之间的距离相等；flex items与cross start、cross end之间的距离是flex items之间距离的一半space-evenly：flex items之间的距离相等；flex items与cross start、cross end之间的距离是flex items之间距离的一半
- 2.2、应用在
flex items上的CSS属性：flex、flex-grow、flex-basis、flex-shrink、order、align-self
- <1>、order 决定了 flex items的排布顺序：可以设置任意整数(如：正整数、负整数、0)，值越小就越排在前面，默认值是0,如下代码，因为 3 的order最大，其他的都是默认0，所以 3 排在最后
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>测试啦</title> <style> .container { border: 1px solid #000; width: 200px; height: 400px; margin-left: 20px; margin-top: 20px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-evenly; } .item { width: 100px; height: 100px; font-size: 50px; color: #fff; text-align: center; line-height: 100px; } .item:nth-of-type(1) { background-color: #f00; } .item:nth-of-type(2) { background-color: #0f0; } .item:nth-of-type(3) { background-color: #00f; order: 1; } .item:nth-of-type(4) { background-color: #0ef; } .item:nth-of-type(5) { background-color: #a0f; } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> </body> </html>
- <2>、align-self
- flex items 可以通过 align-self 覆盖 flex container 设置的 align-items
auto(默认值)：遵从 flex container 的 align-items设置
stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致 - <3>、flex-grow：决定了 flex items 如何沿主轴方向 扩展
- (1)、可以设置任意非负数子(正小数、正整数、0)，默认值是0；当
flex container在main axis 方向上有剩余 size 的时候，flex grow的属性才会生效 - (2)、如果所有的 flex items 的 flex-grow 总和sum 超过 1，每个flex item扩展的size为flex container的剩余
size * flex-grow / sum
提示：sum指的是 所有flex item的flex-grow 之和
- (3)、如果所有的 flex items 的 flex-grow 总和sum 不超过 1，每个flex item扩展的size为flex container的剩余
size * flex-grow - (4)、 flex items 扩展后的最终 size 不能超过
max-width/max-height
- <4>、flex-shrink：决定了 flex items 如何沿主轴方向 收缩
- (1)、可以设置任意非负数子(正小数、正整数、0)，默认值是1；当
flex container在main axis 方向上超过了flex container的 size 时候，flex shrink的属性才会生效 - (2)、每个 flex items 收缩的 size为 flex items超出flex container的size * 收缩比例 / 所有 flex items 的收缩比例之和
提示：
- (1)、每个flex item的flex-shrink之和>=1才是：每个 flex items 收缩的 size为 flex items超出flex container的size * 收缩比例 / 所有 flex items 的收缩比例之和
- (2)、每个flex item的flex-shrink之和 < 1 则：每个 flex items 收缩的 size为 flex items超出flex container的size* flex-shrink之和 * 收缩比例 / 所有 flex items 的收缩比例之和
- (2)比(1)多一个
* flex-shrink之和
- (3)、收缩比例 = flex-shrink * flex-item 的base size，base size 就是 flex item 放入 flex container 之前的 size
- (4)、 flex items 最终收缩的 size 不能小于
max-width/max-height
提示
收缩比例** = flex-shrink * flex-item 的base size，对于 base的size要看main axis 方向来决定是 width还是height
- <5>、flex-basis：用来设置 flex items 在main axis 方向的base size，如果main axis 方向是宽：那么base size设置的就是宽度；如果main axis 方向是高：那么base size设置的就是高度。
- auto(默认值)、content：取决于内容本身的size
- 决定 flex items 最终base size的因素，从优先级高到低
(1)： max-width/max-height/min-width/max-height
(2)：flex-basis
(3)：width/height
(4)：内容本身的 size (前三个没有设置的情况下，4 生效)
- <6>、
flex是flex-growflex-shrink?||flex-basis的简写，其中?表示可有可无，||表示flex-shrink和flex-basis可以出现一个
- flex 默认值是：
0 1 auto - 取值
none是0 0 auto
三、应用在 flex container 和 flex items 上的CSS属性的总结
- 3.1、 flex container
- <1>、flex-flow 是 flex-direction || flex-wrap 的简写
- <2>、flex-direction 设置主轴 (main axis) 的方向
- <3>、flex-wrap 设置是否能换行
- <4>、justify-content 设置 flex items 在 main axis 上的对齐方式
- <5>、align-items 设置 flex items 在cross axis 上的对齐方式(一般是针对单行)
- <6>、align-content 设置 flex items 在 cross axis 上的对齐方式 (一般是针对多行)
- 3.2、 flex items
- <1>、flex 是
flex-growflex-shrink?||flex-basis的简写 - <2>、flex-grow 决定了flex items 在main axis 方向如何扩展
- <3>、flex-shrink 决定了 flex items 在 main axis 方向上如何收缩
- <4>、flex-basis 设置 flex items 在main axis 方向上的 base size(具体是宽还高要根据main axis来决定)
- <5>、order 设置flex items 的排布顺序
- <6>、align-self 允许 flex items 覆盖 flex cintainer设置的 align-items
