Flex弹性布局（二）

最新推荐文章于 2024-11-08 10:44:04 发布

YourLie_in_April

最新推荐文章于 2024-11-08 10:44:04 发布

阅读量200

点赞数 1

分类专栏： HTML、CSS 文章标签：前端

本文链接：https://blog.youkuaiyun.com/YourLie_in_April/article/details/124147701

版权

HTML、CSS 专栏收录该内容

12 篇文章

订阅专栏

align-content：统一设置所有的多轴交叉轴定位对齐方式。（当换行时，会出现多个交叉轴，属性值会定义每行相对于本行的交叉轴的定位。）

align-content: flex-start; start对齐。

align-content: flex-end; end对齐。（其他属性值类似于justify-content: ;。）

align-self: 在一根轴线下允许单个项目的对齐方式与其他统一的对齐方式不一样。（属性值类似于justify-content: ;。）

order： 设置排列顺序。（order值越小，排列顺序越靠前，默认值为0。）

flex-grow: X; 是否被放大，默认值为0，不会进行放大。（当其中一个定义为1时会把剩余的空间占满、如果每个盒子都设置为1时，会将外面的大盒子进行平均分配。）

flex-shrink: X; 是否被压缩，默认值为1，被压缩。（设置为0时表示不被压缩，如果每个都不被压缩，就会显示真正的大小，超过父元素大小。）

flex-basis:X; 表示宽度。（默认值为auto。）其优先级高于width，但效果与width相似，不会撑开大小，还是会被压缩。

属性连写：flex: flex-grow:X flex-shrink:X flex-basis:X;

特例：flex:1；等同于flex-grow: 1 1 auto;

小知识点：实现居中效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中</title>
    <style>
        *{margin: 0;padding: 0;}
        .box{
            width: 600px;
            height: 400px;
            border: 1px solid black;
            display: flex;
            /* 主轴水平居中 */
            justify-content: center;
            /* 垂直交叉轴居中（垂直居中） */
            align-items: center;
        }
        .item{
            width: 300px;
            height: 300px;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item"></div>
    </div>
</body>
</html>

总结：望各位大佬指正。