当前位置: 首页 > news >正文

原创:新手布局福音!微信小程序使用flex的一些基础样式属性(一)

来源:微信小程序使用flex的一些基础样式属性
作者:Nazi

Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能使用不同以往的居中方式并减少css的相关样式声明。
先来看看关于flex的一张图:

clipboard.png

从上面可以看到一些flexbox的相关信息,

main axis 和 cross axis 指的是flexbox内部flex项目(flex item)的排列方向,通俗点说就是,里面的flex项目是按照横轴或者纵轴排列的顺序方向。

main start 和 main end 是指项目的开始和项目的结束是按照排列方向的起点和终点。

再来看看flex的相关属性:

我们给定一个结构:

<div class="container">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
...
</div>

在微信小程序里面可以是这样的结构:

<view class="container">
<view class="item1"></view>
<view class="item2"></view>
<view class="item3"></view>
...
</view>

当我们要用时这个布局的时候对于外层的结构,我们对他的css样式设定:

<style type="text/css">
.container{
display: flex; /*or inline-flex*/
}
</style>

接下来我们就需要来规定这个item排列的方向了,依旧对外层结构css设定:

.container{
display: flex; /*or inline-flex*/
flex-direction: row;
}

flex-direction这个属性是用来规定flex项目在轴方向上面排列的顺序,

他有这样几个属性:

flex-direction: row | row-reverse | column | column-reverse;

row

如果规定的方向是 ltr(left to right)项目一次从左往右排列,

如果规定的方向是 rtl(right to left)项目一次从右往左排列,

row是默认值。

row-reverse

如果规定的方向是 ltr(left to right)项目一次从右往左排列,

如果规定的方向是 rtl(right to left)项目一次从左往右排列,

row 和 row-reverse 是相反的。

column 跟row是类似的,只不过是从上到下的方向排列的。

column-reverse 跟row-reverse 是类似的,只不过是从下到上的方向排列的。

对于有时候,并不想让所有的项目都在一行排列的话(多行显示),我们添加flex-wrap:

.container{
display: flex; /*or inline-flex*/
flex-direction: row;
flex-wrap:wrap;
}

flex-wrap是决定项目是否多行显示的属性,项目默认情况下是在一行下显示的。

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap 指的是在一行显示不换行;

wrap 指的是多行显示;

wrap-reverse 指的是多行显示,但是跟规定排列方向相反;

flex-flow是 flex-direction 和 flex-wrap 的缩写

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

上面css即:

.container{
display: flex; /*or inline-flex*/
flex-flow:row wrap;
}

在我们一些需要构建的布局里,我们还需要去让他能够自由的伸缩,这也是flex布局的优势之一,能够极大的方便我们去提升效率。

用于在主轴上对齐伸缩的项目属性:justify-content。他的属性有:

justify-content: flex-start | flex-end | center | space-between | space-around;

不同属性值下他的表现:

css样式为:

.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex; /*or inline-flex*/
flex-flow:row wrap;
justify-content:flex-start;
}
.item{
flex:0 0 30%;
}
.item1{background-color:#0074e0;}
.item{background-color:#008c00;}
.item3{background-color:#be0000;}

flex-start

clipboard.png

flex-end

clipboard.png

center

clipboard.png

space-between

clipboard.png

space-around

clipboard.png

flex-start(默认值),项目向起始位置靠齐,第一个项目所在轴的起点位置对齐,后面的项目与前一个项目的边外边对齐。

flex-end,项目向结束位置,最后一个项目所在轴的终点位置对齐,前面的项目与后一个项目的边外边对齐。

center,项目向一行的中间位置对齐,可以说成是此行的居中对齐。在某些居中需求下的css样式布局既可以选择这个样式声明

space-between,项目会平均的分布在一行里面。项目的第一项和最后一项会与轴的起点和终点边靠齐。其他的项目则平均分布早剩余的空间里面。

space-around,项目会平均分布在一行里。两端会保留一半的空间。

在多行存在的情况,有一个和justify-content类似的属性,只不过他是作用在相对于轴的垂直方向上的。属性值如下:

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

不同属性值下的表现:(横轴上规定的是 flex-start)

css样式为:

.container{
width: 100%;
height: 400px;
background-color: #ccc;
display: flex;/*or inline-flex*/
flex-flow:row wrap;
justify-content:flex-start;
align-content: flex-start;
}
.item{
flex:0 0 30%;
min-height: 100px;
}
.item1,.item6{background-color:#0074e0;}
.item2{background-color:#008c00;}
.item5{background-color:#234567;}
.item3,.item4{background-color:#be0000;}

flex-start

clipboard.png

flex-end

clipboard.png

center

clipboard.png

space-between

clipboard.png

space-around

clipboard.png

flex-start(默认值),项目向起始位置靠齐,第一个项目所在轴的起点位置对齐,后面的项目与前一个项目的边外边对齐。

flex-end,项目向结束位置,最后一个项目所在轴的终点位置对齐,前面的项目与后一个项目的边外边对齐。

center,项目向一行的中间位置对齐,可以说成是此行的居中对齐。在某些居中需求下的css样式布局既可以选择这个样式声明

space-between,项目会平均的分布在一行里面。项目的第一项和最后一项会与轴的起点和终点边靠齐。其他的项目则平均分布早剩余的空间里面。

space-around,项目会平均分布在一行里。两端会保留一半的空间。

虽然方式跟justify-content是一样的,但是因为轴的不同起始点和终点是不同的,所以显示的方式是一直的,但是方向上的效果看起来会有点差异。

关于stretch 由于上面的项目设定了高度,当项目的高度不是固定值得时候,stretch的表现如下:

clipboard.png

也就是说侧轴的长度是不是固定值得时候,各行会扩大占据剩下的空间。

下期,我会介绍两个属性,align-items 和 align-self

相关文章:

  • MyBatis的关联关系 一对一 一对多 多对多
  • iOS—仿微信单击放大图片
  • 内核优化参数
  • webpack搭建前端一条龙服务
  • 敏捷开发Scrum
  • 1.ASP.NET MVC使用EPPlus,导出数据到Excel中
  • redis学习笔记
  • 设计师必看的8个TED 演讲
  • [ solr入门 ] - 利用solrJ进行检索
  • hudson运行出现java.io.IOException Cannot run program的错误分析
  • shell之变量和引用
  • GIT教程
  • ios UIApplocation 中APP启动方式
  • 推送知识点2
  • 各种数据库连接字符串
  • [笔记] php常见简单功能及函数
  • 2019.2.20 c++ 知识梳理
  • 2019年如何成为全栈工程师?
  • CSS 提示工具(Tooltip)
  • Netty 框架总结「ChannelHandler 及 EventLoop」
  • supervisor 永不挂掉的进程 安装以及使用
  • 从零到一:用Phaser.js写意地开发小游戏(Chapter 3 - 加载游戏资源)
  • 浮现式设计
  • 入口文件开始,分析Vue源码实现
  • 三栏布局总结
  • 什么软件可以提取视频中的音频制作成手机铃声
  • 时间复杂度与空间复杂度分析
  • 用jquery写贪吃蛇
  • ​secrets --- 生成管理密码的安全随机数​
  • #Linux(make工具和makefile文件以及makefile语法)
  • (4)事件处理——(2)在页面加载的时候执行任务(Performing tasks on page load)...
  • (Spark3.2.0)Spark SQL 初探: 使用大数据分析2000万KF数据
  • (动手学习深度学习)第13章 计算机视觉---微调
  • (附源码)springboot太原学院贫困生申请管理系统 毕业设计 101517
  • (附源码)springboot助农电商系统 毕业设计 081919
  • (六)Hibernate的二级缓存
  • (三)模仿学习-Action数据的模仿
  • (一)u-boot-nand.bin的下载
  • .describe() python_Python-Win32com-Excel
  • .gitignore文件_Git:.gitignore
  • .NET “底层”异步编程模式——异步编程模型(Asynchronous Programming Model,APM)...
  • .net core MVC 通过 Filters 过滤器拦截请求及响应内容
  • .NET Framework杂记
  • .NET 动态调用WebService + WSE + UsernameToken
  • .net 写了一个支持重试、熔断和超时策略的 HttpClient 实例池
  • @AutoConfigurationPackage的使用
  • @modelattribute注解用postman测试怎么传参_接口测试之问题挖掘
  • [ 数据结构 - C++]红黑树RBTree
  • [android] 切换界面的通用处理
  • [Android开源]EasySharedPreferences:优雅的进行SharedPreferences数据存储操作
  • [AS3]URLLoader+URLRequest+JPGEncoder实现BitmapData图片数据保存
  • [AutoSar]BSW_OS 01 priority ceiling protocol(PCP)
  • [BZOJ3211]:花神游历各国(小清新线段树)
  • [CLickhouse] 学习小计
  • [COGS 622] [NOIP2011] 玛雅游戏 模拟