html div flex,div+flex移动端布局

移动端布局

1.我们要进行移动端页面的开发设计第一肯定想到的是弹性盒子

2.弹性盒子flex

3.div和flex的配合使用

移动端页面

1.移动端需要引入一个样式，meta

随便打开一个网站F12调成手机模式，复制meta

2.弹性盒子

一个div设置了display: flex; 就成了一个弹性盒子

因此我们把移动端界面布局称为div+flex布局

flex水平和垂直对齐方式

Document

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;

}

• 1
• 2
• 3
• 4

inline-flex行内弹性盒子

Document

span {

height: 100px;

width: 300px;

border: 1px solid;

/* 水平居中,垂直居中 */

display: inline-flex;

justify-content: center;

align-items: center;

}

inline-flex用法和flex一样

行内弹性盒子

flex-grow剩余空间分配方式

1.平均分配

Document

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;

}

1

2

3

2.某一个子元素占据全部剩余空间

Document

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;

}

1

2

3

3.按需求分配

Document

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;

}

1

2

3

flex-direction盒子排列方向

Document

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;

}

1

2

3

盒子换行设置

Document

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;

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20