1.弹性布局
(1)属性
display:flex; 把容器转化为弹性布局
flex-direction: 规定里面的元素按照什么方式来布局
row | 项目水平显示 |
row-reverse | 以相反的顺序水平显示 |
column | 项目垂直显示 |
colummn-reverse | 以相反的方向垂直显示 |
align-items 子元素在y 轴上对其的方式
center | 居中 |
flex-end | 底边 |
flex-start | 上边 |
stretch | 垂直拉伸 |
justify-content x轴对齐
center | 居中 |
flex-end | 右边对齐 |
flex-start | 左边对齐 |
space-between | 左右两边对齐,中间平分 |
pace-around | 均分所有空白 |
flex-wrap: wrap; 控制行里面 进行换行
align-content: space-between; 在行里面使用 行留白的时候有效果
flex: 1; 行里面的元素进行分配空间 按等份分配
align-items 子元素在y 轴上对其的方式
center | 居中 |
flex-end | 底边 |
flex-start | 上边 |
stretch | 垂直拉伸 |
align-items:stretch;
justify-content: center;
align-items: center;
(2)实例
<body>
<div class="tr">
<div class="te">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
</body>
<style>
.tr{
width: 300px;
height: 400px;
margin: 100px auto;
border: 1px solid red;
box-sizing: border-box;
display: flex;/*转为弹性布局*/
flex-direction: column;
}
.te{
width: 300px;
height: 100px;
border-bottom: 1px solid black;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-content: space-between;
flex-wrap: wrap;
}
.te>div{
width: 30px;
height: 20px;
border: 1px solid blue;
box-sizing: border-box;
}
.te>div:nth-child(1){
flex: 3;
}
.te>div:nth-child(2){
flex: 1;
}
.te>div:nth-child(3){
flex: 2;
}
.te>div:nth-child(4){
flex: 3;
}
.te>div:nth-child(5){
flex: 1;
}
.te>div:nth-child(6){
flex: 2;
}
</style>
效果展示:
2.手机自适应
(1)属性
viewport 视口
width=device-width 宽度等于屏幕的宽
initial-scale=1.0 伸缩比例为1.0
maximum-scale=3.0 最大伸缩比例
minimum-scale=1.0 最小伸缩比例
user-scalable=no 禁止用户缩放
(2)实例
<div class="b">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<style>
*{
margin: 0;
}
.b{
width: auto;
height: 300px;
display: flex;
flex-direction: row;
}
.b>div{
flex: 1;
height: 50px;
border: 1px solid red;
}
</style>
效果展示:
3.固定模式适应手机屏幕
<body>
<div class="b">
1
</div>
</body>
<style>
*{
margin: 0;
padding: 0;
}
.b{
margin: auto;
width: 300px;
height: 500px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
效果展示: