div+flex移动端布局
2019-03-21 本文已影响0人
樊小勇
移动端布局
1.我们要进行移动端页面的开发设计第一肯定想到的是弹性盒子
2.弹性盒子flex
3.div和flex的配合使用
移动端页面
1.移动端需要引入一个样式，meta
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 随便打开一个网站F12调成手机模式，复制meta
2.弹性盒子
一个div设置了display: flex; 就成了一个弹性盒子
因此我们把移动端界面布局称为div+flex布局
flex水平和垂直对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid;
height: 300px;
width: 500px;
display: flex;
/* 水平对齐方式 */
/* 左对齐 */
justify-content: flex-start;
/* 居中 */
justify-content: center;
/* 右对齐 */
justify-content: flex-end;
/* 两端对齐 */
justify-content: space-between;
/* 分散对齐 */
justify-content: space-around;
/* 垂直对齐 */
/* 顶部对齐 */
align-items: flex-start;
/* 底部对齐 */
align-items: flex-end;
/* 居中对齐 */
align-items: center;
}
li {
background: gray;
color: #fff;
height: 50px;
width: 100px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
inline-flex行内弹性盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
span {
height: 100px;
width: 300px;
border: 1px solid;
/* 水平居中,垂直居中 */
display: inline-flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<h3>inline-flex用法和flex一样</h3>
<span>
行内弹性盒子
</span>
</body>
</html>
flex-grow剩余空间分配方式
1.平均分配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 500px;
border: 1px solid;
display: flex;
}
p {
width: 100px;
background: gray;
color: #fff;
border: 1px solid red;
/* 剩余空间分为3分,三个p标签各占1份,相当于平均分配 */
flex-grow: 1;
}
</style>
</head>
<body>
<div>
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>
</div>
</body>
</html>
2.某一个子元素占据全部剩余空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 500px;
border: 1px solid;
display: flex;
}
p {
width: 100px;
background: gray;
color: #fff;
border: 1px solid red;
}
.p3 {
/* 剩余空间分为1分,p3占一份 */
flex-grow: 1;
}
</style>
</head>
<body>
<div>
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>
</div>
</body>
</html>
3.按需求分配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 500px;
border: 1px solid;
display: flex;
}
p {
width: 100px;
background: gray;
color: #fff;
/* border: 1px solid red; */
}
.p1,.p2 {
/* 剩余空间分为四份,p1,p2各占一份 */
flex-grow: 1;
}
.p3 {
/* 剩余空间分为四份,p3占两份 */
flex-grow: 2;
}
</style>
</head>
<body>
<div>
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>
</div>
</body>
</html>
flex-direction盒子排列方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
height: 500px;
width: 200px;
border: 1px solid;
margin: 0 auto;
display: flex;
/* 排列方向默认是row(水平) */
flex-direction: column;
/* 水平方向居中 */
align-items: center;
/* 垂直对齐 */
justify-content: center;
}
p {
margin: 0;
height: 50px;
width: 100px;
background: gray;
color: #fff;
}
</style>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</body>
</html>
盒子换行设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid;
height: 300px;
width: 500px;
display: flex;
/* 分散对齐 */
justify-content: space-around;
/* 居中对齐 */
align-items: center;
/* 换行设置,默认不换行 */
flex-wrap: wrap;
}
li {
border: 1px solid;
background: gray;
color: #fff;
height: 50px;
width: 100px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
</body>
</html>
