flex彈性佈局 響應式佈局
本章節分享一段程式碼例項,它使用flex彈性佈局實現了響應式佈局效果。
更多flex彈性佈局可以參閱display:flex彈性佈局一章節。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> small{ color:#999; font-weight:normal; } p{ padding:10px; border:1px solid #FFC8C8; background:#FFE5E5; border-radius:4px; color:#A70000; } .demo-wrap{ border:3px double #ddd; padding:10px; } .demo{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; } .demo .item{ width:300px; height:120px; background:#444; line-height:50px; font-size:20px; color:#fff; text-align:center; margin-bottom:20px; } </style> </head> <body> <div class="demo-wrap"> <div class="demo"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div> </body> </html>
上述程式碼通過彈性佈局實現了簡單的響應式效果。
相關文章
- flex佈局(彈性佈局)Flex
- Flex-彈性佈局Flex
- display:flex 彈性佈局Flex
- flex彈性佈局 垂直居中Flex
- css之彈性佈局(flex)CSSFlex
- 彈性盒模型,flex佈局模型Flex
- CSS:彈性佈局(display:flex)CSSFlex
- flex 彈性佈局的基本操作Flex
- React Native——flex(彈性佈局)React NativeFlex
- 彈性佈局(伸縮佈局)
- 響應式佈局
- flex彈性佈局程式碼例項Flex
- flex彈性佈局的基本介紹Flex
- flex佈局屬性Flex
- Web應用課 2.4 CSS——flex、響應式佈局WebCSSFlex
- Flex彈性佈局(附超Q小demo)Flex
- 前端面試3:flex彈性盒佈局前端面試Flex
- display: flex彈性佈局程式碼例項Flex
- rem響應式佈局REM
- Flex佈局應用Flex
- flex 佈局Flex
- Flex佈局Flex
- css--flex彈性佈局詳解和使用CSSFlex
- 浮動佈局 和 flex佈局Flex
- 響應式佈局講解
- 初窺響應式佈局
- Android響應式佈局Android
- 【探索HTML5第二彈05】響應式佈局(中),一步一步響應式佈局HTML
- 移動 WEB 開發的佈局方式 ---- 響應式佈局Web
- CSS Flex佈局屬性整理CSSFlex
- css flex佈局CSSFlex
- flex佈局原理Flex
- 響應式佈局方法總結
- Flex、Grid、媒體查詢實現響應式佈局Flex
- css3的flex實現的響應式佈局效果CSSS3Flex
- dispaly的Grid佈局與Flex佈局Flex
- flex佈局屬性快速參考Flex
- Flex佈局教程及屬性速查Flex