CSS - 弹性布局快速入门

最新推荐文章于 2022-12-30 08:00:00 发布

嗯嗯**

最新推荐文章于 2022-12-30 08:00:00 发布

阅读量350

点赞数 2

分类专栏：前端知识文章标签： css flex 弹性布局

本文链接：https://blog.csdn.net/weixin_39651356/article/details/127489103

版权

前端知识专栏收录该内容

25 篇文章 0 订阅

订阅专栏

文章目录

1. 概述

开启flex布局： 最外层容器设置【display:flex】，容器内的成员即是flex项目

2. flex容器内的轴线定义： 水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做（main start），结束位置叫做（main end）；交叉轴的开始位置叫做（cross start），结束位置叫做（cross end）== 开启flex布局，默认容器内元素按主轴方向（即横向）进行排列

如下图：flex容器内的轴线定义

在这里插入图片描述

3. 水平对齐的方式justify-content：如下脑图

4. 垂直对齐的方式align-items：如下脑图

5. 元素排列方式flex-direaction：如下脑图

6. 元素排列顺序order：值越小，排的越前

7. 单个元素的垂直对齐方式align-self == 与弹性盒子的属性align-items是基本差不多：如下脑图

8. 决定项目在有剩余空间的情况下是否放大flex-grow：如下脑图

9. 用于决定项目在空间不足时是否缩小flex-shrink：如下脑图

10. 用于设置元素的宽度（优先级比width高）flex-basis：如下脑图

11. 属性组合flex：如下脑图

2. 使用

2.1 Demo


<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        .size-box {
            width: 250px;
            /* 1vh表示%1视口高度 100即表示100%视口高度 */
            /* height: 50vh; */
            /* margin-bottom: 20rem; */
            height: 400px;
            background: red;
        }
        .size-item {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border: 1px solid black;
        }
        .flex-box {
            background: silver !important;
            margin-top:100px;
            background: silver;
            display: flex;
            /* 水平对齐方式： center容器内的元素进行水平居中 flex-end：右对齐  flex-start：左对齐  space-between：左右两端对齐，且子元素之间距离相等 space-around：子容器之间的间距是左右两侧元素离父容器边界的两倍 space-evenly：间距都一样*/
            /* justify-content: center;          */
            /* justify-content: flex-end; */
            /* justify-content: flex-start; */
            /* justify-content: space-between; */
            /* justify-content: space-around; */
            justify-content: space-evenly;
            /* justify-content: center; */
           
            /* 垂直对齐方式：center：垂直居中对齐 flex-start顶部对齐  flex-end底部对齐  */
            /* align-items: flex-start; */
            /* align-items: center; */
            align-items: flex-end;
           
            /* 元素排列方式：row横向排列从左到右 row-reverse横向排列从右到左 column从上到下排列  column-reverse从下到上排列  */
            flex-direction: row;
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            /* flex-direction:  column-reverse; */
            /* 控制元素是否可以多行显示，就宽度不够，元素可自行换行。不支持多行显示则css强制设置所有元素的宽度足够其显示在一行（默认） */
            /* flex-wrap: nowrap */
            flex-wrap: wrap
            /* flex-wrap: wrap-reverse */
        }
        .flex-item {
            background-color: orange;
           
            /* flex: 1 1 auto; */
           
        }
        .flex-item:nth-child(1) {
            /* 控制弹性容器内的子元素顺序，数值越小优先级越高 */
            order: 2;
        }
        .flex-item:nth-child(2) {
            order: 1;
            /* 控制该弹性容器的子元素的垂直对齐方式 */
            align-self: center;
            /* align-self: flex-start; */
            /* align-self: flex-end; */
           
        }
        .flex-item:nth-child(3) {
            order: 3;
            /* 取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；汪意，即便设置了固定宽度，也会放大。假设默认三个项目中前两个项目都是0,最后一个是1,最后的项目会占满剩余所有空间 */
            flex-grow: 0;
            /* 取值：默认1,用于决定项目在空间不足时是否缩小，默认项目都是1,即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。但如果某个项目flex-shrink设置为0,则即便空间不够，自身也不缩小。 */
            /* flex-shrink: 1;  */
            /* 取值：默iAauto,用于设置项目宽度，默iAauto时，项目会保持默认宽度，或者[Xwidth为自身的宽度，但如果设置了flex-basis,权重会width属性高，因此会覆盖widtn属性。 特点优先级比width高 */
            /* flex-basis: auto; */
           
            /* flex-glow、flex-shrink、flex-basis的组合 */
            /* flex: 1 1 auto; */
        }
    </style>
</head>
<body>
    <h3>弹性布局</h3>
    <div class="ordinary-box size-box">
        <div class="ordinary-item size-item">box-item1</div>
        <div class="ordinary-item size-item">box-item2</div>
        <div class="ordinary-item size-item">box-item3</div>
    </div>
    <div class="flex-box size-box">
        <div class="flex-item size-item">flex-box-item1</div>
        <div class="flex-item size-item">flex-box-item2</div>
        <div class="flex-item size-item">flex-box-item3</div>
    </div>
</body>
</html>