学习旧岛小程序（1） flex 布局

css ：

view 相当于 div 块级元素

display 默认设置 block

display:inline 设置后设置宽度高度是无效的

要设置宽度高度又要设置为行内元素我们设置：

(1)display:inline-block;

width:100px;

height:100px;

(2) flex 布局

display:flex

flex-direction:row;

flex-direction 设置布局方向默认设置 row

row-reverse ：主轴为水平方向起点在右边

column-reverse：主轴为垂直方向，起点在下边

row（默认值）：主轴为水平方向，起点在左端。

column：主轴为垂直方向，起点在上沿。

reverse 意思是倒序

（3）为什么行倒序于列倒序有点不同

因为他们的高度是他们的本身的高度加起来的宽度撑满屏幕

所以在列倒序上只是调整了下位置行倒序就会向右倒序

原来排序是 1 2 3 反过来就是 3 2 1

（4）justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

flex-start 左边对齐

flex-end 右边对齐

center 中心

space-between 两端对齐，项目之间的间隔都相等

space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

start 与 end 的方向取决于主轴上的对齐方法是哪个

space-between 让靠左边的元素靠左对齐让右边的元素靠右对齐其他的保持等距

space-between 也就是平均分布

space-around 等距分布每个元素的左右距离都相等

（5） align-items属性

align-items属性定义项目在交叉轴上如何对齐。

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

交叉轴的方向取决于主轴的方向

比如：主轴 row 交叉轴 column 就比如一个十字路口

stretch 没有设置高度的情况下

（6） flex-wrap属性换行

nowrap（默认）：不换行。

wrap：换行，第一行在上方

wrap：换行，第一行在上方。

换行：有间距

转载于:https://www.cnblogs.com/guangzhou11/p/11259331.html

学习旧岛小程序（1） flex 布局相关推荐

学习旧岛小程序（5） observer 函数中修改属性的值
不要在一个属性的 observer 函数中修改属性的值不然会造成内存泄露错误代码: properties: {/* 期刊号 */index: {type: String,observer: fu ...
学习旧岛小程序（3）组件的样式
(1)单位要用 rpx rpx(responsive pixel): 可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则75 ...
学习旧岛小程序（4）电影组件的实现
先编写基本的页面架构 <view class="classic-container"> <image src="{{img}}" class= ...
学习旧岛小程序（2）自定义组件
(1) 新建组件新建组件目录下的文件名字可以与目录不一样 (2)引用组件在引用的组件的 .json 添加配置 { "usingComponents": { "like ...
学习旧岛小程序（5）自定义组件的自定义事件
自定义组件的触发事件: 自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名.detail对象和事件选项: this.triggerEvent('like', { behavio ...
学习旧岛小程序（4）封装api 请求
1.配置基本的请求路径和 key config.js const config = {baseUrl: 'http://bl.7yue.pro/v1/',appkey: "" ...
我在学习小程序之flex布局
我在学习小程序之flex布局什么是flex布局呢? flex布局定义 flex布局原理一个小案例需求分析代码实现代码部分效果部分总结什么是flex布局呢? flex布局定义 flex ...
微信小程序解决flex布局，最后一行靠左对齐问题
微信小程序解决flex布局,最后一行靠左对齐问题需求:使用flex布局,每行固定三个元素,元素间距自适应,向左对齐实际效果与代码如下: wxml <view class="con- ...
微信旧岛小程序章节目录
索引第一章申请appkey ## 标题##我是标题第二章准备工作小程序开发工具介绍和第三方开发工具介绍第三章小程序基础知识与新特性 1.小程序的4种文件类型 2.小程序的组织结构 3 ...

学习旧岛小程序（1） flex 布局

学习旧岛小程序（1） flex 布局相关推荐

最新文章

热门文章

学习旧岛小程序 （1） flex 布局

学习旧岛小程序 （1） flex 布局相关推荐

最新文章

热门文章

学习旧岛小程序（1） flex 布局

学习旧岛小程序（1） flex 布局相关推荐