伊朗最新消息紹興seo計費管理
案例目標
文字部分自適應(yīng)并且居中
圖中是一個彈窗，我現(xiàn)在使用flex的布局來實現(xiàn)，標題和關(guān)閉按鈕。因為是uni-app,所以標簽是view 。你可以自行替換為
代碼
<view class="popup-box"><view class="title"><view class="text">報案成功</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;}}
}
實現(xiàn)效果如下：
總結(jié)
這里的title 文字部分是自適應(yīng)剩余寬度的。想要自適應(yīng)剩余寬度的話，需要滿足以下條件：
- 父級dispalay : flex;
- 其中一個子級的寬度或者高度為固定。
- 另外一個子級的 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;/*防止第二個子div的內(nèi)容超出了父級div的寬度，其在空間不足時縮小*/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>當?shù)诙€子div的內(nèi)容超出了父級div的寬度時，父級div的剩余空間將被第二個子div占據(jù)，導(dǎo)致第一個子div的寬度變小。
此時要將第一個子div的flex-shrink屬性設(shè)置為0，可以防止其縮小。
.child1 {flex-shrink: 0;/*防止第二個子div的內(nèi)容超出了父級div的寬度，其在空間不足時縮小*/}