flex布局： justify-content

最新推荐文章于 2025-02-19 17:40:35 发布

浪豪

最新推荐文章于 2025-02-19 17:40:35 发布

阅读量651

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.youkuaiyun.com/Chinachenh/article/details/126425727

版权

前端专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了CSS Flexbox布局中justify-content属性的用法，包括左对齐、右对齐、居中、两端对齐以及不同间距分布方式的示例，帮助开发者掌握flex容器中子元素的水平排列方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	   /*浏览器默认 左对齐*/
        justify-content: flex-start;
        /* 右对齐 不改变子元素位置*/
        justify-content: flex-end;
        /*居中对齐*/
        justify-content: center;
        /*两端对齐 间距相等*/
        justify-content: space-between;
        /*子元素之间的间距一样  两端的间距是子元素之间间距的一半*/
        justify-content: space-around;
        /*两端的间距跟子元素之间的间距一样*/
        justify-content: space-evenly;

示例
  <style>
      .container {
            width: 500px;
            height: 500px;
            background-color: orange;
            display: flex;
            /*浏览器默认 左对齐*/
            justify-content: flex-start;
            /* 右对齐 不改变子元素位置*/
            justify-content: flex-end;
            /*居中对齐*/
            justify-content: center;
            /*两端对齐 间距相等*/
            justify-content: space-between;
            /*子元素之间的间距一样  两端的间距是子元素之间间距的一半*/
            justify-content: space-around;
            /*两端的间距跟子元素之间的间距一样*/
            justify-content: space-evenly;
        }
        .item {
            width: 100px;
            height: 100px;
        }
        .item1 {
            background-color: red;
        }
        .item2 {
            background-color: pink;
        }
        .item3 {
            background-color: green;
        }
        .item4 {
            background-color: purple;
        }
    </style>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
    </div>