<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> div{ width: 100%; height: 500px; background-color: antiquewhite; } .box { display: flex; flex-direction: column; /*主轴的方向 */ /*flex-wrap: nowrap | wrap | wrap-reverse 可使得主轴上的元素不折行、折行、反向折行。*/ flex-wrap: nowrap; /*一个复合属性 flex-flow = flex-drection + flex-wrap flex-flow相当于规定了flex布局的“工作流(flow)” flex-flow: row nowrap;*/ /*交叉轴上的对齐方式align-items 默认值是stretch，当元素没有设置具体尺寸时会将容器在交叉轴方向撑满。*/ align-items: flex-start; /*justify-content属性定义了项目在主轴上的对齐方式。*/ justify-content: space-between; align-content: center; } .item { flex: none; /*0 不放大 none（0 0 auto）。 1 放大*/ text-align: left; height: 42px; line-height: 40px; width: 300px; list-style: none; background: green; border-right: 3px solid grey; } .red { background-color: red; } .blue { background-color: blue; } </style> </head> <body> <div > <ul class="box"> <li class="item">音乐</li> <li class="item">旅游</li> <li class="item">电影</li> <li class="item">综艺</li> <li class="item">音乐</li> <li class="item">旅游</li> </ul> </div> </body> </html> 1、flex设置元素水平垂直居中 <div class="box"> <h3>Flex实现水平垂直居中</h3> <p> flex-direction决定主轴的方向：row|row-reverse|column|column-reverse<br/> justify-content决定主轴的对齐方式：flex-start|flex-end|center|space-between|space-around<br/> align-items决定交叉轴的对齐方式：flex-start|flex-end|center|baseline|stretch </p> </div> .box{ display: flex; justify-content: center; align-items: center; border: 1px solid black; 500px; height:500px; } 实现效果： 2、用flex布局制作导航栏 以前写导航栏的时候，总是用float或display:inline-block实现，但是这两种方法都会有各种问题，比如浮动会影响父元素以及兄弟元素的样式，需要清除浮动，现在用flex会很方便，并且是弹性布局。 <ul> <li>音乐</li> <li>旅游</li> <li>电影</li> <li>综艺</li> </ul> ul{ display: flex; } li{ flex:1; text-align: center; line-height: 100px; list-style: none; background: green; border-right: 1px solid grey; } 实现效果： 3、图文并排的样式：左边是图片，右边是文字 <div class="box"> <div class="left"></div> <div class="right"> <p>第一行</p> <p>说明1 说明2</p> <div><input type="button" value="确认"></div> </div> </div> .box{ display: flex; justify-content: space-between; 350px; height: 150px; border: 1px solid grey; } .left{ 100px; height: 100px; background: grey; } .right{ 150px; height: 100px; } 实现效果： 4、固定百分比布局 <div class="demo"> <div class="item item1">1/4</div> <div class="item item2">1/4</div> <div class="item item3">1/4</div> <div class="item item4">1/4</div> </div> .demo{ display: flex; } .item{ flex: 1; background: green; border-right:1px solid grey; line-height: 100px; } 实现效果： 5、某一个固定 <div class="demo"> <div class="item item1">auto</div> <div class="item item2">1/2</div> <div class="item item3">auto</div> <div class="item item4">auto</div> </div> .demo{ display: flex; } .item{ flex: 1; background: green; border-right:1px solid grey; line-height: 100px; color: #fff; text-align: center; } .item2{ flex: 0 0 50%; } 实现效果： 6、圣杯布局 圣杯布局指的是一种最常见的网站布局。页面从上到下，分成三部分：头部（header），躯干（body），尾部（footer）。 其中躯干又水平分成三栏：从左到右为：导航、主栏、副栏。 <div class="demo"> <div class="header">头部</div> <div class="body"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div> <div class="footer">底部</div> </div> .demo{ display: flex; flex-direction: column; } .demo div{ flex: 1; } .body{ display: flex; } .header, .footer{ background: grey; line-height: 80px; text-align: center; } .left, .right{ background: pink; line-height: 200px; text-align: center; } .header,.footer,.left,.right{ flex: 0 0 20%!important; } 实现效果： 7、双飞翼布局 双飞翼布局，就是两端固定宽高，中间自适应的三栏布局。 <div id="container"> <div id="left" class="column">#left</div> <div id="center" class="column">#center</div> <div id="right" class="column">#right</div> </div> body { min- 550px; } #container{ display: flex; justify-content: center; align-items: flex-start; } .column{ height: 200px; color:white; } #center{ flex-grow: 1; background-color: black; } #left{ flex-basis: 200px; background-color: red; } #right{ flex-basis: 200px; background-color: blue; } 实现效果： 8、底部fooer固定在底部，但是不是fixed定位 页面会经常用到固定的底栏，但是当页面内容过少时，footer会到页面中间，下面用flex来解决： <div class="demo"> <div class="main">这是主要内容</div> <div class="footer">这是底部</div> </div> .demo{ display: flex; flex-direction: column; 300px; height: 200px; } .main{ flex: 1; background: pink; } .footer{ 100%; height: 30px; background: grey; } 实现效果：