display：flex布局详解（2）
1.  flex设置元素垂直居中对齐
在之前的⼀篇⽂章中记载过如何垂直居中对齐，⽅法有很多，但是在学习了flex布局之后，垂直居中更加容易实现
HTML代码：
1<div class="demo">
2<div class="inner">
3<p>这是⼀个测试这是⼀个测试这是⼀个测试这是⼀个测试这是⼀个测试</p>
4</div>
5</div>
CSS代码：
.demo{
width: 500px;
height: 300px;
border: 1px solid purple;
display: flex;                /*设置为flex布局*/
justify-content: center;  /*⽔平居中*/
align-items: center;    /*垂直居中*/
}
.inner{
width: 160px;
height: 160px;
font-size: 26px;
border: 1px solid red;
}
2. ⽤flex布局制作导航栏
以前在写导航栏的时候，总是⽤float或者display：inline-block实现，但是这两种⽅法都会有各种问题，⽐如浮动会影响⽗元素以及兄弟元素的样式，需要清除浮动
现在⽤flex会很⽅便，并且是弹性布局
HTML代码：
<ul>
<li>⾳乐</li>
<li>影视</li>
<li>旅游</li>
</ul>
CSS代码：
ul{
display: flex;
}
li{
flex: 1;
text-align: center;
line-height: 100px;
}
效果如图所⽰：
我们只要在HTML代码⾥⾯多加两个li元素，导航便弹性变化
不需要改变css代码，即可在导航栏中增加项⽬
3. 有时候需要做成左图右⽂字的样式，如下图所⽰：
此时⽤flex会很⽅便
HTML代码：
<div class="demo">
<div class="left"></div>
<div class="right">
<p>Iphone7 PLUS XXXXXXXXXX</p>
<span>总⼈数99</span>
<span>剩余⼈数33</span>
<div class="btn">⽴即参与</div>
</div>
</div>
CSS代码：
.demo{
display: flex;                /*设置为flex布局*/
justify-content: space-around;
}
.demo > div{
flex: none;
}
.left{
width: 200px;
height: 200px;
background: #d4cdcd;
}
.right{
width: 380px;
height: 200px;
}
甚⾄有多列布局，
HTML代码：
<div class="demo">
<div class="left"></div>
<div class="center">
<p>description</p>
<p>description</p>
<p>description</p>
<span>description</span>
</div>
<div class="btn">确认</div>
<div class="btn">取消</div>
</div>
CSS代码：
.demo{
width: 600px;
height: 150px;
border: 1px solid #b7b2b7;
margin: 30px auto;
padding-top: 17px;
display: flex;                /*设置为flex布局*/  justify-content: space-around;
}
.demo > div{
flex: none;
}
4. 固定百分⽐布局：
HTML代码：
<div class="demo">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div>
(1) 等分布局：
CSS代码：
.demo{
display: flex;
}
.item{
flex: 1;
}
（2）某⼀个固定
CSS代码：
1.demo{
2  display: flex;
3 }
4.item{
5  flex: 1;
6 }
7.item2{
8  flex: 0 0 50%;
9 }
（3）某两个固定
CSS代码：
.demo{
display: flex;
}
.item{
flex: 1;
}
.item2{
flex: 0 0 50%;
}
.item4{
flex: 0 0 20%;
}
（4）三个固定
CSS代码：
flex布局详细讲解.demo{
display: flex;
}
.item{
flex: 1;
}
.item1{
flex: 0 0 10%;
}
.item2{
flex: 0 0 50%;
}
.item4{
flex: 0 0 20%;
}
5.  圣杯布局，如图所⽰
HTML代码：
<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>
CSS代码：
.demo{
display: flex;
flex-direction: column;
}
.demo div{
flex: 1;
}
.body{
display: flex;
}
.header,.footer,.left,.right{
flex: 0 0 20%!important;
}
6.  输⼊框布局，有时需要在输⼊框的前部添加提⽰，或者后部添加按钮，如图所⽰：
HTML代码：
<div class="demo">
<span class="tip"></span>
<input type="text" name=""/>
<button>search</button>
</div>
CSS代码：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。