在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5/ 這種flex布局要怎么寫

這種flex布局要怎么寫

我想用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

回答
編輯回答
蟲児飛

flex布局解決方案：

在外部盒子display屬性設(shè)置為flex，然后在需要空開的兩個元素中間加入一個空白元素，并設(shè)置css屬性flex: 1 1 auto自動填充空白。flex的優(yōu)點(diǎn)就是盒子內(nèi)的元素不會浮動，切間隔是動態(tài)的，可適應(yīng)各種寬度。

$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>
2017年7月8日 17:54
編輯回答
耍太極

justify-content:space-between;

2017年1月11日 00:20
編輯回答
心上人

justify-content:space-between;
這個應(yīng)該就行了，剩下的就是你里面的位置調(diào)整了......

2017年3月2日 11:44
編輯回答
兮顏

為什么這么別扭的布局呢，改成下面

<!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>

圖片描述

2017年3月29日 16:03
編輯回答
情已空
li div{
    flex:1;
}
li div:nth-child(2){
    text-align: right;
}
2017年7月21日 20:23
編輯回答
裸橙
{
 display: flex;
 justify-content: space-between; 
}
2017年2月2日 03:57