移动端web开发布局

 

目录

flex布局：

flex布局父项常见属性：

flex布局子项常见属性：

REM适配布局：

响应式布局：

---

---

flex布局：

需要先给父类盒子设置display：flex

flex是flexiblebox的缩写，意为"弹性布局",用来为盒状模型提供最大的灵活性，任何一个容器都可以
指定为flex布局。
当我们为父盒子设为flex布局(display属性)以后，子元素的float,clear和vertical-align属性将失效。
伸缩布局= 弹性布局= 伸缩盒布局= 弹性盒布局

flex布局的元素在默认下是不会换行的，会缩小子元素的大小宽度放在那一行中。如果需要自动换行，在后面属性中进行设置。

flex布局父项常见属性：

主轴， 是否换行。合并的。

元素是按照主轴方向来进行排列的。

---

侧轴拉伸时，子盒子不设置高度/宽度，主要是看主轴和侧轴是谁。 只能使用于单行元素，若盒子有多行元素，则不行。

若要对多行则需下则：

---

---

flex布局子项常见属性：

flex：

三个子盒子，第二个单独占剩余的一份。 第1，3个盒子大小固定

这个份数按有几个flex，在所给有flex的几分之几来进行划分剩余部分（没有规定大小的盒子的总范围）

---

改变盒子的排列顺序：

---

REM适配布局：

此处为语雀内容卡片，点击链接查看：https://www.yuque.com/aitifenqiudechong/wgvuq2/yq7dbfsn6cg9n9y0

---

响应式布局：

即需要先给一个大盒子，在大盒子中写元素，直接调整大盒子实现小盒子的变化，但注意在使用的时候，是需要用百分号设置宽度。

js的引入格式：