標籤：分享 位置 splay width 響應式 ems 元素 isp 不同的
當我們在瀏覽瀏覽器的時候，經常會放大/縮小瀏覽器的顯示比例，或者在不同的裝置上。所處的解析度也不盡同樣。
因此。我們須要學習一個新的知識：彈性盒模型。
彈性盒模型實現項目對齊，方向，排序（即使項目大小位置動態產生），可以動態改動子項目的寬度和高度。具有良好的適配性。| 屬性 | 說明 |
| flex-direction | 設定主軸方向。確定彈性子項目相片順序 |
| flex-wrap | 當彈性子項目超出彈性容器範圍是是否換行 |
| flex-flow | 複合屬性。flex-direction和flex-wrap雙重屬性 |
| justify-content | 主軸上的對齊 |
| align-items | 側軸上的對齊 |
| align-content | 側軸上有空白，側軸對齊 |
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Flexbox響應式菜單</title> <link rel="stylesheet" type="text/css" href="mycss.css"/></head><body><ul class="menu"> <li><a href="#">number1</a></li> <li><a href="#">number2</a></li> <li><a href="#">number3</a></li> <li><a href="#">number4</a></li> <li><a href="#">number5</a></li> <li><a href="#">number6</a></li></ul></body></html>
.menu{ list-style-type: none; padding: 0; margin: 0; display: -webkit-flex; display: -ms-flexbox; /*display: flex; //啟用flex方式 flex-flow: row wrap; //彈性容器的屬性*/}.menu li{ width: auto; height: 40px; text-align: center; line-height: 40px; flex: 1 1 100%; //擴充比例為1，收縮比例為1。初始寬度為100%}.menu li:nth-child(1){ background-color: pink;}.menu li:nth-child(2){ background-color: plum;}.menu li:nth-child(3){ background-color: hotpink;}.menu li:nth-child(4){ background-color: palevioletred;}.menu li:nth-child(5){ background-color: deeppink;}.menu li:nth-child(6){ background-color: purple;}.menu li a{ color: black; text-decoration: none;}@media (max-width: 480px) { .menu { flex: 1 1 100%; flex-flow: row wrap; }}@media (min-width: 768px){ .menu { flex-flow: row nowrap; }}
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flex布局</title> <style> *{ margin: 0; padding: 0; } @media (min-width: 600px) { .header { width: auto; background-color: green; } .sidebar { float: left; width: 200px; margin-right: -200px; background-color: gold; } .content { float: left; width: 100%; margin-left: 200px; background-color: red; } } @media (max-width: 600px) { .header { width: auto; background-color: green; } .sidebar { width: auto; background-color: gold; } .content { width: auto; background-color: red; } } </style></head><body><div class="header">header</div><div class="sidebar">sidebar</div><div class="content">content</div></body></html>
CSS經典布局之彈性布局
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
