CSS3 flex布局的妙用
2016-07-27 15:24
429 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>flex布局</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="components/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script src="components/bootstrap.min.js"></script>
<script src="components/jquery.vide.js"></script>
</head>
<body>
<style>
.father-container {
background-color: #a8e4ff;
padding: 50px 0;
}
/*dislpay:flex使父容器表现为块盒子;display:inline-flex使容器表现为行盒子*/
.flex-container {
display: flex;
}
.inline-flex-container {
display: inline-flex;
}
.align-items-stretch {
-webkit-align-items: stretch;
align-items: stretch;
}
.align-items-baseline {
-webkit-align-items: baseline;
align-items: baseline;
}
.align-items-center {
-webkit-align-items: center;
align-items: center;
}
.align-items-flex-start {
-webkit-align-items: flex-start;
align-items: flex-start;
}
.align-items-flex-end {
-webkit-align-items: flex-end;
align-items: flex-end;
}
.justify-content-flex-start {
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.justify-content-flex-end {
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.justify-content-center {
-webkit-justify-content: center;
justify-content: center;
}
.justify-content-space-between {
-webkit-justify-content: space-between;
justify-content: space-between;
}
.justify-content-space-around {
-webkit-justify-content: space-around;
justify-content: space-around;
}
.center-container {
display: inline-flex;
justify-content: center;
align-items: center;
}
.element-autoheight {
width: 50px;
padding: 5px;
margin: 5px;
background-color: tomato;
}
.element-fixedsize {
width: 50px;
height: 50px;
padding: 5px;
margin: 5px;
background-color: tomato;
text-align: center;
lin
140bb
e-height: 50px;
color: white;
font-weight: bold;
font-size: 2em;
}
.center-item {
width: 50px;
height: 50px;
background: tomato;
}
.flex-container1 {
padding: 0;
margin: 5px;
float: left;
list-style: none;
width: 160px;
height: 300px;
display: flex;
flex-flow: row wrap;
background-color: #a8e4ff;
/*flex-direction:row;
flex-wrap:wrap;*/
}
.flex-start {
-webkit-align-content: flex-start;
align-content: flex-start;
}
.flex-end {
-webkit-align-content: flex-end;
align-content: flex-end;
}
.flex-end li {
background: gold;
}
.flex-end li:nth-child(3) {
margin-bottom: 0;
}
.center {
-webkit-align-content: center;
align-content: center;
}
.center li {
background: deepskyblue;
}
.space-between {
-webkit-align-content: space-between;
align-content: space-between;
}
.space-between li {
background: lightgreen;
}
.space-between li:nth-child(3) {
margin-bottom: 0;
}
.space-around {
-webkit-align-content: space-around;
align-content: space-around;
}
.space-around li {
background: hotpink;
}
.stretch {
-webkit-align-content: stretch;
align-content: stretch;
}
.stretch li {
background: chocolate;
margin-bottom: 4px;
height: auto;
}
.stretch li:nth-child(3) {
margin-bottom: 0;
}
.flex-item {
background: tomato;
margin-bottom: 5px;
width: 160px;
height: 80px;
line-height: 80px;
color: white;
font-weight: bold;
font-size: 1em;
text-align: center;
}
</style>
<div class="container">
<h3>align-items</h3>
<div class="col-md-12">
<div class="col-md-4">
<h4>stretch（拉升至等高）</h4>
<div class="inline-flex-container align-items-stretch" style="background-color: #a8e4ff;">
<div class="element-autoheight">
<div style="height: 50px;"></div>
</div>
<div class="element-autoheight">
<div style="height: 100px;"></div>
</div>
<div class="element-autoheight">
<div style="height: 70px;"></div>
</div>
<div class="element-autoheight">
<div style="height: 90px;"></div>
</div>
</div>
</div>
<div class="col-md-4">
<h4>baseline（子元素基线对齐）</h4>
<div class=" inline-flex-container align-items-baseline" style="background-color: #a8e4ff;">
<div class="element-autoheight">
<div style="height: 50px;"></div>
</div>
<div class="element-autoheight">
<div style="height: 100px;"></div>
</div>
<div class="element-autoheight">
<div style="height: 70px;"></div>
</div>
<div class="element-autoheight">
<div style="height: 90px;"></div>
</div>
</div>
</div>
<div class="col-md-4">
<h4>center（子元素垂直居中对齐）</h4>
<div class="inline-flex-container align-items-center" style="background-color: #a8e4ff;">
<div class="element-autoheight">
<div style="height: 50px;"></div>
</div>
<div class="element-autoheight">
<div style="height: 100px;"></div>
</div>
<div class="element-autoheight">
<div style="height: 70px;"></div>
</div>
<div class="element-autoheight">
<div style="height: 90px;"></div>
</div>
</div>
</div>
<div class="col-md-4">
<h4>flex-end（子元素对齐下边缘）</h4>
<div class="inline-flex-container align-items-flex-end" style="background-color: #a8e4ff;">
<div class="element-autoheight">
<div style="height: 50px;"></div>
</div>
<div class="element-autoheight">
<div style="height: 100px;"></div>
</div>
<div class="element-autoheight">
<div style="height: 70px;"></div>
</div>
<div class="element-autoheight">
<div style="height: 90px;"></div>
</div>
</div>
</div>
<div class="col-md-4">
<h4>flex-start（子元素对齐上边缘）</h4>
<div class="inline-flex-container align-items-flex-start" style="background-color: #a8e4ff;">
<div class="element-autoheight">
<div style="height: 50px;"></div>
</div>
<div class="element-autoheight">
<div style="height: 100px;"></div>
</div>
<div class="element-autoheight">
<div style="height: 70px;"></div>
</div>
<div class="element-autoheight">
<div style="height: 90px;"></div>
</div>
</div>
</div>
</div>
<hr class="col-md-12">
<h3>align-self</h3>
<h4>和align-item一样，只不过是应用在子元素上（下面例子：改变align-item样式）</h4>
<div class="inline-flex-container align-items-stretch" style="background-color: #a8e4ff;">
<div class="element-autoheight">
<div style="height: 50px;"></div>
</div>
<div class="element-autoheight">
<div style="height: 140px;"></div>
</div>
<div class="element-autoheight">
<div style="height: 70px;"></div>
</div>
<div class="element-autoheight" style=" -webkit-align-self: flex-end;align-self: flex-end;">
<div style="height: 100px;font-size: 12px;">我本来是拉伸的，现在我和下边缘对齐了</div>
</div>
</div>
<hr class="col-md-12">
<h3>align-content</h3>
<div style="float: left;padding-bottom: 20px;">
<div class="flex-container1 flex-start">
<div class="flex-item">flex-start</div>
<div class="flex-item">flex-start</div>
<div class="flex-item">flex-start</div>
</div>
<div class="flex-container1 flex-end">
<li class="flex-item">flex-end</li>
<li class="flex-item">flex-end</li>
<li class="flex-item">flex-end</li>
</div>
<div class="flex-container1 center">
<li class="flex-item">center</li>
<li class="flex-item">center</li>
<li class="flex-item">center</li>
</div>
<div class="flex-container1 space-between">
<li class="flex-item">space-between</li>
<li class="flex-item">space-between</li>
<li class="flex-item">space-between</li>
</div>
<div class="flex-container1 space-around">
<li class="flex-item">space-around</li>
<li class="flex-item">space-around</li>
<li class="flex-item">space-around</li>
</div>
<div class="flex-container1 stretch">
<li class="flex-item">stretch</li>
<li class="flex-item">stretch</li>
<li class="flex-item">stretch</li>
</div>
</div>
<hr style="clear: both;">
<h3>justify-content</h3>
<div class="col-md-12">
<h4>flex-start（左边缘对齐）</h4>
<div class="flex-container justify-content-flex-start" style="background-color: #a8e4ff;">
<div class="element-fixedsize">1</div>
<div class="element-fixedsize">2</div>
<div class="element-fixedsize">3</div>
<div class="element-fixedsize">4</div>
</div>
<h4>flex-end（右边缘对齐）</h4>
<div class="flex-container justify-content-flex-end" style="background-color: #a8e4ff;">
<div class="element-fixedsize">1</div>
<div class="element-fixedsize">2</div>
<div class="element-fixedsize">3</div>
<div class="element-fixedsize">4</div>
</div>
<h4>center（居中对齐）</h4>
<div class="flex-container justify-content-center" style="background-color: #a8e4ff;">
<div class="element-fixedsize">1</div>
<div class="element-fixedsize">2</div>
<div class="element-fixedsize">3</div>
<div class="element-fixedsize">4</div>
</div>
<h4>space-between（等间距对齐，左右无间距）</h4>
<div class="flex-container justify-content-space-between" style="background-color: #a8e4ff;">
<div class="element-fixedsize">1</div>
<div class="element-fixedsize">2</div>
<div class="element-fixedsize">3</div>
<div class="element-fixedsize">4</div>
</div>
<h4>space-around（等间距对齐，左右有间距）</h4>
<div class="flex-container justify-content-space-around" style="background-color: #a8e4ff;">
<div class="element-fixedsize">1</div>
<div class="element-fixedsize">2</div>
<div class="element-fixedsize">3</div>
<div class="element-fixedsize">4</div>
</div>
</div>
<hr class="col-md-12">
<h3>子块完全置中(justify-content,align-items)</h3>
<div class="father-container center-container col-md-6">
<div class="center-item"></div>
</div>
<hr class="col-md-12">
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android布局的小窍门？
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- Web布局连载——两栏固定布局（五）
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- 新时代编辑神器：Atom
- 如何使用CSS3画出一个叮当猫
- Flex 隐藏组件的属性
- Flex 如何得到itemRenderer里面的内容
- Flex字符串比较 还有Flex字符串操作
- Flex 透明效果，位于页面最底层
- Flex 非常实用的学习资料整理
- flex 控件的重要属性