Flex布局使最后一行居左

设置容器 justify-content: space-between; 效果如下:

Flex布局使最后一行居左_第1张图片

 如何设置最后一行居左,分为两种情况,容器宽度固定,容器宽度不固定;

1. 容器宽度固定

容器宽度固定时,需要保持每个元素之间的间隔相同,并且让剩余空间撑开。如果间隔不相同时,会造成最后一行和其它行位置错位。

保持间隔相同的两种方法:

1. 设置合适的容器宽度和margin,使元素间的间隔宽度相等

2. 设置合适的容器宽度和row-gap和column-gap,保持每个元素之间的间隔和设置的gap宽度相等

间隔不相等:

Flex布局使最后一行居左_第2张图片

 间隔相等:

Flex布局使最后一行居左_第3张图片 方法1实现间隔相等

Flex布局使最后一行居左_第4张图片 方法2实现间隔相等

然后将剩余空间撑开:

第一种方式,为容器的after设置flex:1,使其撑开剩余的空间

Flex布局使最后一行居左_第5张图片

 第二种方式,为最后一个子元素设置margin-right: auto;撑开剩余的空间

Flex布局使最后一行居左_第6张图片

 第三种方式:直接设置容器的  justify-content: flex-start;

2. 容器宽度不固定

宽度不固定时,使用上面的任何方法,都会造成间隔变化,导致元素错位。

可以放弃flex,使用grid布局;

Flex布局使最后一行居左_第7张图片

你可能感兴趣的:(#,CSS,前端,flex,css)