02 Flex布局

本项目为样例DEMO，项目地址：https://github.com/Jack-WangZhe/Young-Blood-Competition-Mini-Program

一.block、inline与inline-block

1.display属性值

• view类似于html中的div，是块级元素display: block
• 如果我们添加css属性设置view的样式变成行级元素时即display:inline时会发现view的元素消失了，因为**行级元素默认不含有宽和高(设置了属性也不生效) **
• 如果想将块级元素变成行级元素，还想让行级元素具有宽和高则将display属性值设置为inline-block即可

2.实例代码

• classic.wxss

  .chunk {
    /* 行内元素默认不能设置高河宽 */
    display: inline-block;
    width: 100px;
    height: 100px;
  }
  
  .color1 {
    background-color: brown;
  }
  .color2 {
    background-color: aqua;
  }
  .color3 {
    background-color: blue;
  }
  

• classic.wxml

  <view class="chunk color1"/>
  <view class="chunk color2"/>
  <view class="chunk color3"/>
  

• 效果：三个一行的100*100的色块

二.flex弹性盒子

1.display属性和flex-direction属性

• 如果想将一个容器设置为弹性盒子容器，即可以在容器上添加display:flex属性，此时该容器即变成弹性盒子容器

• 当一个弹性盒子内部包含块级元素时，块级元素的特性就无效了，即使强加了block属性值也同样无效

• 如果想设置盒子中的子元素垂直或水平排列，则可以通过在盒子元素上设置flex-direction: column / row属性以实现。flex-direction的常用取值如下:

  • column垂直排布
  • row水平排布
  • column-reverse垂直内部元素倒序排布
  • row-reverse水平内部元素倒序排布
  • 注意：我们可以发现当水平倒序排布时，内部元素居右，左侧会有一部分空白；当垂直排布时，内部元素居上，不会有多余空白。因为当水平排布时，width:100%，元素居右左侧则被空出来了，如果左侧不想为空，则设置容器宽即可；当垂直排布时，高度是自适应的，倒序自然也不会有空余

2.justify-content属性

• justify-content属性主要用来控制flex-item的排布方向

• flex-start和flex-end

  • flex-start当垂直排布时为上方，水平排布时为左侧
  • flex-end当垂直排布时为下方，水平排布时为右侧

• center: 子元素居中

• space-between: 最左侧元素靠左对齐，最右侧元素靠右对齐，其他元素等距对齐

• space-around: 等距分布，每一个flex item两侧的空位均相等

3.主轴和交叉轴

• align-items是控制交叉轴对齐排布的属性，属性值有flex-start/flex-end/center/baseline/stretch

• flex-direction取column/column-reverse时是垂直排布，即主轴就是垂直方向，交叉轴就是水平方向，通过justify-content控制主轴的排布，通过align-items控制交叉轴的排布

• flex-direction取row/row-reverse时是水平排布，即主轴就是水平方向，交叉轴就是垂直方向，通过justify-content控制主轴的排布，通过align-items控制交叉轴的排布

• 如果flex-direction是column，主轴是垂直方向，主轴方向是自上至下；column-reverse时，主轴是垂直方向，主轴方向是自下至上；row时，主轴是水平方向，主轴方向是自左至右；row-reverse时，主轴是水平方向，主轴方向是自右至左

4.align-items的stretch与baseline属性值

• 当没有设置子元素高度（子元素高度自适应）时，设置容器的align-items:stretch表示子元素拉伸，子元素的高会拉伸到容器高度【交叉轴拉伸】
• baseline基线对齐，如果设置容器align-items:baseline表示子元素基线(内部文字基线【以第一个子元素的内部文字底线为标准】)对齐

5.flex-wrap属性与消除间距

• 如果容器设置为flex布局，且每一个子元素的宽度相加之后超过容器的宽度时，flex布局会自动将子元素均分且不会换行
• 通过给容器设置flex-wrap属性可以保证内部元素是否换行，nowrap时表示不换行，wrap时表示换行
• 当子元素换行后，可以发现换行的元素在交叉轴方向居中排布，原因是因为当前容器高度不是两个子元素高度之和，换行后高度减去子元素高度进行均分，从而导致第二行的元素上下都会有留白，我们可以通过设置容器高度为两个元素高度的方式保证换行后的元素依旧是紧贴第一行的