开发者社区> JoanKing> 正文

02-小程序:Flex布局

简介: 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 布局模型如下:


image.png


<1>、flex-direction (决定了 main axis(主轴) 的方向)

flex items 默认都是沿着 main axis(主轴)从 main start 开始往 main end 方向排布

flex-direction决定了 main axis(主轴) 的方向,有 4 个取值 row(默认值)、row-reversecolumncolumn-reverse


image.png

image.png


image.png


<2>、justify-content 决定了flex items 在 main axis 上的对齐方式,取值如下:


image.png

  • 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 上的对齐方式,取值如下:


image.png

  • 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类似


image.png


    • 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 排在最后


image.png

image.png


<!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-growflex-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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
20005 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29401 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
22631 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
16634 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20839 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23607 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
14909 0
+关注
433
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载