关键词：CSS伪元素before after ，盒子里面元素居中对齐的两种方法，flex弹性布局
weui写页面
用weui写页面
1. 首先，在最外层的盒子中，设定f
ont-size: 17px;
line-height: 1.47058824;
background-color: #ffffff;
相当于定义整个页面的基调。
2. 对CSS伪类元素before after 的理解
a. 写代码的时候不要先想着它是伪元素，要把它想成是真实的。即把它想成它是真实加持在元素身上的。
3. align-items: center;
a. 使元素位于容器的中心。
b. 使盒子里面的文本居中对齐的第二种办法
text-align:center;(文字水平居中)
line-height: n px;（使文字垂直居中）
4. flex（弹性布局）
A.flex弹性盒模型
盒模型
a. 对于某个元素，只有声明了 display:flex，那么他就成为了弹性容器，具有弹性布局的特性。
b. 弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列(即X轴)。
c. 弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。(即弹性元素里面还有套多个弹性元素)。
B. 主轴
a. 一般来说，flex主轴方向是从左到右的方向。---> flex-direction: row;
b. 主轴方向从上到下。---> flex-direction: column;
c. 主轴方向从右到左。--->flex-direction: row-reverse;
d. 主轴方向从下到上。 --> flex-direction : column-reverse;
C. 沿主轴排列的处理
a. 弹性元素永远沿着主轴排列。
b. 如果元素排不下怎么办？即超出盒子的宽度！
flex-wrap: nowrap| wrap | wrap-reverse (主轴上的元素不折行、折行、反向折行).
flex-wrap: wrap-reverse : 反向折行，是从容器底部开始的折行，但每行元素之间的排列仍保留正向。
wrap-reverse : 反向折行
D.当flex-wrap: nowrap时，即不折行时
a. flex-shrink 缩小比例（容器宽度<元素总宽度时如何收缩)
b. flex-grow 放大比例。
flex-shrink 默认为1 ，当元素总宽度大于容器宽度时，它会自动将元素等比缩小。
flex-grow 决定了当容器宽度有剩余时，要不要分配以及各个分配多少。
（1) 容器若有剩余宽度，不分配。即 flex-grow:0;
(2) flex-grow >0 时，它会将剩余的宽度比例分配。
（3） 加入剩余100px, flex-grow:7代表将额外获得70px ,flex-grow:3 代表将获得额外的30px.
(4) 无多余宽度时，flex-grow无效.
E. 如何固定尺寸大小（有时候不希望全部弹性布局，还需要有固定的尺寸）
方法1：设置width 和 height
方法2： flex-basis 属性，元素在主轴上的初始尺寸。
a. 两者都为0时，方法1根本没有显示；方法二根据内容撑开。
b. 如果方法1和2属性值相同，则flex-basis 优先级更高.
C. 如果flex-basis：auto时，设置了width则由它决定，若没有设置width，则由内容的宽度决定。
F. 复合属性flex
eg: flex : 2 1 100px; = flex-grow:2; + flex-shrink:1; + flex-basis: 100px;
其他的一些简写：
flex: 1 = flex: 1 1 0%；
flex: 2 = flex: 2 1 0%；
flex: auto = flex: 1 1 auto;
flex: none = flex: 0 0 auto; // 常用于固定尺寸 不伸缩
G.flex:1 和 flex:auto 的区别
a. flex-basis是指定初始尺寸，当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸.
b. 相反当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑.
H. 容器内部如何对齐
主轴：justify-content
交叉轴：align-items/align-content/align-self
a. 主轴上的对齐方式
justify-content
b. 交叉轴上的对齐方式
b1.交叉轴上的单行对齐 align-items: stretch | flex-start | flex-end | center | baseline
b1.1 : align-items为默认值 stretch ，元素没有设置具体尺寸时会将容器在交叉轴方向撑满。
b1.2: 为 flex-start 时，
flex-start
b1.3: 为 flex-end 时，
flex-end
b1.4 为 center 时，
center
b1.5 为 baseline 时，
baseline
b2. 交叉轴上的多行对齐 align-content: stretch | flex-start | flex-end | center | space-between | space-around
b2.1 align-content只对多行元素有效，会以多行作为整体进行对齐，容器必须开启换行。
b2.2 align-content: stretch 所有元素都是撑满交叉轴
b2.3 align-content管全局(所有行视为整体)
C. align-self单独对某个元素设置交叉轴对齐方式。
c1. 值与align-items相同.
c2. 可覆盖容器的align-items属性.
c3. 默认值为auto，表示继承父元素的align-items属性.
I. order：更优雅地调整元素顺序
调整元素顺序
order 越小，位置越靠前。
值相同时，以dom中元素排列为准
J. 总结
同时写主轴方向和是否折行
不折行时元素如何弹性处理
order
对齐方式
备注：此文章根据实例总结而来，访问更多请点我的github
网友评论