02-小程序:Flex布局

一、简介

  • 1.1、flex 布局 (Flexible布局,弹性布局)是在小程序里面常用的布局方式
    官方文档:flexbox
    官方文档:align
  • 1.2、开启了 flex 布局元素叫做 flex container(里面的元素叫做flex items)
  • 1.3、设置 display属性为 flex 或者 inline-flex 也可以成为 flex container
    flexflex containerblock-level 形式存在
    inline-flexflex containerinline-level 形式存在

二、CSS常用属性

  • 2.1、应用在 flex container上的CSS属性:flex-flowflex-directionflex-wrapjustify-contentalign-itemsalign-content
    flex 布局模型如下:

    flex 布局模型

    • <1>、flex-direction (决定了 main axis(主轴) 的方向)
      flex items 默认都是沿着 main axis(主轴)从 main start 开始往 main end 方向排布
      flex-direction决定了 main axis(主轴) 的方向,有 4 个取值 row(默认值)、row-reversecolumncolumn-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属性:flexflex-growflex-basisflex-shrinkorderalign-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>、flexflex-grow flex-shrink? || flex-basis 的简写,其中 ? 表示可有可无,|| 表示 flex-shrinkflex-basis 可以出现一个

      • flex 默认值是:0 1 auto
      • 取值 none0 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

推荐阅读更多精彩内容

  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 1,719评论 0 24
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 1,422评论 0 5
  • 网页布局(layout)是CSS的一个重点应用。 行内元素也可以使用Flex布局。.box{ display: i...
    君临天下夜未央阅读 647评论 0 5
  • FlexiableBox即是弹性盒,用来进行弹性布局,一般跟rem(rem伸缩布局(转))连起来用比较方便,fle...
    华华00526阅读 42,919评论 2 39
  • flex是flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定...
    胡萝卜樱阅读 121评论 0 1