CSS弹性布局

GanGuaGua

已于 2025-05-11 15:38:50 修改

阅读量273

点赞数 2

文章标签： css 前端

于 2025-05-10 13:41:29 首次发布

本文链接：https://blog.csdn.net/Visual_progress/article/details/147835560

版权

弹性布局

弹性布局是CSS3中一种现代的布局模式，专门用于设计一维布局（行或列）。它提供了更有效的方式来分配容器内项目的空间和对齐方式，即使项目的大小未知或动态变化。

display:flex

flex是flexible-box的缩写，用于设定弹性盒子

任何的父元素都可以设置flex

当设立display：flex后float，clear，vertical-align都会失效

使用格式

display: flex;

让当前标签下的子元素全部变为弹性项目从而子元素拥有块级元素的特性，可以设置宽度和高度，如果不设置高度会拉伸子元素的高度以填满容器。

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 500px;
            width: 500px;
            background-color: aqua;
            display: flex;
        }
        div span{
            height: 200px;
            width: 60px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>one</span>
        <span>two</span>
        <span>three</span>
    </div>
</body>
</html>

演示结果

我们可以看到在<div></div>内的子元素都变成了可以设置宽高的弹性项目

justify-content

设置主轴子元素的排列方式

使用格式

justify-content:space-between;

属性

值	描述
flex-start	默认值，从框架开始的位置排序
flex-end	从框架后面开始排序
center	排序位于框架中央
space-around	每个元素间都有间隙
space-between	每个元素间都有间隙，并且第一个元素和最后一个元素也有间隙

flex-start

flex-end

center

space-around

space-between

align-items

设置侧轴上元素排列的方式

使用格式

align-items: center;

属性值

值	描述
stretch	默认值，行拉锯拉伸以占据空间
center	从行的中央排序
flex-start	从行的开始位置排序
flex-end	从行的结尾开始排序

stretch