固定寬度300px
自適應(yīng)寬度
資訊專欄INFORMATION COLUMN
摘要：廢話不多說內(nèi)容寬度等分左右布局，一側(cè)定寬，一側(cè)自適應(yīng)撐滿固定寬度自適應(yīng)寬度未知高寬上下左右居中未知高度上下左右居中這個效果就不展示了，可以做到未知寬高，和已知寬未知高的居中效果。
廢話不多說！
flex-內(nèi)容寬度等分//css
.box {
display: flex;
}
.box div {
flex: 1;
border: 1px solid red;
}
//html
1
2
3
左右布局，一側(cè)定寬，一側(cè)自適應(yīng)撐滿
//css
html,
body {
height: 100%
}
.main {
display: flex;
height: 100%;
}
.left,
.right {
height: 100%;
border: 1px solid red;
box-sizing: border-box;
}
.left {
width: 300px;
}
.right {
width: 100%;
}
//html
固定寬度300px
自適應(yīng)寬度
未知高寬上下左右居中
//css
html,
body {
height: 100%
}
.main {
display: flex;
height: 100%;
justify-content: center;
align-items: center
}
.box {
width: 300px;
border: 1px solid red;
}
//html
未知高度上下左右居中
這個效果就不展示了，可以做到未知寬高，和已知寬未知高的居中效果。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53644.html
摘要：廢話不多說內(nèi)容寬度等分左右布局，一側(cè)定寬，一側(cè)自適應(yīng)撐滿固定寬度自適應(yīng)寬度未知高寬上下左右居中未知高度上下左右居中這個效果就不展示了，可以做到未知寬高，和已知寬未知高的居中效果。 廢話不多說！ flex-內(nèi)容寬度等分 //css .box { display: flex; } .box div { ...
摘要：常見面試題實現(xiàn)垂直水平居中前言面試中常常被問到，如何使用來實現(xiàn)一個元素的垂直水平方向上居中，特別是筆試題的時候，這道題目的出現(xiàn)頻率還是比較高的，當然，在我們的生活中，也常常會有垂直水平居中的需求。 常見面試題—css實現(xiàn)垂直水平居中 前言 面試中常常被問到，如何使用css來實現(xiàn)一個元素的垂直水平方向上居中，特別是筆試題的時候，這道題目的出現(xiàn)頻率還是比較高的，當然，在我們的生活中，也常常...
摘要：個人總結(jié)的一些常見面試題歡迎各位同時非常歡迎貢獻問題一起來完善不定期更新常見前端面試題總結(jié) 個人總結(jié)的一些常見面試題,歡迎各位star,issues,同時非常歡迎貢獻問題!一起來完善.不定期更新常見前端面試題總結(jié)
摘要：瀏覽器內(nèi)核常用的塊元素和內(nèi)聯(lián)元素數(shù)據(jù)類型語句前端優(yōu)化方法會話跟蹤方法和區(qū)別循環(huán)輸出網(wǎng)站優(yōu)化清除浮動方法，優(yōu)缺點和區(qū)別截取長文本寫方法截取字符串響應(yīng)式布局瀏覽器兼容正則表達式驗證身份證源碼自己如何封裝一個固定一個按鈕在右下角畫一個三角形同步和 1、瀏覽器內(nèi)核2、常用的塊元素和內(nèi)聯(lián)元素3、數(shù)據(jù)類型 *4、SQL語句5、前端優(yōu)化方法 *6、會話跟蹤方法 *7、display ： none 和...
閱讀 2844·2021-11-19 11:35
閱讀 2591·2021-11-02 14:40
閱讀 1412·2021-09-04 16:48
閱讀 3018·2019-08-30 15:55
閱讀 1773·2019-08-30 13:11
閱讀 1965·2019-08-29 11:12
閱讀 1100·2019-08-27 10:52
閱讀 3169·2019-08-26 18:36
