滚动轴不占用滚动区域；容器添加背景图片添加；弹性盒模型align-self、order属性

花有重开时，人无再少年

已于 2022-07-15 11:15:57 修改

阅读量196

点赞数 1

分类专栏：前端笔记文章标签： css3

于 2022-07-15 10:55:29 首次发布

本文链接：https://blog.csdn.net/Anyway_han/article/details/125799979

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

笔记

2 篇文章 0 订阅

订阅专栏

滚动轴不占用滚动区域

overflow: overlay;

容器添加背景图片

background: url('./images/nature.png') no-repeat center center/conver;

弹性盒模型align-self属性

.container {
	display: flex;
	align-items: flex-start;
}
.item {
	background:#f4f4f4;
	border: #cc solid 1px;
	flex-basis: 100px;
}
.item-1 {
	order: 3; // order 数值越小, 越靠前
}
.item-2 {
	aligns-self: center; // 元素居中显示
	order: 2;
}
.item-3 {
	order: 1;
}

...
<div class="container ">
	<div class="item item-1">
		<h3>Item 1</h3>
	</div>
	<div class="item item-2">
		<h3>Item 2</h3>
	</div>
	<div class="item item-3">
		<h3>Item 3</h3>
	</div>
</div>
...