當(dāng)前位置:首頁(yè) >  IDC >  服務(wù)器 >  正文

CSS 水平居中并限定最大的寬度實(shí)現(xiàn)

 2020-10-15 11:37  來(lái)源: 腳本之家   我來(lái)投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過(guò)

這篇文章主要介紹了CSS 水平居中并限定最大的寬度實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一個(gè) CSS 布局和樣式的問(wèn)題,如何在水平居中和限制最大寬度中,進(jìn)行平衡

在最近工作中,遇到一個(gè)這樣的問(wèn)題:

1. 背景

•水平三欄或者兩欄的布局,其中一欄內(nèi)的內(nèi)容是變動(dòng)的;

•當(dāng)內(nèi)容過(guò)少時(shí),整體需要居中展示;

•當(dāng)內(nèi)容過(guò)多時(shí),需要根據(jù)最大的寬度進(jìn)行省略;

2. 實(shí)現(xiàn)的思路

整體的容器要添加屬性:

.container {
display: flex;
justify-content: center;
}

2.1 使用 flex:1 來(lái)實(shí)現(xiàn)

之前的代碼里,把變動(dòng)的那一欄設(shè)置為 flex: 1 或者 flex: auto ,但這樣存在的問(wèn)題是,這塊會(huì)把容器剩余的所有空間都占滿,而不會(huì)根據(jù)內(nèi)容自動(dòng)調(diào)整;

2.2 設(shè)置 flex: none 來(lái)實(shí)現(xiàn)

這個(gè)存在的問(wèn)題是,當(dāng)內(nèi)容過(guò)多時(shí),不會(huì)蓋住過(guò)多的內(nèi)容

2.3 不設(shè)置屬性

中間內(nèi)容不固定的,則不設(shè)置任何 flex 屬性,如果已經(jīng)設(shè)置了不夠,記得重新覆蓋掉:

.clamp {
flex: initial;
}

注意,這里使用的是 initial ,而不是 none。

同時(shí)還要注意,其他欄的寬度不要被擠壓。我們左側(cè)這一欄本來(lái)是放著一個(gè)圖片,有設(shè)置寬度,但還是因?yàn)橹虚g這一欄的內(nèi)容過(guò)多,導(dǎo)致圖片被壓縮變形。所以,圖片這里添加了一個(gè) min-width 的屬性。

文章來(lái)源:腳本之家,原文鏈接:https://www.jb51.net/css/745015.html

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)標(biāo)簽
CSS水平居中寬度
水平居中

相關(guān)文章

熱門排行

信息推薦