CSS3的学习之flex布局

越努力越幸运508

1476人浏览 · 2025-10-12 17:02:22

越努力越幸运508 · 2025-10-12 17:02:22 发布

Flex布局基础概念

Flex布局（弹性盒子布局）是CSS3中用于页面布局的模块，通过display: flex或display: inline-flex启用。其核心思想是让容器能够动态调整子元素的排列方式，适应不同屏幕尺寸和设备。

容器属性

flex-direction
修改主轴方向，定义主轴方向，控制子元素排列方式：

row（默认）：水平排列，从左到右。
row-reverse：水平排列，从右到左。
column（常用）：垂直排列，从上到下。
column-reverse：垂直排列，从下到上。

flex-wrap
控制子元素是否换行：

nowrap（默认）：不换行父级不够时压缩。
wrap（常用）：换行，从上到下父级宽度不够，换行。
wrap-reverse：换行，从下到上。

justify-content
定义子元素在主轴上的对齐方式：

flex-start（默认）：左对齐。
flex-end：右对齐。
center（常用）：居中对齐。
space-between（常用）：两端对齐，项目间间距相等。
space-around（常用）：项目两侧间距相等，盒子之间的间距是两侧的两倍。
space-evenly（常用）：弹性盒子两侧与容器之间间距相等

align-items

定义子元素在交叉轴上的对齐方式：

stretch（默认）：拉伸填满容器，弹性盒子在没有高度才可以拉伸。
flex-start（常用）：顶部对齐。
flex-end：底部对齐。
center（常用）：垂直居中对齐。
baseline：基线对齐。

align-self（常用）(单独控制某个盒子的侧轴对齐方式)

align-content
控制多行子元素在交叉轴上的对齐方式（需flex-wrap: wrap生效）：

stretch（默认）：拉伸填满交叉轴。
flex-start：（常用）顶部对齐。
flex-end：底部对齐。
center：（常用）垂直居中对齐。
space-between：（常用）两端对齐。
space-around：（常用）均匀分布。
space-evenly :每行间距相同

子元素属性

flex-grow
定义子元素的放大比例，默认为0（不放大）。若为1，则占据剩余空间。

flex-shrink
定义子元素的缩小比例，默认为1（允许缩小）。若为0，则禁止缩小。

flex-basis
定义子元素的初始大小，默认为auto。可设为固定值（如100px）或百分比。

flex（常用）
简写属性，格式为flex-grow | flex-shrink | flex-basis。例如：

flex: 1 等价于 flex: 1 1 0。
flex: 0 auto 等价于 flex: 0 1 auto。

align-self
覆盖容器的align-items设置，控制单个子元素的对齐方式：

auto（默认）：继承父容器设置。
flex-start / flex-end / center / baseline / stretch。

示例代码

.  <style>
        /* 清除标签内外边距 */
        *{
            margin: 0;  /* 清除内外边距 */
            padding: 0; 
            box-sizing: border-box;   /* 边框盒子模型 */
        }
        /* 去掉列表点点 */
        li{
            list-style: none;
        }
        .box{
            margin: 50px auto; /*向下50px居中 */
            width: 1200px;
            height: 420px;
            border: 1px solid #000;
            border-radius: 10px; /*圆角 */   
        }
        .box ul{
             display: flex;
             /* 弹性盒子换行 */
             flex-wrap:  wrap;
             /* 调整主轴对齐方式 */
            justify-content: space-between;
            /* 改变交叉轴行对齐方式 */
            align-content: space-between;
            padding: 90px 40px 90px 60px;
            height: 418px;
           
        }
        .box li{
            display: flex;
           background-color: pink;
           width: 500px;
           height: 88px;
        }
        .box .pic{
           
            /* 改变图片的间距 */
            margin-right: 15px; 
        }
        .box img{
            width: 88px;
            height: 88px;
        }
        .box .text h3{
            line-height: 40px;
            font-size: 20px;
            font-weight: 40px;
            color: #333;
        }
        .box .text p{
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><div class="pic"><img src="../image/photo01.jpg" alt="" ></div>
                <div class="text">
                    <h3>抖音</h3>
                    <p>抖音，是字节跳动公司推出的一款短视频社交平台。</p>
                </div></li>
            <li><div class="pic"><img src="../image/photo01.jpg" alt="" ></div>
                <div class="text">
                    <h3>京东</h3>
                    <p>京东，是京东集团旗下品牌，是京东集团旗下电商平台。</p>
                </div></li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
<body>

代码解析：

display: flex; /* 块级元素 flex 弹性布局 */

justify-content: space-between; /* 均分 ,均等分 */

效果图：