【CSS】彈性盒子 display：flex和justify-content：center和align-items：center一起使用的問題

【CSS】彈性盒子 display：flex和justify-content：center和align-items：center一起使用的問題

1.例子一：搜索框

• 使用<view>和<navigator>實現搜索框

• wxml

  <view class="search_input">
      <navigator url="/pages/search/index" open-type="navigate">
          <text>搜索</text>
      </navigator>
  </view>
  

• wxss

  說明：

  display:flex;使navigator成為彈性容器，容器內所有下級項目成為彈性項目。這里的彈性項目是<text>。

  justify-content:center;彈性項目 水平居中（使<text>水平居中）

  align-items:center;彈性項目 垂直居中

  .search_input{
      height:75rpx;
      padding:10rpx;
      background-color:var(--themeColor);
  }
  
  .search_input navigator{
      height:100%;
      display:flex; /*響應式 彈性盒子*/
      justify-content:center; /*彈性項目 水平居中*/
      align-items:center;/*彈性項目 垂直居中*/
      background-color:#fff;
      border-radius: 15rpx;/*圓角弧度*/
      
  }
  
  .search_input navigator text{
      color:rgb(165, 162, 162);/*字體顏色*/
  }
  

• 界面

  

2.例子二：帶有下划線的tab欄

• 使用<view>和wx:for內容渲染，實現tab欄

• wxml

  <view class="tabs_title">
       <view 
          wx:for="{{tabs}}"
          wx:key="id"
          class="title_item {{item.isActive?'active':''}}"
       >
          {{item.name}}
       </view>
  </view>
  

• wxss

  說明：

  （1）如何實現兩個選項並列平分一行

  view是塊級元素，兩個view原本應該占兩行。

  .tabs_title中的display: flex;使<view class="tabs_title">成為彈性容器。

  .title_item中的flex: 1;使得彈性容器下的項目平分占用空間

  （2）如何實現選項內的文字居中

  .title_item中的display: flex;使得<view .. class="title_item ..">成為彈性容器，則里面內容{{item.name}}成為彈性項目。

  .title_item中的justify-content: center;和align-items: center;使得文字內容水平居中、垂直居中

  .tabs_title {
      display: flex;
      padding:10rpx 0;
     
  }
  
  .title_item {
      color:#666;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .active{
      color:black;
      border-bottom: 5rpx solid currentColor;
  }
  

• 界面