<!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;
width:500px;
height:500px;
}
实现效果：
need-to-insert-img
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;
}
实现效果：
need-to-insert-img
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;
width: 350px;
height: 150px;
border: 1px solid grey;
}.left{
width: 100px;
height: 100px;
background: grey;
}.right{
width: 150px;
height: 100px;
}
实现效果：
need-to-insert-img
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;
}
实现效果：
need-to-insert-img
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%;
}
实现效果：
need-to-insert-img
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;
}
实现效果：
need-to-insert-img
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-width: 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;
}
实现效果：
need-to-insert-img
8、底部fooer固定在底部，但是不是fixed定位
页面会经常用到固定的底栏，但是当页面内容过少时，footer会到页面中间，下面用flex来解决：
<div class="demo">
<div class="main">这是主要内容</div>
<div class="footer">这是底部</div>
</div>
.demo{
display: flex;
flex-direction: column;
width: 300px;
height: 200px;
}.main{
flex: 1;
background: pink;
}.footer{
width: 100%;
height: 30px;
background: grey;
}
实现效果：
need-to-insert-img
网友评论