伊朗最新消息紹興seo計(jì)費(fèi)管理
案例目標(biāo)
文字部分自適應(yīng)并且居中
圖中是一個(gè)彈窗，我現(xiàn)在使用flex的布局來實(shí)現(xiàn)，標(biāo)題和關(guān)閉按鈕。因?yàn)槭莡ni-app,所以標(biāo)簽是view 。你可以自行替換為
代碼
<view class="popup-box"><view class="title"><view class="text">報(bào)案成功</view><image style="width: 32rpx;" mode="widthFix" src="close-icon.png"></image> </view>
</view>
.popup-box{width: 80vw;margin: 0 auto;.title{display: flex;justify-content: space-between;align-items: center;.text{text-align: center;flex: auto;}}
}
實(shí)現(xiàn)效果如下：
總結(jié)
這里的title 文字部分是自適應(yīng)剩余寬度的。想要自適應(yīng)剩余寬度的話，需要滿足以下條件：
- 父級dispalay : flex;
- 其中一個(gè)子級的寬度或者高度為固定。
- 另外一個(gè)子級的 flex: auto;
案例二：子級寬度超過父級
<!DOCTYPE html>
<html>
<head><style>.parent {display: flex;flex-direction: row;width: 500px; /* 可以根據(jù)需要設(shè)置父級div的寬度 */height: 200px;background-color: lightgray;}.child1 {width: 100px;flex-shrink: 0;/*防止第二個(gè)子div的內(nèi)容超出了父級div的寬度，其在空間不足時(shí)縮小*/background-color: red;}.child2 {flex-grow: 1;background-color: blue;}</style>
</head>
<body><div class="parent"><div class="child1"></div><div class="child2">很多漢字》很多漢字》很多漢字》很多漢字》很多漢字》很多漢字》很多漢字》很多漢字》很多漢字》很多漢字》很多漢字》很多漢字》很多漢字》</div></div>
</body>
</html>當(dāng)?shù)诙€(gè)子div的內(nèi)容超出了父級div的寬度時(shí)，父級div的剩余空間將被第二個(gè)子div占據(jù)，導(dǎo)致第一個(gè)子div的寬度變小。
此時(shí)要將第一個(gè)子div的flex-shrink屬性設(shè)置為0，可以防止其縮小。
.child1 {flex-shrink: 0;/*防止第二個(gè)子div的內(nèi)容超出了父級div的寬度，其在空間不足時(shí)縮小*/}