[笔记] justify-content 轻松搞定元素对齐

display: flex使用方法

这个属性主要用于Flex容器中，它决定了容器内部元素是如何沿着主轴（main-axis）进行排列的。不同的值，会有不同的排列效果

个属性不仅适用于Flex布局，还可以在网格（Grid）布局中沿着行内轴（inline axis）使用。 ? 体验这些效果 ? 想要亲自体验一下这些效果吗？不妨试着在你的项目中应用这些属性，看看它们是如何改变你的布局的。

实现代码

1
2
3
4

.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

参考链接

display - CSS：层叠样式表 | MDN (mozilla.org)

justify-content 轻松搞定元素对齐_哔哩哔哩_bilibili