zoukankan      html  css  js  c++  java
  • 【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;
      }
      
    • 界面

  • 相关阅读:
    程序员追求的是什么?
    jQuery弹出层始终垂直居中,相对于屏幕,相对于当前窗口
    在VMware上制作一个简单的Linux
    Nginx 反向代理+Varnish 技术
    在做微信分享到朋友圈时,手机扫码报config:invalid signature,分享后后正常的问题,是url问题...
    phpStudy本地环境测试,打开网页很慢的解决办法!
    windows上安装redis并安装php5.6的redis扩展
    Redis 安装
    redis 查看的版本
    who is 规格严格
  • 原文地址:https://www.cnblogs.com/musecho/p/14590253.html
Copyright © 2011-2022 走看看