好久没有布局了，就闲来没事找了一个pc端页面练练手。其中想到一些知识点是以前都接触过的，但是却没有总结过这些东西，想在此做一些总结。

1、display:flex

        这个属性是弹性盒布局的开始，它通常是使用在父元素标签上；当中也有几个属性使用在父元素标签上的。

例如：

1、flex-direction：改变主轴方向。通俗理解：子元素在父级中，是横向排列（row），还是纵向排列（column），还是横向反向排列(row-reverse)，还是纵向反向排列（column-reverse），默认是横向正序排列。

2、justify-content：规定子元素在主轴方向上的排列方式。通俗理解：子元素是整体居中（center），还是整体居左（默认flex-start），还是整体居右（flex-end），还是左右两遍不留缝隙均匀分布（space-between），还是左右两边留缝隙均匀分布（space-around）。我用的比较多，可以代替float：left。

3、align-items：规定子元素在侧轴方向上的对齐方式。通俗理解：子元素全都靠近侧轴的开始位置（flex-start），或者是紧靠侧轴结束位置（flex-end），或者在测轴居中的位置（center），如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐（baseline），或者是子元素尽量贴近父元素的高度（stretch）。

4、flex-wrap：指定子元素的换行方式。弹性容器位于一行，有可能子元素会溢出（nowrap ），或者是父元素是多行，子元素溢出的会归并到下一行（wrap ），或者是子元素溢出换行发生翻转，向上一行溢出（wrap-reverse）。

5、align-content：用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。 （stretch ）各行将会伸展以占用剩余的空间，或者是各行向弹性盒容器的起始位置堆叠（flex-start），或者是各行向弹性盒容器的结束位置堆叠（flex-end），后者是各行向弹性盒容器的中间位置堆叠（center），或者是各行在弹性盒容器中平均分布（space-between），或者是 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半（space-around）。

2、div在div中垂直水平居中

其实这个是有很多方法的，可以做兼容不做兼容，可以看另一篇文章了解更多css布局方案。

试了很多方法，表示发现一种方法是最好用的绝对定位，子级添加代码如下：

position:absolute;left:50%;top:50%;margin-left:-（自身一半w）;margin-top:（-自身一半h）

3、画一条线

1、可以用hr画一条细线；

2、可以将一个div的高设置成1px完成一条线，若有渐变效果，则需要使用此方法完成

4、div嵌套不要太多层，flex少用在pc端会有bug。