當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

flex实现水平居中和两栏布局

發布時間：2023/12/2 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 flex实现水平居中和两栏布局小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>水平垂直的實現</title><style>.wrapper{width:250px;height:250px;border:1px red solid;}.div1{width:50px;height:50px;border:1px blue solid;}</style> </head> <body><div class="wrapper"><div class="div1"></div>
</div> </body> </html>

上述編碼的結果示意圖如下所示：

采用彈性布局，flex，也就是flexible-box的簡稱，彈性布局只要在父元素上設置display：flex；align-items:center;justify-content:center即可。這也是最簡單的方法了。代碼如下：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>水平垂直的實現</title><style>.wrapper{width:250px;height:250px;border:1px red solid;display:flex;align-items:center;justify-content:center;}.div1{width:50px;height:50px;border:1px blue solid; }</style> </head> <body><div class="wrapper"><div class="div1"></div></div> </body> </html>

效果圖：

flex還有一個常用的功能，就是實現兩欄布局，左邊為固定寬度，右邊自適應。代碼如下：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>前端開發面試題</title><link href="StyleSheet1.css" rel="stylesheet" /> </head> <body><div class="wrapper wrapper-flex"><div class="left">左側欄，固定寬度200px</div><div class="right">右側欄，寬度自適應,自適應的意思是加幾個字就有多少的寬度</div></div> </body> </html>

.wrapper{border:1px solid red;padding:10px 20px; }.left{width:300px;border:1px solid blue; } .right{border:1px solid blue;margin-left:300px;}.wrapper-flex{display:flex;align-items:flex-start; } .wrapper-flex .left{flex:0 0 auto; } .wrapper-right .right{flex:1 1 auto; }

效果如下：

更多專業前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的flex实现水平居中和两栏布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。