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

這篇文章主要為大家展示了CSS怎么實(shí)現(xiàn)水平居中并限定最大的寬度，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來(lái)研究并學(xué)習(xí)一下“CSS怎么實(shí)現(xiàn)水平居中并限定最大的寬度”這篇文章吧。

一個(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 的屬性。

以上就是關(guān)于“CSS怎么實(shí)現(xiàn)水平居中并限定最大的寬度”的內(nèi)容，如果改文章對(duì)你有所幫助并覺得寫得不錯(cuò)，勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí)，若想了解更多相關(guān)知識(shí)內(nèi)容，請(qǐng)多多關(guān)注億速云行業(yè)資訊頻道。