justify-content属性详解

justify-content

定义了flexbox flexbox内的元素在主轴的方向上的对齐方式。

它可以设置以下几种对齐方式：

靠近一方

justify-content:center；　　/*flex元素都居中排列，没有间距*/
justify-content:start；　　 /*flex元素从行/列首开始排列，没有间距*/
justify-content:end；　　　 /*flex元素从行/列尾开始排列，没有间距*/
justify-content:flex-start；　　/*从行首起始位置开始排列*/
justify-content:flex-end；　　　/*从行尾位置开始排列*/
justify-content:left；　　 /*pack items from the left*/
justify-content:right；　　/*Pack items from the right*/

均匀分布

以上的首尾元素指的是 每一行/列 的第一个和最后一个元素。

justify-content: space-between;  /* 均匀排列每个元素
                                   首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around;  /* 均匀排列每个元素
                                   每个元素周围分配相同的间距，
　　　　　　　　　　　　　　　　　　　 首尾元素与父容器边界的距离是另一边间距的一半 */
justify-content: space-evenly;  /* 均匀排列每个元素
                                   每个元素之间的间距相等，包括首尾元素与边框的间距 */
justify-content: stretch;       /* 均匀排列每个元素
                                   'auto'-sized 的元素会被拉伸以适应容器的大小 */

溢出控制

justify-content: safe center;   　　/* 如果元素排列后溢出，safe属性将用start作为默认排列方式 */
justify-content: unsafe center;　　　/* 元素溢出后没有调整 */

全局属性

justify-content: inherit;
justify-content: initial;
justify-content: unset;

注意

当同时给flex元素设置了以下两个属性时，

• 主轴方向上的长度 width / height
• margin : 0 auto

justify-content属性设置的对齐方式不起作用。

推荐一个有趣的 flex练习小游戏 ：Flexbox Froggy - A game for learning CSS flexbox