1.左右两列,每列小box水平居中效果
.discussList-main {
display: flex;
padding: 40rpx;
padding-top: 0;
box-sizing: border-box;
}
.discussList-main .discussList {
/* 给予左右两列相同的宽度 */
flex:1;
}
.discussList-main .discussList .dL .discuss{
/* 每个小box自动水平居中 */
display: flex;
justify-content: center;
}
.discussList-main .discussList .dL .discuss .boxWrap{
width:325rpx;
}
ps:为什么要在.discussList 之后再加一个层级.dL？
因为flex会自动补全高度,和父容器保持一致高
--by Affandi ⊙▽⊙
1.左右两列,每列小box水平居中效果 ps:为什么要在.discussList 之后再加一个层级.dL？ 因为f...
flex是弹性布局（Flexible Box）中常用到的属性，是flex-grow, flex-shrink ...
常常我们布局会使用到flex，但布局中存在一些问题，比如无法设置宽度 display: flex;flex-wra...
认识flex布局 flex布局（Flexible 布局，弹性布局）开启了flex布局的元素叫flex contai...
来源：新手布局福音！微信小程序使用flex的一些基础样式属性作者：Nazi Flex布局相对于以前我们经常所用到的...
这里用到的是flex布局的方案： flex-grow属性flex-grow属性定义项目的放大比例，默认为0，即如果...
FLEX布局 一种新的布局方式，flex布局 flex布局与方向无关 flex布局可以实现空间自动分配、自动对齐。...
Flex，(Flexible Box），意为"弹性布局"采用 Flex 布局的元素，为 Flex 容器（flex ...
css flex布局 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器...
一、Flex 布局教程：语法篇 Flex 布局教程：语法篇 二、Flex 布局教程：实例篇 Flex...
本文标题：flex布局常用到的研究
本文链接：https://www.haomeiwen.com/subject/bxhsnctx.html
网友评论