CSS-flex|gird 佈局
阿新 • • 發佈:2020-07-24
網頁佈局.css
*{ box-sizing: border-box; } /* flex彈性佈局 */ #flex-container { display: flex; flex-direction: row; border: 3px solid red; } #flex-container > .flex-item { flex: auto; border: 1px solid green; } #flex-container > .raw-item { width: 5rem; } /* https://developer.mozilla.org/zh-CN/docs/Glossary/Grid */ /* grid網格佈局 */ .wrapper{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div{ border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } /* 媒體查詢 */ /* https://www.w3cschool.cn/css3/css3-mediaqueries.html */ /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media */ @media screen and (min-width: 480px) { /* 螢幕尺寸小480px時背景色變化 */ body { background-color: lightgreen; } }
html檔案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>網頁佈局-Flex</title> <link rel="stylesheet" href="./網頁佈局.css"> </head> <body> <!-- flex彈性佈局 --> <div id="flex-container"> <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div> <div class="raw-item" id="raw">Raw box</div> </div> <!-- grid網格佈局 --> <div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> <div>Six</div> <div>Seven</div> <div>Eight</div> </div> </body> </html>