前端 父盒子设置display:felx, 弹性布局justify-content: space-between;, 父盒子遍历出来的最后一行,里面的子元素, 需要靠左对齐 ,请问怎么设置
时间: 2024-03-16 13:43:52 浏览: 30
可以在父盒子指定最后一行的样式,将其子元素的对齐方式设置为左对齐。具体代码如下:
```css
.parent {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.parent::after {
content: "";
flex: auto;
}
.parent > :nth-last-child(-n+2) {
margin-right: auto;
}
.parent > :last-child {
margin-right: 0;
}
.parent:last-child > :nth-last-child(-n+2) {
margin-right: 0;
}
```
在上述代码中,通过`::after`伪元素在最后一行添加一个自动增长的空白盒子,使得最后一行的所有子元素自动向左对齐。同时,通过`:nth-last-child`伪类选择倒数第二个子元素,将其右侧的`margin-right`设置为`auto`,可以让最后一行的子元素在父盒子的剩余空间中向左对齐。最后,通过对最后一个子元素的特殊处理,避免了在最后一行出现多余的右边距。
希望能够解决你的问题。
相关问题
display:felx 居中
要将flex容器内的元素居中,可以使用以下CSS属性和值组合:
```css
display: flex;
justify-content: center;
align-items: center;
```
其中,`display: flex;`将容器设置为弹性布局。`justify-content: center;`将元素在主轴上居中对齐,而`align-items: center;`将元素在交叉轴上居中对齐。这样,flex容器内的元素就会水平和垂直居中了。\[3\]
#### 引用[.reference_title]
- *1* [display:flex 元素垂直居中,有间距,右对齐,gap属性](https://blog.csdn.net/xutongbao/article/details/119994687)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [什么是弹性(display: flex)布局 ?](https://blog.csdn.net/weixin_41044151/article/details/114071215)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
-bash: felx: command not found
这个错误提示是因为你输入的命令 felx 拼写错误了,正确的命令应该是 flex。flex 是一个词法分析器生成工具,在 Unix、Linux 和类 Unix 系统上广泛使用。你可以先使用命令 sudo apt-get update 更新一下软件源,然后再使用命令 sudo apt-get install flex 安装 flex。安装完成后,就可以在终端中使用 flex 命令了。