水平对齐方式 · 我的工作笔记

# 水平对齐方式 > justify-content 属性 ## 结构 ``` <div id="result"> <div style="background: darkgreen"></div> <div style="background: red"></div> <div style="background:darkorange"></div> <div style="background: hotpink"></div> </div> ``` ## CSS ~~~ #result { display: flex; justify-content: ?????; } ~~~ - flex-start (默认值。项目位于容器的开头) ![](https://img.kancloud.cn/8a/45/8a45c69ce5365c29338798b15cc89516_408x109.png) - flex-end ![](https://img.kancloud.cn/54/d4/54d48148672b3f863b8df5389648c152_402x112.png) - center ![](https://img.kancloud.cn/3f/5c/3f5cb988957054e4ea370262778907aa_402x113.png) - space-between ![](https://img.kancloud.cn/e0/0b/e00beaf0bc8b8a2aed750106e181b0ba_405x112.png) - space-around ![](https://img.kancloud.cn/ef/a2/efa2cac7941772423a64f1b5232002dd_402x111.png) - initial ![](https://img.kancloud.cn/26/c9/26c90bbaac1843c4cdb0d29f395683a4_401x110.png)