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;
}
实现效果:
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;
width: 350px;
height: 150px;
border: 1px solid grey;
}
.left{
width: 100px;
height: 100px;
background: grey;
}
.right{
width: 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-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;
}
实现效果:
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;
}
实现效果: