<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*固定模式布局 流动布局100% 弹性布局 flex (手机移动端 类似于table)*/
/*
display:flex; 把容器转化为弹性布局
flex-direction: column; 规定里面的元素按照什么方式来布局 row column 翻转
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; 行里面的元素进行分配空间 按等份分配
*/
.fl{
width: 400px;
height: 600px;
border: 1px solid red;
margin: auto;
display:flex;
flex-direction: column;
}
.row,.row1,.row2{
width: 400px;
height: 100px;
border-bottom: 1px solid blue;
display: flex;/*转为flex*/
flex-direction: row;
/* align-items 子元素在y 轴上对其的方式 center 居中 flex-end 底边 flex-start 上边 stretch 垂直拉伸*/
/* align-items:stretch;*/
/*justify-content x轴对齐 center 居中 flex-end 右边对齐 flex-start 左边对齐 space-between 左右两边对齐 中间平分
space-around 均分所有空白*/
/* justify-content: center;
align-items: center;*/
flex-wrap: wrap;
/*当前行里面有剩余的空白 */
align-content: space-between;
}
.row>div{
width: 50px;
height: 30px;
border: 1px solid black;
}
.row1>div{
/*给每个元素分配空间 flex*/
/* flex: 10;*/
height: 30px;
border: 1px solid black;
}
.row1>div:nth-child(1){
flex: 1;
}
.row1>div:nth-child(2){
flex: 2;
}
.row1>div:nth-child(3){
flex: 3;
}
.row1>div:nth-child(4){
flex: 1;
}
.row2>div{
width: 100px;
height: 40px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="fl">
<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<div class="row1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="row2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
css手机布局自适应
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--
viewport 视口
width=device-width 宽度等于屏幕的宽
initial-scale=1.0 伸缩比例为1.0
maximum-scale=3.0 最大伸缩比例
minimum-scale=1.0 最小伸缩比例
user-scalable=no 禁止用户缩放
-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3.0,minimum-scale=1.0,user-scalable=no">
<title></title>
</head>
<body>
<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>
</body>
</html>
固定屏幕适应手机屏幕
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=300,maximum-scale=5.0,minimum-scale=1.0,user-scalable=no">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.b{
margin: auto;
width: 300px;
height: 500px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="b">
1
</div>
</body>
</html>