微信小程序 笔记5 flex布局

HTML里面有盒子，盒子里面会有内容。那么

• 内容到盒子的距离是padding属性(内边距、内补丁)
• 盒子到另一个盒子的属性是margin属性(外边距、外补丁)
• 边框本身有一个border属性

padding:20px表示四个方向一样的

padding:10px 20px第一个值代表上下第二个值代表左右

padding:10px 20px 50px 三个值比较少见，第一个值代表上下，第二个代表左，第三个代表右

padding:10px 20px 30px 40px 分别代表上右下左(顺时针方向)

border后面三个属性:大小、颜色、样式

弹性盒子

自动分配距离，如宽度上平均分布。比较简单的对盒子进行分布。

只需要开启弹性盒子。

flex布局

flex 布局是继标准流布局、浮动布局(float)、定位布局后的第四种布局方式。flex 布局在浏览器中存在一定的兼容性。小程序中，是完全兼容 flex 布局的，并且微 信官方也是推荐使用 flex 布局的。

1. 弹性容器：包含着弹性项目的父元素。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。
2. 弹性项目(Flex item)：弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆 成匿名弹性项目。也可以称为子容器。
3. 轴(Axis)：每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。
4. 方向(Direction)：可以通过 flex-direction 来确定主轴和侧轴的方向。

属性用法截图

更换主轴和侧轴方向

不常用

主轴默认的方向是从左到右，侧轴的方向默认是从上到下，当然也可以进行修改。可以通过 flexdirection 进行修改。

换行

不常用，warp有时会用到

默认情况下，元素个数如果超过一定数量，那么在一行当中就排列不下。此时 flex 默认的处理方式是压缩元素，使其能在一行中排列下来。

可以通过 flex-wrap 来改变排列的方式。可以设置的属性如下：

align-content属性

在排列中，如果有多行，那么这个属性是设置多行之间的排列方式。也就是想用的前提是多行。

元素（子容器）的相关属性

上面的属性都是在父元素上的，之一部分看子元素。

flex-basis

auto 当前元素存在尺寸就按照尺寸；

0 当前元素不管有没有尺寸，尺寸都不起作用

flex-grow

数值：当前元素的显示比例

设置元素是否需要扩大的比例。默认值为0，即如果存在剩余空间，也不放大。比如有以下代码：

.outter{
display: flex;
width: 300px;
height: 300px;
flex-wrap: wrap;
background: pink;
}
.outter .inner{
background: gray;
width: 100px;
height: 100px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.outter .inner1{
flex-grow: 2;
}
.outter .inner2{
flex-grow: 1;
}

flex-shrink

1 空间不足时进行缩放

0 不进行缩放

flex属性

flex-grow flex-shrink flex-basis 三个属性的简写。假设以上三个属性同样取默认值， 则 flex 的默认值是 0，1 ，auto。