前端/微信小程序 flex布局笔记

前端/微信小程序flex布局笔记

参考学习资料微信小程序官方文档

html/wxml:

<!--flex 布局学习 -->
  <view class="flex-study">
    <view class="item-flex">1</view>
    <view class="item-flex">2</view>
    <view class="item-flex">3</view>
    <view class="item-flex">4</view>
    <!-- <view class="item-flex">5</view>
    <view class="item-flex">6</view>
    <view class="item-flex">7</view>
    <view class="item-flex">8</view> -->
  </view>

css/wxss:

 

/**
  容器属性
*/
.flex-study {
  height: 300rpx;
  width: 100%;
  border: solid 0.5rpx orange;
  display: flex;

  /* flex-direction 设置坐标，用来表示项目的排列方向: row | row-reverse | column | column-reverse */
  flex-direction: raw;

  /* flex-wrap 设置是否允许多行排列，以及多行排列时换行的方向: nowrap | wrap | wrap-reverse */
  flex-wrap: nowrap;


  /* justify-content 项目在(主轴)上对齐方式，以及项目之间周围多余的空间: flex-start | flex-end | space-between | space-around | space-evenly*/
  justify-content: space-around;
  /* align-conent 设置行在(交叉轴)上的对齐方式: flex-start | center | flex-end | space-between | space-around  | space-evenly */
  align-content: space-evenly;


  /* align-items 设置项目在行中的对齐方式: align-items | flex-start | flex-end | center | baseline */
  align-items: center;
}

/**
项目属性
*/
.item-flex {
  width: 100rpx;
  height: 100rpx;
  border: solid 0.5rpx green;
  background: gray;
  text-align: center;
  line-height: 100rpx;

  /* order 项目在主轴方向上的排序，数值越小，排列越靠前。 */
  order: 0;

  /* flex-shrink 项目在主轴上溢出，通过设置项目收缩因子来压缩适应容器,属性值为分负数*/
  /* flex-shrink: 1; */
  /* flex-grow 项目在主轴上还有剩余空间，通过设置扩张因子来进行剩余空间的分配，属性值为非负数 */
  flex-grow: 1;

  /* 如果容器设置flex-direction 为colunn/column-reverse, flex-basis 优先级高于width */
  /* 如果容器设置flex-direction 为row/row-reverse, flex-basis 优先级高于height */
  /* 当flex-basis 和 width/height 其中一个auto，则非auto的优先级更高 */
  flex-basis: auto;

  /* flex 属性， none | auto | @flex-grow @flex-shrink @flex-basis */
  flex: auto;

  /* align-self 项目在行中交叉轴方向上的对齐方式，用于覆盖容器的align-items,默认为auto，集成父容器的align-items属性，
     当容器没有align-items时候，属性值为stretch。可以对某项进行特殊处理
  */
  align-self: auto;

}

.item-flex:nth-child(2) {
  flex-grow: 4;
}