<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex布局实例</title> <style> .box{ display: flex; width: 100px; height: 100px; background-color: black; border-radius: 30px; padding: 7px; } .item{ width: 30px; height: 30px; background-color: blanchedalmond; border-radius: 50%; } .it1{ justify-content: center; } .it2{ justify-content: flex-end; } .it3{ align-items: center; } .it4{ justify-content: center; align-items: center; } .it5{ justify-content: center; align-items: flex-end; } .it6{ justify-content: flex-end; align-items: flex-end; } /* ----------------双项目------------------- */ .two1{ justify-content: space-between;/*两端对齐，项目之间的间隔都相等。*/ } .two2{ flex-direction: column; justify-content: space-between; } .two3{ flex-direction: column; justify-content: space-between; align-items: center; } .two4{ flex-direction:column; justify-content:space-between; align-items:flex-end; } .two5 .item:nth-child(2){ align-self: center; } .two6{ justify-content: space-between; } .two6 .item:nth-child(2){ align-self: flex-end; } /* ----------------三项目------------------- */ .three .item:nth-child(2){ align-self:center; } .three .item:nth-child(3){ align-self: flex-end; } /* ----------------四项目------------------- */ .four{ flex-wrap: wrap; justify-content: flex-end; align-content: space-between; } .four1{ flex-wrap: wrap; align-content: space-between; } .column{ flex-basis: 100%; display: flex; justify-content: space-between; } /* ----------------六项目------------------- */ .six{ flex-wrap: wrap; align-content: space-between; justify-content: space-between; } .six1{ flex-direction:column; flex-wrap: wrap; align-content: space-between; justify-content: space-between; } .six2{ flex-wrap: wrap; } .row{ flex-basis: 100%; display: flex; justify-content: space-between; } .row:nth-child(2){ justify-content: center; } .row:nth-child(3){ justify-content: space-between; } /* -----------------九个项目---------------------------- */ .nine{ flex-wrap: wrap; justify-content: space-between; } /* -----------------------------------网格布局---------------------------------------- */ /* 网格 */ .Grid{ display: flex; gap: 10px; } .Grid-cell{ flex: 1; background: antiquewhite; text-align: center; } /* 百分比 */ .u-full { flex: 0 0 100%; } .u-1of2 { flex: 0 0 50%; } .u-1of3 { flex: 0 0 33.3333%; } .u-1of4 { flex: 0 0 25%; } /* -----------------------------------圣杯布局---------------------------------------- */ .HolyGrail{ display: flex; min-height: 100vh; flex-direction: column; } header,footer { flex: 1; background-color: gray; } .HolyGrail-body { display: flex; flex: 1; } .HolyGrail-content { flex: 1; background-color: antiquewhite; } .HolyGrail-nav, .HolyGrail-ads { /* 两个边栏的宽度设为12em */ flex: 0 0 12em; } .HolyGrail-ads{ background-color: blueviolet; } .HolyGrail-nav { /* 导航放到最左边 */ order: -1; background-color: aquamarine; } @media (max- 768px) { .HolyGrail-body { flex-direction: column; flex: 1; } .HolyGrail-nav, .HolyGrail-ads, .HolyGrail-content { flex: auto; } } /* -----------------------------------输入框布局-------------------------------------------*/ .InputAddOn { display: flex; } .InputAddOn-field { flex: 1; } /* -----------------------------------悬挂式布局-------------------------------------------*/ .Media { display: flex; align-items: flex-start; } .Media-figure { margin-right: 1em; width: 100px; } .Media-body { flex: 1; } /* -----------------------------------固定的底栏-------------------------------------------*/ .Site { display: flex; min-height: 100vh; flex-direction: column; } .Site-content { flex: 1; } /* -----------------------------------流式布局-------------------------------------------*/ .parent { width: 200px; height: 150px; background-color: black; display: flex; flex-flow: row wrap; align-content: flex-start; } .child { box-sizing: border-box; background-color: white; flex: 0 0 25%; height: 50px; border: 1px solid red; } </style> </head> <body> <div> <h3>一、骰子布局</h3> <h4>单项目</h4> 主轴 <div class="box"> <span class="item"></span> </div> <div class="box it1"> <span class="item"></span> </div> <div class="box it2"> <span class="item"></span> </div> 交叉轴 <div class="box it3"> <span class="item"></span> </div> <div class="box it4"> <span class="item"></span> </div> <div class="box it5"> <span class="item"></span> </div> <div class="box it6"> <span class="item"></span> </div> <hr> <H4>双项目</H4> <div class="box two1"> <span class="item"></span> <span class="item"></span> </div> <div class="box two2"> <span class="item"></span> <span class="item"></span> </div> <div class="box two3"> <span class="item"></span> <span class="item"></span> </div> <div class="box two4"> <span class="item"></span> <span class="item"></span> </div> <div class="box two5"> <span class="item"></span> <span class="item"></span> </div> <div class="box two6"> <span class="item"></span> <span class="item"></span> </div> <hr> <h4>三项目</h4> <div class="box three"> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> <hr> <h4>四个项目</h4> <div class="box four"> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> <div class="box four1"> <div class="column"> <span class="item"></span> <span class="item"></span> </div> <div class="column"> <span class="item"></span> <span class="item"></span> </div> </div> <hr> <h4>六个项目</h4> <div class="box six"> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> <div class="box six1"> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> <div class="box six2"> <div class="row"> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> <div class="row"> <span class="item"></span> </div> <div class="row"> <span class="item"></span> <span class="item"></span> </div> </div> <hr> <h4>九个项目</h4> <div class="box nine"> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> </div> <div> <h3>二、网格布局</h3> <div> <h4>2.1 基本网格布局</h4> <div> <p> 最简单的网格布局，就是平分布局。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。 </p> <p> <img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071321.png" alt="" srcset=""> </p> <div class="Grid"> <div class="Grid-cell">1/3</div> <div class="Grid-cell">1/3</div> <div class="Grid-cell">1/3</div> </div> </div> </div> <div> <h4>2.2 百分比布局</h4> <div> <p> 某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。 </p> <p> <img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071322.png" alt="" srcset=""> </p> <div class="Grid"> <div class="Grid-cell u-1of2">1/2</div> <div class="Grid-cell">auto</div> <div class="Grid-cell">auto</div> </div> <hr> <div class="Grid"> <div class="Grid-cell">auto</div> <div class="Grid-cell u-1of3">1/3</div> </div> <hr> <div class="Grid"> <div class="Grid-cell u-1of4">1/4</div> <div class="Grid-cell">auto</div> <div class="Grid-cell u-1of3">1/3</div> </div> </div> </div> </div> <div> <h3>三、圣杯布局</h3> <div> <p> 圣杯布局指的是一种常用的网站布局。页面从上到下，分成三个部分：header、body、footer。其中body又平分成三栏，从左到右为：导航、主栏、副栏。 </p> <p> <img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071323.png" alt="" srcset=""> </p> <div class="HolyGrail"> <header>header</header> <div class="HolyGrail-body"> <main class="HolyGrail-content">main</main> <nav class="HolyGrail-nav">nav</nav> <aside class="HolyGrail-ads">aside</aside> </div> <footer>footer</footer> </div> </div> </div> <div> <h3>四、输入框布局</h3> <div> <p> 我们常常需要在输入框的前方添加提示，后方添加按钮。 </p> <div class="InputAddOn"> <span class="InputAddOn-item">账号</span> <input class="InputAddOn-field"> <button class="InputAddOn-item">登录</button> </div> </div> </div> <div> <h3>五、悬挂式布局</h3> <div> <p> 有时，主栏的左侧或右侧，需要添加一个图片栏。 </p> <div class="Media"> <img class="Media-figure" src="./static/1.jpeg" alt=""> <p class="Media-body">一脚踢飞伟哥，山粉以为山治又行了，后来大家都知道了！一脚蹬明弟身上，山粉又看到了希望，结果就不用说了！月步救路飞，山粉大呼太可靠啦，下一个镜头，被锤烂！一脚踢飞pgone，山粉露出了期待的表情，尾田直接把你战斗剪了！结局就是pgone没啥事！这次又来踢奎因一脚，无法想象山粉会脑补出多么波澜壮阔的战斗，多么辉煌的胜利来为山治正名而无论他们想的如何精彩，也只能停留在yy里了，哎可怜的山粉！</p> </div> <div class="Media"> <img class="Media-figure" src="./static/1.jpeg" alt=""> <p class="Media-body">一脚踢飞伟哥，山粉以为山治又行了，后来大家都知道了！一脚蹬明弟身上，山粉又看到了希望，结果就不用说了！月步救路飞，山粉大呼太可靠啦，下一个镜头，被锤烂！一脚踢飞pgone，山粉露出了期待的表情，尾田直接把你战斗剪了！结局就是pgone没啥事！这次又来踢奎因一脚，无法想象山粉会脑补出多么波澜壮阔的战斗，多么辉煌的胜利来为山治正名而无论他们想的如何精彩，也只能停留在yy里了，哎可怜的山粉！</p> </div> </div> </div> <div> <h3>六、固定的底栏</h3> <div> <p> 有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。 </p> <p> <img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071326.png" alt="" srcset=""> </p> <div class="Site"> <header>...</header> <main class="Site-content">...</main> <footer>...</footer> </div> </div> </div> <div> <h3>七、流式布局</h3> <div> <p> 每行的项目数固定，会自动分行。 </p> <p> <img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071330.png" alt="" srcset=""> </p> <div class="parent"> <span class="child"></span> <span class="child"></span> <span class="child"></span> <span class="child"></span> <span class="child"></span> <span class="child"></span> <span class="child"></span> <span class="child"></span> <span class="child"></span> <span class="child"></span> <span class="child"></span> </div> </div> </div> </body> </html>