HTML之flex布局_flex-wrap: wrap;

flex布局老是忘，记录一下吧

flex-wrap:wrap; 属性：让弹性盒元素在必要的时候拆行，也就是换行。

• （1）nowrap（默认）：不换行。
• （2）wrap：换行，第一行在上方。
• （3）wrap-reverse：换行，第一行在下方。(适合消息)

如何实现那种平铺式flex布局？关键在于after伪元素

.shelf{

display: flex;

flex-direction: row;

flex-wrap: wrap;

justify-content: space-around;

align-content: flex-start;

}

 

.shelf::after {

content: "";

/*这宽度是子元素的宽度，用来解决布局问题，足够长就可以了，*/

width: 210rpx;

}

rpx是微信小程序中css的尺寸单位，可以根据屏幕宽度进行自适配。调整一个最合适的值就可以了。但是变化太大也是会失效的。并不是一个好办法。一般宽度就是item的宽度。

说实话，够呛，一般达不到，为什么呢？因为自动排列的根据就是剩下的空间不够了，才自动向下移动，这就意味着向下移动在前，对齐，调整间隔在后。你不知道一行多少个item，那么你就无法进行补位。实际上你需要计算容器的边框长度，获得一行多少个item，然后添加一个最小值就可以了。

规定屏幕宽度为750px，譬如iphone6，屏幕宽度为375px，共有750个物理像素，则1rpx = 0.5px。

设备rpx换算px：屏幕宽度/750，px换算成rpx:750/屏幕宽度；

iPhone5 1rpx = 0.42px 　　     1px = 2.34px ；

iPhone6 1rpx = 0.5px 　　　　1px = 2rpx ；

iPhone6s 1rpx = 0.552px 　　 1px = 1.81rpx；

添加align-items:center以后,侧轴居中了,效果如下:

align-content 只适用多行的flex容器（也就是flex容器中的子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体（属性值为：flex-start、flex-end、center时）进行对齐。

 

每日一个小常识：

:before和::before写法是等效的; :after和::after写法是等效的
不同点

:before/:after是Css2的写法，::before/::after是Css3的写法
:before/:after 的兼容性要比::before/::after好 ，
不过在H5开发中建议使用::before/::after比较好
注意

这些伪元素 要配合content属性一起使用
这些伪元素 不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
这些伪元素 的特效通常要使用:hover伪类样式来激活