弹性盒子和定位

1.  图片演示：

   

  wxml：

<view class="search">
  <view class="sear_left">
    <text>{{city}}</text>
    <text class="icon iconfont2 icon-xiangxia"></text>
  </view>
  <view class="sear_right">
    <input type="text" placeholder="请输入商家的名称" />
    <text class="icon iconfont2 icon-sousuo"></text>
  </view>
</view>

css：

.search{
  display: flex;
  font-size: 28rpx;
}
.search .sear_left{
  flex: 1;
  display: flex;
  align-items: center;
}
.search .sear_right{
  flex: 5;
  position: relative;
}
.sear_right input{
  background-color: #f4f4f4;
  border-radius: 20px;
  padding-left: 30px;
}
.sear_right .icon-sousuo{
  position: absolute;
  top: 6px;
  left: 10px;
}

2. 图片演示（阿里前端面试题：使用Flexbox实现下图效果，补充CSS代码）

    <div class="Aligner">
        <div class="Aligner-item Aligner-item-top">Top</div>
        <div class="Aligner-item">Centered</div>
        <div class="Aligner-item Aligner-item-bottom">Bottom</div>
    </div>

 

.Aligner{
    display: flex;
    align-items: center;
    width: 600px;
    height: 300px;
    background-color: #F3F2F0;
}
.Aligner-item {
    flex: 1;
    background-color: #EBE6E3;
    padding-left: 10px;
    font-size: 16px;
    font-weight: bold;
    line-height: 50px;
    height: 50px;
}
.Aligner-item-top{
    margin: 10px 0 0 10px;
    align-self: flex-start;
}
.Aligner-item-bottom{
    margin: 0 10px 10px 0;
    align-self: flex-end;
}

补充：align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}