布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性

一、Flex弹性盒子模型

display:flex/inline-flex/-webkit-flex，设置flex布局之后，子元素的float、clear、vertical-align会失效 

Flex容器下的子元素都自动成为容器成员

1.容器的6属性

(flex-direction flex-wrap) flex-flow justify-content align-items align-content

1.1 flex-direction:决定主轴的方向（项目的排序方向）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

 

1.2 flex-wrap：它规定主轴上项目排不下时，如何换行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap（默认值）:不换行

wrap:往下换行 

wrap-reverse:往上换行

1.3 flex-flow是flex-direction+flex-wrap的简写形式 默认值是row wrap

1.4 justify-content:定义了项目在主轴上的对齐方式

具体对齐的方式与主轴的方向有关 

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

（主轴从左至右时）

flex-start（默认值）:左对齐 

flex-end:右对齐

center:居中

space-between:两端对齐，项目之间的间隔都相等

space-around:每个项目两侧的间隔相等，项目之间的间隔是项目距边框间隔的两倍

1.5 align-items：定义了项目在垂直交叉轴上如何对齐

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start:跟垂直轴start对齐

flex-end:跟垂直轴的end端对齐

center:跟垂直轴的中点水平线对齐

strench(默认值)：项目设置了auto或是没有设高度的，将拉长整个高度 

baseline:基于项目的第一行文字对齐

1.6  align-content：多根轴线的对齐方式

多行垂直对齐方式,值同justify-content  +个stretch 

2.项目的6个属性

order flex-grow flex-shink flex-basis flex align-self

 2.1 order 定义项目的排列顺序，数值越小越靠前，默认0

2.2 flex-grow 项目的放大比例，默认0，有剩余空间也不会放大; 如果所有项目的flex-grow属性为1，则他们将等分剩余空间（如果有的话），如果其中一个为2，则他是其他项目的2倍宽度。

2.3 flex-shrink 项目的缩小比例，默认为1，如果空间不够，会缩小; 如果有一个项目的flex-shrink为0，其他都为1，空间不足时，前者不缩小

2.4 flex-basis 项目本来的大小 默认为auto

2.5 flex   它=flex-grow+flex-shrink+flex-basis 默认值为 0 1 auto 后两个属性可选

               该属性有2个快捷键 auto= 1 1 auto 

                                              none= 0 0 auto

当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%

2.6 align-self 允许单个项目与其他项目有不同的对齐方式，会覆盖掉align-items属性，默认值auto（表示继承父元素的align-items）

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

 

 https://www.cnblogs.com/lixuemin/p/6110434.html

二、垂直居中几种方式

https://www.cnblogs.com/clj2017/p/9293363.html

三、position

四、自适应布局

H5移动端页面自适应普遍使用的方法：<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

使用rem,它是一个相对文档根元素的单位 （em 是相对于当前父元素内文本的字体尺寸，如果父元素字号为10px,n那么子元素1em=10px。。不好用），可以使用js控制根元素的字号，达到自适应的目的

使用百分比---适合简单的页面

使用流动布局 float: right;width: 70%; 不会在水平方向overflow（溢出），避免了水平滚动条的出现