CSS 水平居中并限定最大的寬度實現(xiàn)
我要評論一個 CSS 布局和樣式的問題，如何在水平居中和限制最大寬度中，進(jìn)行平衡
在最近工作中，遇到一個這樣的問題：
1. 背景
- 水平三欄或者兩欄的布局，其中一欄內(nèi)的內(nèi)容是變動的；
- 當(dāng)內(nèi)容過少時，整體需要居中展示；
- 當(dāng)內(nèi)容過多時，需要根據(jù)最大的寬度進(jìn)行省略；
2. 實現(xiàn)的思路
整體的容器要添加屬性：
.container {
display: flex;
justify-content: center;
}
2.1 使用 flex:1 來實現(xiàn)
之前的代碼里，把變動的那一欄設(shè)置為 flex: 1 或者 flex: auto ，但這樣存在的問題是，這塊會把容器剩余的所有空間都占滿，而不會根據(jù)內(nèi)容自動調(diào)整；
2.2 設(shè)置 flex: none 來實現(xiàn)
這個存在的問題是，當(dāng)內(nèi)容過多時，不會蓋住過多的內(nèi)容
2.3 不設(shè)置屬性
中間內(nèi)容不固定的，則不設(shè)置任何 flex 屬性，如果已經(jīng)設(shè)置了不夠，記得重新覆蓋掉：
.clamp {
flex: initial;
}
注意，這里使用的是 initial ，而不是 none。
同時還要注意，其他欄的寬度不要被擠壓。我們左側(cè)這一欄本來是放著一個圖片，有設(shè)置寬度，但還是因為中間這一欄的內(nèi)容過多，導(dǎo)致圖片被壓縮變形。所以，圖片這里添加了一個 min-width 的屬性。
到此這篇關(guān)于CSS 水平居中并限定最大的寬度實現(xiàn)的文章就介紹到這了,更多相關(guān)CSS 水平居中限定最大寬度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了使用CSS實現(xiàn)盒子水平垂直居中的方法(8種)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來2020-11-11- 這篇文章主要介紹了CSS實現(xiàn)子元素div水平垂直居中的示例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起2020-09-03
CSS中的translate(-50%,-50%)實現(xiàn)水平垂直居中效果
這篇文章主要介紹了CSS中的translate(-50%,-50%)實現(xiàn)水平垂直居中效果,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以2020-09-02css3 flex實現(xiàn)div內(nèi)容水平垂直居中的幾種方法
這篇文章主要介紹了css3 flex實現(xiàn)div內(nèi)容水平垂直居中的幾種方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小2020-03-27- 這篇文章主要介紹了CSS3 不定高寬垂直水平居中的幾種方式,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起2020-03-26
CSS3實現(xiàn)水平居中、垂直居中、水平垂直居中的實例代碼
在前端面試中經(jīng)常會遇到css居中效果的實現(xiàn)，今天小編給大家分享幾種css垂直水平居中的方法，通過實例代碼給大家講解，需要的朋友參考下吧2020-02-27
手把手教你CSS水平、垂直居中的10種方式(小結(jié))
這篇文章主要介紹了手把手教你CSS水平、垂直居中的10種方式(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著2019-11-07
如何讓子元素在父容器中水平垂直居中呢，下面我們來列舉幾種常見的方法，通過真實場景分析給大家詳解web前端之css水平居中代碼解析，感興趣的朋友跟隨小編一起看看吧2021-05-20
