关键词：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