本文主要介绍了css3 flex布局实现平均分配元素，给自己留个笔记，也分享给大家，具体如下：
例子一：
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>flex 布局</title> <style> *{ padding:0; margin:0; } body,html{ height: 100vh; min-width: 800px; } .container{ display:flex; flex-wrap:wrap; display: -webkit-flex; /* safari */ } .container>.item{ border: 1px solid black; flex:1; height:10李溥0px; background: #abcdef; } </style></head><body> <div class="container"> <div class="item"></div> <main class="item"></main> <div class="item"></div> </div></body></html>例子二：
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>flex 布局</title> <style> *{ padding:0; margin:0; box-sizing: border-box; } body,html{ width: 100%; height: 100vh; min-width: 800px; display:flex; accompany什么意思 display: -webkit-flex; /* safari *法人授权委托书格式/ justify-content: center; align-items: center; } .container{ width: 300px; height: 300px; display:flex; display: -webkit-flex; /* safari */ flex-wrap: wrap; } .container>.item{ flex:0 0 33.3%; height:100px; background: #abcdef; border: 1px solid red; } main{ flex:0 0 33.3%; height:100px; background-color: #ccc; border: 1px solid red; } </style></head><body> <div class="container"> <div class="item">left</div> <main>main</main> <div class="item">right</div> <div class="item">left</div> <main>main</main> <div class="item">right</div> <div class="item">left</div> <main>main</main> <div class="item">right</div> </div></body></html>
flex:0 0 33.3% 相广东培正学院官网当于flex-basis:33.3%，使每一个元素的宽度占外层容器的33.3%，因此每行最多能够排开三个元素。
flex-wrap:wrap 表示每行填满时会自动换行。
例子三：
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>flex 布局</title> <style> *{ padding:0; margin:0; box-sizing: border-box; } body,html{ width: 100%; height: 100vh; min-width: 800px; display:flex; display: -webkit-flex; /* safari */ justify-content: center; align-items: center; } .container{ width: 300px; height: 300px; margin: 50px; display:flex; display: -webkit-flex; /* safari */ flex-wrap: wrap; justify-content: space-between; } .container>.item{ flex:0 0 30%; height:90px; background: #abcdef; border: 1px solid red; } main{ flex:0 0 30%; height:90px; background-color: #ccc; border: 1px solid red; } </style></head><body> <div class="container"> <div class="item">left</div> <main>main</main> <div class="item">right</div> <div class="item">left</div> <main>main</main> <div class="item">right</div> <div class="item">left</div> 婴儿吃完奶打嗝 <main>main</main> <div class="item">right</div> </div></body></html>
justify-content:space-between表示主轴方向的多余空间平均分配在两两item之间。
到此这篇关于css3 flex布局实现平均分配元素的示例代码的文章就介绍到这了,更多相关flex平均分配元素内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！
本文发布于:2023-04-03 18:54:53，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/8dacf43c2972ff7f7b32fa0d79dd841b.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：css3 flex布局实现平均分配元素的示例代码.doc
本文 PDF 下载地址：css3 flex布局实现平均分配元素的示例代码.pdf
| 留言与评论（共有 0 条评论） |
