wx小程序 - 盒子布局 学习总结

（一）display: flex布局

参考链接：flex布局之flex-direction

一、flex布局的原理

1. flex是”flexible Box”的缩写，意为”弹性布局”；
2. 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将会失效。
3. 设置方式：display: flex;

言而简之：flex布局原理就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

二、flex布局-父项常见属性

（1）flex-direction:设置主轴的方向，即<view></view>or<div></div>等盒子排列的方式

属性	说明
flex-direction: row	默认值从左到右
flex-direction: row-reverse	从右到左
flex-direction: column	从上到下
flex-direction: column-reverse	从下到上

这里需要明白，row表示坐标系x为主轴
column表示坐标系y为主轴

（2）【row 排列】justify-content:设置盒子的水平对齐方式

• justify-content 属性在 flex-direction 为row或row-reverse时使用的情况
• justify-content 仅用于flex布局

属性	说明	图片
justify-content: flex-start	默认值：向左对齐
justify-content: flex-end	向右对齐
justify-content: center	水平居中，中间的没有缝隙
justify-content: space-between	平均分布，但左右抵拢
justify-content: space-around	平均分布，左右不抵拢。项目以相等的间距定位，但与角落的间距不同
justify-content: space-evenly	平均分布，左右不抵拢。所有间距相等！
justify-content: initial	根据默认值放置项目
justify-content: inherit	继承父元素

（3）【row 排列】align-content （多行） 与 align-items（单行）:设置盒子的垂直排列方式

• align-content 与 align-items 仅用于flex布局
  
  align-content 在单行时无效，所以单行时使用：align-items
  多行时align-content:
  

多行是align-items:

（4）【column 排列】justify-content:设置盒子的水平对齐方式

和（2）相反，主轴颠倒，垂直水平对齐更换使用即可。

（5）【column 排列】align-content （多行） 与 align-items（单行）:设置盒子的垂直排列方式

和（3）相反，主轴颠倒，垂直水平对齐更换使用即可。

（6）代码示例

wxml

<p>---------主轴方向：column--------------------</p>
<!-- father1 是黑色最大盒子 -->
<view class="father1">

<!-- part1 是红色长条盒子 -->
<view class="part1">
<view  class="son1">1-1</view><!--白盒-->
<view  class="son1">1-2</view>
<view  class="son1">1-3</view>
</view>

<!-- part2 是红色长条盒子 -->
<view class="part2">
<view  class="son1">2-1</view>
<view  class="son1">2-2</view>
<view  class="son1">2-3</view>
</view>

</view> 

wxss

/* pages/display/display.wxss */
.father1{
    display: flex;
    
    /* 表示part盒子从上往下排列 */
    flex-direction: column;   
   
   /* 在上下方向 part12盒子进行平分 上下不抵拢 */
    justify-content: space-around;
    
    /* 在左右方向 盒子水平居中 */
    align-items: center;

    background-color: black;
    width: 600rpx;
    height: 600rpx;
}

.part1{
    display: flex;
    flex-direction: row;   /*表示son盒子从左往右排列*/

    /* 子元素son水平对齐方式 */
    justify-content: space-evenly;
    
    /* 子元素son垂直对齐方式 */
    align-items: center; 


    background-color: rgb(255, 112, 112);
    width: 500rpx;
    height: 100rpx;

}

.part2{
    display: flex;
    flex-direction: row-reverse;   /*表示son盒子从右往左排列*/

    /* 子元素son水平对齐方式 */
    justify-content: space-around;
    /* 子元素son垂直对齐方式 */
    align-items: center; 

    background-color: rgb(255, 112, 112);
    width: 500rpx;
    height: 100rpx;
}
 
.son1{
    /* display: inline-block; */
    display: flex;
    background-color: rgb(255, 255, 255);
    width: 80rpx;
    height: 80rpx;
}

（二）display布局

一、display: block

• 将元素转化为块状元素，高度宽度可以正常执行
• 块状元素一定会独占一行

二、display: inline

• 将元素转化为行内元素，高度宽度不可以正常执行

三、display: inline-block

• 将元素转化为行内元素，高度宽度可以正常执行

水平对齐：

（1）text-align 规定“元素中”的文本的水平对齐方式。

text-align: center | left | right | center | justify

.son2{
    text-align:end;
    display: inline-block;
    
    vertical-align: middle;
    
    background-color: rgb(185, 243, 49);
    width: 130rpx;
    height: 100rpx;
}

（2）align: 规定 div 元素中的内容的水平对齐方式。

这个在wxss中不生效 反而text-align生效了，很奇怪
不知道css中表现如何。

垂直对齐：

（1）vertical-align: middle; 此块元素在该行垂直居中

注意是该行！！行的高度是：本行高度最大盒子的高度

.son2{
    display: inline-block;
    vertical-align: middle;
    background-color: rgb(185, 243, 49);
    width: 100rpx;
    height: 100rpx;
}

.son3{
    display: inline-block;
    vertical-align: middle;
    background-color: rgb(185, 243, 49);
    width: 150rpx;
    height: 200rpx;
}

• 其他值：baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit

默认是baseline