Flex布局详解-小程序

一、背景

学习小程序的时候,开始正式接触flex布局。但这种布局方式是一种较为普遍适用的方案。尤其对于前端布局来说,是不能跳过的一课。今天就研究一下flex 布局的基础概念,场景和语法。要做到可以在代码之前就可以预想结果才能在实战中应用。

二、 flex概念-可伸缩盒子

Flex是Flexible Box的缩写,翻译成中文就是“弹性盒子”,用来为盒装模型提供最大的灵活性。

在HTML5中div标签和小程序中的view标签,本身都没有渲染的效果。主要用来做页面布局,每个标签称为一个盒子或者容器。当我们通过display: flex;设定其样式后。这个盒子就称为可伸缩的盒子。

.box1{
display: flex;
}

三、基本组件

  • Flex容器(flex container),简称"容器"
  • 容器内部子元素称为 容器成员,也称为Flex项目(flex item),简称"项目"。

container和item是相对的。项目item也可以通过display:flex成为容器。布局时需要考虑这一点,到底是以哪个角度看待当前元素的。

主轴和交叉轴

flex-direction 设定为row时,横向是主轴,纵向是交叉轴。
flex-direction 设定为column时,纵向是主轴,横向是交叉轴。

四、 容器属性

设有display:flex或者display:block的元素就是一个flex Container(伸缩容器),里面的子元素称为flex item(伸缩项目),flex container中子元素都是使用Flex布局排版。、

  • flex-direction 决定元素的排列方向
  • flex-wrap 决定元素如何换行
  • flex-flow flex-direction和flex-wrap的简写
  • justify-content 元素在主轴上的对齐方式
  • align-items 元素在交叉轴的对齐方式
  • align-content

注意每个属性的默认值,即使你不设置,flex容器内部的默认渲染方式。

4.1 flex-direction 横向or纵向排列

flex-direction: row(默认值) | row-reverse | column | column-reverse;

row:水平方向排列,从左到右。
在这里插入图片描述
column:垂直方向排列,从上到下
Flex布局详解-小程序_第1张图片

4.2 flex-wrap 是否换行

flex-wrap: nowrap(默认) | wrap | wrap-reverse;

nowrap 不换行。item增加会压缩并排在同一行。
在这里插入图片描述
wrap 换行
Flex布局详解-小程序_第2张图片

4.3 justify-content 主轴对齐方式

对齐一般横向对齐或者纵向对齐。主轴指的就是flex-direction设定的对齐方向是横向还是纵向。

justify-content: flex-start(默认) | flex-end | center | space-between | space-around;

flex-start 从左到右(left)
在这里插入图片描述
flex-end 从右到左(right)
在这里插入图片描述
center 居中
在这里插入图片描述

以上三个item都是没有分散开的,只是整体位置不同。

space-between 先两端对齐,然后所有项目间隔相等
在这里插入图片描述
space-around 所有项目两侧间隔相等
在这里插入图片描述

上面两个区别在于是否两端对齐,其他是一样的。如果你想items贴这边就选择between.

4.4 align-items 交叉轴对齐方式

交叉轴就是与主轴成90度的轴。这种叫法不是很形象。flex-direction设定排列方向是横向的话,交叉轴就是纵向的对齐方式。

flex-start | flex-end | center | baseline | stretch;
假设排列方向是横向。

flex-start(默认)从上到下 上对齐
Flex布局详解-小程序_第3张图片
flex-end 从下到上 下对齐
Flex布局详解-小程序_第4张图片
center 垂直居中
Flex布局详解-小程序_第5张图片

上面三种就够了。垂直不就是这三种方式吗。接下来的两种可能带来疑惑,如果觉得复杂就不需要看了。

baseline 项目的第一行文字的基线对齐;
解释:不同item文字的位置不同时,我们让文字第一行保持对齐。这里蓝色的2小块,我设置了垂直居中。
如果默认上对齐的话。baseline就没有任何效果。
Flex布局详解-小程序_第6张图片
stretch 拉伸。
解释:这个只有当item的高度没设定或者auto时候,才会有效果。

下图中
1,3 两个区块高度没设定,被拉伸到整个屏幕高度。
2,高度设定为200rpx,显示就是实际设定的高度。
Flex布局详解-小程序_第7张图片

五 项目item属性

  • order 设定一个数字,调整项目的排序优先级。数值越小,排列越靠前,默认为0
  • flex-grow 项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
  • flex-shrink 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
  • flex-basis flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
  • flex grow,shink,basis几个属性的合并
  • align-self align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

5.1 order 更换排序

设定 item2的order=-1,第二个区块排序最靠前
在这里插入图片描述

5.2 flex-grow 空间多余时,占满剩余空间

设定item2的flex-grow=2。这里并不是放大了两倍。而是占用了剩余空间。
结论:数字代表仅仅是占用剩余空间的权利,数字越大占用比列越大。
在这里插入图片描述

5.2 flex-shrink 空间不足时,缩小自身的比例

注:为了出效果,增加了每个item的width。所以看起来会比上面宽。

设定item2的flew-shrink=5.空间不足时,item2被缩小了,不是5倍。
解释:如果所有item都是默认值1,空间不足时都会成比例缩小。现在item2的flew-shrink=5,它缩小就会更多一些。
在这里插入图片描述

5.3 flex-basis(可忽略此属性)

我对这个属性理解:设定一个长度单位。代表了这个item在主轴显示的长度。

  1. 横向排列的情况下,下面两个属性都可以用来控制宽度,而且效果没啥不同。我觉得就布局而言,两个是一样的。
    width
    flex-basis
  2. flex-direction: column;纵向排列的情况下,flex-basis设定的是主轴纵向的长度。而width还是横向的宽度。这时flex-basis和height的属性一致。
    flex-basis: 200rpx;
    width: 200rpx;
    Flex布局详解-小程序_第8张图片
  3. flex-basis的优先级别width高。

还没看到这个属性价值。没有具体的场景非用不可。

5.4 align-self 单个项目的排列方式。

align-self: auto (默认)| flex-start | flex-end | center | baseline | stretch;

这个吧item2的align-self设定为flex-end。只有item2从下倒上排列。
Flex布局详解-小程序_第9张图片

总结

  1. 分清主轴和交叉轴概念
  2. 分清容器和内部项目的概念
  3. 知道容器内部项目的排列方向,对齐方式,是否换行
  4. 知道项目本身的排序控制,放大缩小控制,单个对齐的控制。

你可能感兴趣的:(前端技术)