這篇文章主要介紹了CSS 水平居中并限定最大的寬度實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
一個(gè) CSS 布局和樣式的問題，如何在水平居中和限制最大寬度中，進(jìn)行平衡
在最近工作中，遇到一個(gè)這樣的問題：
1. 背景
•水平三欄或者兩欄的布局，其中一欄內(nèi)的內(nèi)容是變動(dòng)的；
•當(dāng)內(nèi)容過少時(shí)，整體需要居中展示；
•當(dāng)內(nèi)容過多時(shí)，需要根據(jù)最大的寬度進(jìn)行省略；
2. 實(shí)現(xiàn)的思路
整體的容器要添加屬性：
.container {
display: flex;
justify-content: center;
}
2.1 使用 flex:1 來實(shí)現(xiàn)
之前的代碼里，把變動(dòng)的那一欄設(shè)置為 flex: 1 或者 flex: auto ，但這樣存在的問題是，這塊會(huì)把容器剩余的所有空間都占滿，而不會(huì)根據(jù)內(nèi)容自動(dòng)調(diào)整；
2.2 設(shè)置 flex: none 來實(shí)現(xiàn)
這個(gè)存在的問題是，當(dāng)內(nèi)容過多時(shí)，不會(huì)蓋住過多的內(nèi)容
2.3 不設(shè)置屬性
中間內(nèi)容不固定的，則不設(shè)置任何 flex 屬性，如果已經(jīng)設(shè)置了不夠，記得重新覆蓋掉：
.clamp {
flex: initial;
}
注意，這里使用的是 initial ，而不是 none。
同時(shí)還要注意，其他欄的寬度不要被擠壓。我們左側(cè)這一欄本來是放著一個(gè)圖片，有設(shè)置寬度，但還是因?yàn)橹虚g這一欄的內(nèi)容過多，導(dǎo)致圖片被壓縮變形。所以，圖片這里添加了一個(gè) min-width 的屬性。
文章來源：腳本之家，原文鏈接：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ī)遇！
