问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

这种flex布局要怎么写

头像
dblose
    24975189

    我想用flex布局把余额、钱往右边靠这样要怎么写
    clipboard.png
    html

    <div class="dataList" style="background: #E9E9E9" v-for="(data, index) in unavailableData" :key="data.voucherId">
    <ul>
      <li>
        <div class="userInfo">
          <span>打车券-</span>
          <span>{{data.voucherReturnCode ? '个人' : '公共'}}</span>
        </div>
        <div class="dataTime">
          {{data.voucherReturnCode ? '余额' : '有效期至'}}
        </div>
      </li>
      <li :class="{'fontBase' : data.voucherReturnCode}">
        <div class="numOrResc">
          {{data.voucherReturnCode ? data.voucherReturnCode : data.voucherResc}}
        </div>
        <div class="voucherBalance" v-if="data.voucherReturnCode">
          {{data.voucherBalance}}元
        </div>
      </li>
    </ul>
  </div>

    less

    .dataList{
    box-sizing: border-box;
    box-shadow: 0 2px 4px 0 #E7E7E7;
    border-radius: 2px;
    height: 78px;
    padding: 0 15px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    li {
      display: flex;
      justify-content:space-between;
      list-style-type: none;
      font-size: 12px;
      &:nth-of-type(1) {
        color: #666666;
        font-size: 12px;
      }
      &:nth-of-type(2) {
        font-size: 16px;
        color: #344663;
      }
    }
    .fontBase {
      font-size: 16px !important;
    }
 }

    最终的效果是这样的

    clipboard.png

    css3
    阅读 4.1k
    6 个回答
    得票最新
    头像
    zhangl
      430612

      为什么这么别扭的布局呢，改成下面

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .list{
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <div>
    <ul class="list">
      <li>
        <div>
          <span>打车券-</span>
          <span>个人</span>
        </div>
        <div>
          1111111111111
        </div>
      </li>
      <li>
        <div>
          余额
        </div>
        <div>
          100元
        </div>
      </li>
    </ul>
  </div>
    
</body>
</html>

      图片描述

      头像
      陌路凡歌
        7.9k21119
        li div{
    flex:1;
}
li div:nth-child(2){
    text-align: right;
}
        头像
        fuqihan
          1.1k1315

          justify-content:space-between;
          这个应该就行了，剩下的就是你里面的位置调整了......

          头像
          Donle
            1.4k1113

            flex布局解决方案：

            在外部盒子display属性设置为flex，然后在需要空开的两个元素中间加入一个空白元素，并设置css属性flex: 1 1 auto自动填充空白。flex的优点就是盒子内的元素不会浮动，切间隔是动态的，可适应各种宽度。

            $color_1: #666;
$color_2: #344663;

.dataList {
    >ul {
        display: flex;
        width: 100%;
        >li.spacer {
            flex: 1 1 auto;
        }
    }
    box-sizing: border-box;
    box-shadow: 0 2px 4px 0 #e7e7e7;
    border-radius: 2px;
    height: 78px;
    padding: 0 15px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    li {
        list-style-type: none;
        font-size: 12px;
        &:nth-of-type(1) {
            color: $color_1;
            font-size: 12px;
        }
        &:nth-of-type(2) {
            font-size: 16px;
            color: $color_2;
        }
    }
    .fontBase {
        font-size: 16px !important;
    }
}
            <div class="dataList" style="background: #E9E9E9" v-for="(data, index) in unavailableData" :key="data.voucherId">
    <ul>
        <li class="left-align">
            <div class="userInfo">
                <span>打车券-</span>
                <span>{{data.voucherReturnCode ? '个人' : '公共'}}</span>
            </div>
            <div class="dataTime">
                {{data.voucherReturnCode ? '余额' : '有效期至'}}
            </div>
        </li>
        <li class="spacer"></li>
        <li :class="{'fontBase' : data.voucherReturnCode}" class="right-align">
            <div class="numOrResc">
                {{data.voucherReturnCode ? data.voucherReturnCode : data.voucherResc}}
            </div>
            <div class="voucherBalance" v-if="data.voucherReturnCode">
                {{data.voucherBalance}}元
            </div>
        </li>
    </ul>
</div>
            头像
            xujkstra
              88147
              {
 display: flex;
 justify-content: space-between; 
}
              头像
              猿深不知处
                193

                justify-content:space-between;

                查看全部 6 个回答
                推荐问题