初识Flex（弹性布局）持续更新中...

最新推荐文章于 2024-05-11 17:14:27 发布

置顶

Brain_Destroyer

最新推荐文章于 2024-05-11 17:14:27 发布

阅读量180

点赞数

文章标签： css flex

本文链接：https://blog.csdn.net/Brain_Destroyer/article/details/111466174

版权

flex（弹性布局）

布局原理
弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

当我们把父级设为flex布局以后，子元素的flot、clear和vertical-align属性都将失效。
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局的元素，称为flex容器。它的所有子元素自动成为容器成员，称为flex项目。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性布局原理</title>
    <style>
        /* 父容器 */
        
        div {
    
            display: flex;
        }
        /* 子元素项目 */
        
        span {
    }
    </style>
</head>

<body>
    <div>
        <span>弹</span>
        <span>性</span>
        <span>布</span>
        <span>局</span>
    </div>
</body>

</html>

div，就是flex父容器。
span，就是子容器flex项目。
子容器可以横向排列也可以纵向排列

总结Flex布局的原理：
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

1.常见的父项属性

以下6个属性是对父亲元素设置的

flex-direction：设置主轴的方向
flex-wrap：设置子元素是否换行
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
justify-content：设置主轴上的子元素排列方式
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）

flex-direction设置主轴的方向（重点）

1.主轴与侧轴
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴

默认主轴方向就是 X 轴方向，水平向右
默认侧轴方向就是 Y 轴方向，水平向下

2.属性值
flex-direction属性决定主轴的方向（即项目的排列方向）
注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

在这里插入图片描述

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
    
            /* 给父容器设置弹性布局 */
            display: flex;
            /* 默认的是主轴是从左到右（X轴），子元素会跟着主轴来进行排列*/
            /* flex-direction: row; */
            /* 让主轴（X轴）反转，从右到左排列 */
            /* flex-direction: row-reverse; */
            /* 让主轴转为（Y轴），从上往下排列 */
            /* flex-direction: column; */
            /* 让主轴转为（Y轴）反转，从下往上排列 */
            /* flex-direction: column-reverse; */
            width: 800px;
            height: 500px;
            background-color: #b15bff;
        }
        
        span {
    
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2

最低0.47元/天解锁文章

Brain_Destroyer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Flex（弹性布局）持续更新中...

flex（弹性布局）布局原理弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们把父级设为flex布局以后，子元素的flot、clear和vertical-align属性都将失效。伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局采用flex布局的元素，称为flex容器。它的所有子元素自动成为容器成员，称为flex项目。<html lang="en"><head> <meta charset="UTF-8"&g
复制链接

扫一扫