space-between:在容器中平均分布多行项目,使第一行在容器的顶部,最后一行在容器的底部,剩余的行平均分布在中间。 space-around:在容器中平均分布多行项目,使每行周围具有相等的空间,包括顶部和底部。 space-evenly:在容器中平均分布多行项目,使每行之间和周围都具有相等的空间。 stretch(默认值):在容器中平均分布...
center: 居中 space-between:两端对齐,项目之间的间隔都相等。 space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。 space-evenly:是匀称、平等的意思。也就是视觉上,每个flex子项两侧空白间距完全相等。 3.5 align-items属性 align-items属性定义项目在交叉轴上如何对齐。 .box{alig...
space-around会让第一个Flex项目的盒子起始边缘与Flex容器主轴起点间距和最后一个Flex项目的盒子结束边缘与Flex容器主轴终点间距相等,并且等于其他相邻两个Flex项目之间间距的一半。当Flex容器中只有一个Flex项目时,其表现行为和center等同 space-evenly会让第一个Flex项目的盒子起始边缘与Flex容器主轴起点间距和最后一个Fle...
.container{/* display: flex; *//* justify-content: space-evenly; *//* align-items: center; */}.s1{.s1{width:100px;height:100px;background-color:aquamarine;}.s2{width:100px;height:100px;background-color:rebeccapurple;}.s3{width:100px;height:100px;background-color:greenyellow;}.s4{wi...
space-around:行均匀分布,两侧有相等的空间。 space-evenly:行均匀分布,包括行与行之间和两侧的空间均相等。 justify-content 对齐主轴(justify-content)属性用于沿着当前行的主轴对齐弹性盒子或网格容器的项。对于行来说,主轴是水平的,对于列来说,主轴是垂直的。
flex-start(缺省)：从启点线开始顺序排列flex-end：相对终点线顺序排列center：居中排列space-between：项目均匀分布，第一项在启点线，最后一项在终点线space-around：项目均匀分布，每一个项目两侧有相同的留白空间，相邻项目之间的距离是两个项目之间留白的和space-evenly：项目均匀分布，所有项目之间及项目与边框之间...
-space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。 -space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 -space-evenly:每个项目两侧的间隔以及与边缘的间隔相等。 -stretch(默认值):轴线占满整个交叉轴。
space-evenly、start、end、self-start、self-end、left、right、first baseline、last baseline、safe、unsafe 在 flex 布局中通用性低 align-content align-content 属性设置了如何沿着 flex 容器的交叉轴和在 flex 元素之间和周围分配空间。默认值为 stretch。
space-evenly: 均匀排列每个元素,每个元素之间的间隔相等 space-between: 均匀排列每个元素,首个元素放置于起点,末尾元素放置于终点 例如下图demo: space-evenly效果 space-between效果 由于space-evenly的兼容性较差,平时我们布局经常又想要均匀的排列元素
space-between: 两端对齐,项目之间的间隔都相等; space-around: 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。 space-evenly: evenly是匀称、平等的意思。也就是视觉上,每个flex子项两侧空白间距完全相等。 4、align-items : 每一行中的子元素上下对齐方式。