HTML之flex布局 | 您所在的位置:网站首页 › flex-wrap:wrap不换行怎么回事 › HTML之flex布局 |
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伪类样式来激活
|
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |