flex笔记

Flex 布局教程：语法篇

• flex: 1

根据空间填充

.weui-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.weui-flex__item {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
}

• 上下居中

  align-items: center;

微信小程序例子：

test.wxml

<view class="container">
    <view class="item">
    this is item
    </view>
</view>

test.wxss

.container {
    display: flex;
    background: grey;
    align-items: center;
    height: 300rpx;
}

.item {
    height: 100rpx;
    background: orange;
}

• 左右填充整个空间

  .item {
  flex: 1;
  background: orange;
  }

• 元素左右居中对齐

  justify-content: center;