flex实现多列布局效果&对角线布局

2021-01-22 11:05:36 阅读：497 来源： 互联网

标签：flex child 布局 nth 10px div 多列 margin

　　题目：用 css 实现如下的多列布局效果：父元素宽度自适应，子元素数量随机可变的（假如 8 个），每一行有 3 个子元素，子元素之间的水平间距为 10px ，子元素的宽度自适应父元素的宽度（(父元素宽度 - 10px * 2) / 3），子元素的高度与本身的宽度成正比（比如 2:1 ）

效果如下：

涉及到的知识点：

1.flex布局相关

2.calc计算属性，（运算符号两遍要有空格）calc((100% - 10px * 2) / 6)

3. padding和margin的百分比相对的是父元素的宽度

4. :nth-child(3n):不要带运算符号*

　　html结构如下：div里面有8个p标签

<body>
	<div>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
	</div>
</body>

　　css如下:

div {
	width: 100%;
	flex-direction: row;
	flex-wrap: wrap;
	display: flex;
}
p {
	margin-right: 10px;
	padding-bottom: calc((100% - 10px * 2) / 6);
	border: 1px solid red;
	width: calc((100% - 10px * 2) / 3);
	margin-bottom: 10px;
}
p:nth-child(3n) {
	margin-right: 0px;
}

　　步骤一：使用flex布局，换行

　　步骤二：cacl计算出元素的宽度

　　步骤三：由于最后一行需要左对齐所以最好使用margin-right来控制间距，而不是用justify-content: space-between;

　　步骤四：使用nth-child让每行最后一个元素margin-right为0 才不会换到下一行

题目：实现一个对角线布局

　　效果如下

html：

<body>
	<div><p></p></div>
	<div><p></p></div>
	<div><p></p></div>
</body>

　css：关键点就一个justify-content不同的对齐方式

div {
	display: flex;
}
div:nth-child(1) {
	justify-content: flex-start;
}
div:nth-child(2) {
	justify-content: center;
}
div:nth-child(3) {
	justify-content: flex-end;
}
p {
	width: 33%;
	border: 1px solid red;
	padding-bottom: 33%;
}

标签：flex,child,布局,nth,10px,div,多列,margin
来源： https://www.cnblogs.com/longlongdan/p/14312075.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

flex实现多列布局效果&对角线布局