css——flex布局

1、html元素分为块级元素、行内元素、行内块元素

display: block/line/line-block;

每个块级元素独占一行，可以设置块级元素的宽高；
每个行内元素不独占一行，且不可以设置元素的宽高，只能靠内容撑起来；
行内块元素即结合了块级元素以及行内元素的特点，即不占一行，又可以设置宽高；

2、flex布局极其适合小程序的样式实现，flex布局能够实现指定容器内的样式布局方式，所以使用flex样式布局时先定义一个container容器，对其中的子元素进行flex样式布局的实现

display: flex; flex-direction: row; // 实现container容器内的元素行排列
display: flex; flex-direction: column; // 实现container容器内的元素列排列

注意，若容器设置为flex弹性盒子模型，则子元素默认变成行内块元素，且用display: block;进行强行改变为块级元素也无效，只能用flex-direction: column;让其子元素实现列排布

3、flex-direction属性有4个最常用取值：

1）row：实现行排列
2）column：实现列排列
3）row-reverse：实现行排列，但是是倒序排列；注意对齐方向也是与正常相反的，1）是居左，而这里就是居右
4）column-reverse：实现列排列，但是是倒序排列；注意对齐方向也是与正常相反的，2）是置顶，而这里就是置底

注意：
3）4）的居左居右以及置顶置底都是在container容器里面的，也就是说如果容器高度等于几个元素的总高度，那么置顶跟置底效果一样

4、view元素如果不设置它的宽高的话，则宽默认是100%的，而高则是自适应的，即自适应容器内子元素的总高度

5、justify-content: flex-start/flex-end; 置左/右/上/下；且在有无row-reverse/column-reverse用法相反，可以理解为-reverse就是与常规相反的意思
1）实现效果：正序行排布，置左

display: flex; 
flex-direction: row; 
justify-content: flex-start; （这一句加与不加效果一样，因为row默认就是正序行排布，置左）

2）实现效果：正序列排布，置顶

display: flex; 
flex-direction: column; 
justify-content: flex-start; （这一句加与不加效果一样，因为row默认就是正序列排布，置顶）

3）实现效果：逆序行排布，置左

display: flex; 
flex-direction: row; 
justify-content: flex-end;

4）实现效果：逆序行排布，置顶

display: flex; 
flex-direction: column; 
justify-content: flex-end;

总结：
start按正常理解来说就是实现置左/置顶，而end是置右/置底，但可以理解为row-reverse/column-reverse就是反的意思，变成了row/column的反：逆序排列，且置右/底；用justify-content来实现其置左/置底，属性值也反了，变成end是左和顶，start是右和底

6、

justify-content: flex-start/flex-end; // 见5、
justify-content: center; // 元素整体居中
justify-content: space-between; // 平均分布，左右元素置左/右
justify-content: space-around; // 等距分布，每个元素两侧的距离相等

7、justify-content与align-items，主轴与交叉轴

1） justify-content设置主轴方向的对齐情况，align-items设置交叉轴方向的对齐情况
2） 当flex-direction值是row，即行排列时，则主轴是行方向，交叉轴是列方向
    当flex-direction值是column，即列排列时，则主轴是列方向，交叉轴是行方向
3） justify-content: center/flex-start/flex-end; // 实现交叉轴方向的居中，置左/右等
    align-items: center/flex-start/flex-end; // 实现主轴轴方向的居中，置左/右等

注意：
1）row-reverse/column-reverse不会导致主轴跟交叉轴的取反，但从左到右或从右到左的方向仍然是会相反的，所有此时start/end仍会相反
但不用硬记，在实现时无非就是对几个值进行尝试
2）通过设置justify-content与align-items值，即元素在主轴与交叉轴方向上的排布情况，
可以实现元素在九宫格的任意一格位置

8、
1）.wxml：

<view class="container">
    <view class="v1">1</view>
    <view class="v2">2</view>
    <view class="v3">3</view>
</view>

2）.wxss

.container {
    background-color:cadetblue;
    display: flex;
    flex-direction: row;
}

.v1 {
    background-color: #999;
}

.v2 {
    background-color: #333;
}

.v3 {
    background-color: #666;
}

1）由于container容器设置成了flex布局，所以container里的子元素v1、v2、v3,变成了行内块元素，
因此若不设置它们的宽高，则v1、v2、v3的宽高都是自适应的，即由内容区撑起来

2）设置align-items: stretch; 可以使得子元素在主轴方向的长度与container一致，而不是自适应，相当于拉伸开来，
但交叉轴方向实现不了拉伸效果

9、

flex-wrap: nowrap; // 默认值，即行分布或者列分布，如果子元素总宽度超过了屏幕宽度，那么也不会换行，而是把屏幕总宽给均分掉
flex-wrap: wrap; // 当总宽超过屏幕宽度时会换行，但是换行出来的元素在剩余空间是列方向居中的，可以将总宽给减少掉一实现紧贴换行

本文为自己学习过程中的整理，若有不足或错误，欢迎批评指正！