Css3 弹性盒的几个应用
1、居中
外层盒子任意大小，里面的子项目始终居中
<style>
.wrapper {
resize: both;
overflow: hidden;
width: 300px;
height: 300px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.content {
width: 100px;
height: 100px;
background-color: #008c8c;
}
</style>
<div class="wrapper">
<div class="content"></div>
</div>2、可动态增加的导航栏
<style>
.nav {
width: 600px;
height: 30px;
border: 1px solid #c81623;
display: flex;
align-items: center;
}
.item {
flex: 1 1 auto; /* 设置等比例伸缩 */
height: 30px;
line-height: 30px;
background-color: #c81623;
text-align: center;
color: #fff;
font-size: 16px;
}
.item:hover {
background-color: #fff;
color: #c81623;
}
</style>
<div class="nav">
<div class="item">秒杀</div>
<div class="item">优惠券</div>
<div class="item">PLUS会员</div>
<div class="item">品牌闪购</div>
<div class="item">拍卖</div>
<div class="item">京东家电</div>
<div class="item">京东超市</div>
</div>3、等分布局
可以4等分 或 2等分，中间可以加margin
<style>
.wrapper {
width: 400px; /* 父级宽度可以设置不固定 */
height: 200px;
border: 1px solid #eee;
display: flex;
}
.content {
flex: 1 1 auto; /* 设置等比例伸缩 */
box-sizing: border-box; /* 设置为怪异盒模型 */
/* margin: 0 10px; 可以加margin */
height: 100px;
line-height: 100px;
text-align: center;
background-color: #008c8c;
border: 1px solid #fff;
color: #fff;
}
</style>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
</div>4、其中一个固定宽度的布局
中间固定，两边自适应
<style>
.wrapper {
width: 400px;
height: 200px;
border: 1px solid #eee;
resize: both;
overflow: hidden;
display: flex;
}
.content {
flex:1 1 auto; /* 两边的元素宽度自动伸缩 */
box-sizing: border-box;
height: 100px;
line-height: 100px;
text-align: center;
background-color: #ff8c8c;
border: 1px solid #fff;
color: #fff;
}
.content:nth-of-type(2) {
flex:0 0 200px; /* 1.中间的不能伸缩，2.宽度固定200像素 */
background-color: #008c8c;
}
</style>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>中间固定，两边不等比例的伸缩
<style>
.wrapper {
width: 400px;
height: 200px;
border: 1px solid #eee;
resize: both;
overflow: hidden;
display: flex;
}
.content {
flex: 1 1 auto;
/* 两边的元素宽度自动伸缩 */
height: 100px;
line-height: 100px;
text-align: center;
background-color: #ff8c8c;
border: 1px solid #fff;
box-sizing: border-box;
color: #fff;
}
.content:nth-of-type(2) {
flex: 0 0 200px; /* 中间宽度固定200像素 */
background-color: #008c8c;
}
.content:nth-of-type(3) {
flex: 2 2 auto; /* 第三个盒子宽度不等比例的伸缩 */
}
</style>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>中间宽度占50%，两边不等比例的伸缩
<style>
.wrapper {
width: 400px;
height: 200px;
border: 1px solid #eee;
resize: both;
overflow: hidden;
display: flex;
}
.content {
flex:1 1 auto; /* 两边的元素宽度自动伸缩 */
height: 100px;
line-height: 100px;
text-align: center;
background-color: #ff8c8c;
border: 1px solid #fff;
box-sizing: border-box;
color: #fff;
}
.content:nth-of-type(2) {
background-color: #008c8c;
flex:0 0 50%; /* 中间宽度占全局的50% */
}
.content:nth-of-type(3) {
flex:2 2 auto; /* 第三个盒子不等比例的伸缩 */
}
</style>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>5、流式布局
实现 float 浮动的排列布局
<style>
.wrapper {
width: 400px;
height: 400px;
border: 1px solid #eee;
display: flex;
flex-wrap: wrap; /* 换行 */
align-content: flex-start; /* 多行交叉轴的排列方式 */
}
.content {
/* margin-bottom: 10px; 和正常的布局是一样的使用margin属性 */
height: 100px; /* 设置固定宽高 */
width: 100px;
line-height: 100px;
text-align: center;
background-color: #008c8c;
border: 1px solid #fff;
box-sizing: border-box;
color: #fff;
}
</style>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
</div>6、圣杯布局
要求
三个部分 header、content、footer 垂直布局，上下 header、footer 占整体的20%不进行伸缩
1. 主轴垂直，交叉轴水平方向 flex-direction: column
2. header、footer 不伸缩宽度固定 flex: 0 0 20%
3. 交叉轴不设置长度，对齐方式为默认（align-items: stretch 默认拉伸到容器的长度）
<style>
.wrapper{
width: 90%;
height: 400px;
border: 1px solid #ccc;
display: flex;
flex-direction: column;
}
.header,
.footer {
flex: 0 0 20%;
box-sizing: border-box;
background-color: #eee;
}
.left {
background-color: #008c8c;
}
.center {
background-color: antiquewhite;
}
.right {
background-color: #ff8c8c;
}
</style>
<div class="wrapper">
<div class="header">header</div>
<div class="content">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>4. .content 不设置高，设置自动伸 flex: 1 0 auto;
.wrapper{
width: 90%;
height: 400px;
border: 1px solid #ccc;
display: flex;
flex-direction: column;
align-items: stretch;
}
.header,
.footer {
flex: 0 0 20%;
box-sizing: border-box;
background-color: #eee;
}
.content{
flex:1 0 auto; /* 自动撑开，黄色背景部分 */
background-color:yellow;
}
.left {
background-color: #008c8c;
}
.center {
background-color: antiquewhite;
}
.right {
background-color: #ff8c8c;
}5. .content 也设置为弹性容器 display: flex ，它的子项横向布局
6. .left、.right 设置 flex: 0 0 20px 占20%不进行伸缩（可以和header、footer的样式合并）
7. .center 设置自动伸缩 flex : 1 1 auto ，主轴水平方向，交叉轴是垂直方向，同理交叉轴默认 align-itmes: stretch 高度自动撑开
.wrapper{
width: 90%;
height: 400px;
border: 1px solid #ccc;
display: flex;
flex-direction: column;
align-items: stretch;
}
.header,
.footer {
flex: 0 0 20%;
box-sizing: border-box;
background-color: #eee;
}
.content{
flex:1 0 auto;
background-color:yellow;
display: flex; /* 5.弹性项目 */
}
.left, .right{
flex: 0 0 20%; /* 6.不进行伸缩，固定宽度 */
}
.left {
background-color: #008c8c;
}
.center {
flex : 1 1 auto; /* 7.自动伸缩 */
background-color: antiquewhite;
}
.right {
background-color: #ff8c8c;
}第一次学习时候的笔记
<style>
.wrapper {
resize: both;
overflow: hidden;
width: 90%;
height: 400px;
border: 1px solid #ccc;
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
background-color: yellow;
display: flex;
}
.left,
.right {
flex: 0 0 20%;
}
.header,
.footer {
flex: 0 0 20%;
box-sizing: border-box;
background-color: #eee;
}
.center {
flex: 1 1 auto;
}
.left {
background-color: #008c8c;
}
.center {
background-color: antiquewhite;
}
.right {
background-color: #ff8c8c;
}
</style>
<div class="wrapper">
<div class="header">header</div>
<div class="content">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>练习
<style>
.wrapper {
resize: both;
overflow: hidden;
width: 90%;
height: 400px;
border: 1px solid #ccc;
min-width: 400px;
/* 设置最小400像素 */
display: flex;
flex-direction: column;
}
.content {
display: flex;
flex: 1 1 auto;
}
.header,
.footer {
height: 50px;
/* 上下固定50像素 */
background-color: #eee;
}
.left {
background-color: #008c8c;
width: 100px;
min-width: 100px
}
.center {
background-color: antiquewhite;
width: 100%;
min-width: 200px
}
.right {
background-color: #ff8c8c;
min-width: 100px
}
</style>
<div class="wrapper">
<div class="header">header</div>
<div class="content">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>
Leave a comment
0 Comments.