flex布局

利用flex布局实现某一行元素在一个容器内的最底部，并使该行元素的子元素靠右侧

效果图

Html结构

<div class="container">
	<div class="btn-container">
		<button>按钮1</button>
		<button>按钮2</button>
	</div>
</div>

Css结构

.container {
	width: 200px;
	height: 300px;
	border: 1px solid blue;
	display: flex;
	flex-direction: column;//竖向布局
	justify-content: end;//在整个布局的最后
}
.btn-container {
	display: flex;
	flex-direction: row;//横向布局
	justify-content: end;//在整个布局的最后
	//控制元素不变形(不设置该属性时该元素会随着父元素的高度变化)
	flex-shrink: 0;
}

属性解释

• flex-direction: 布局方向
• justify-content: 子元素的位置摆放
• flex-shrink: 设置为0时控制元素不变形