02-小程序：Flex布局

2019-10-29 本文已影响0人 IIronMan

一、简介

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 布局模型如下：

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
  
  row
  row-reverse
  column
  column-reverse
- <2>、justify-content 决定了flex items 在 main axis 上的对齐方式，取值如下：
  
  justify-content取值
  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 上的对齐方式，取值如下：
  
  align-items取值
  stretch(默认值)：当flex items在 cross axis 方向上的size为auto时，会自动拉伸填充 flex container
  flex-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类似
  
  align-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 排在最后
  order
```
<!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-grow flex-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-grow flex-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

02-小程序：Flex布局

猜你喜欢

热点阅读