display: flex使用方法
这个属性主要用于Flex容器中,它决定了容器内部元素是如何沿着主轴(main-axis)进行排列的。不同的值,会有不同的排列效果
个属性不仅适用于Flex布局,还可以在网格(Grid)布局中沿着行内轴(inline axis)使用。 🎉 体验这些效果 🎉 想要亲自体验一下这些效果吗?不妨试着在你的项目中应用这些属性,看看它们是如何改变你的布局的。
实现代码
.demo{
display: flex;
justify-content: center;
}
justify-content-元素参数
center | 元素会集中在容器中间。 |
flex-start | 元素会靠近容器的开始处。 |
flex-end | 元素会靠近容器的结束处。 |
space-between | 元素之间的间隔相等,第一个元素在容器开始处,最后一个元素在容器结束处。 |
space-around | 元素周围的间隔相等。 |
space-evenly | 元素和边界之间的间隔都是相等的。 |
效果
flex-start
center
flex-end
space-between
space-evenly
space-around