Flex 布局 ------ 父项常见属性-阿里云开发者社区

Flex 布局 ------ 父项常见属性

2023-06-12 62

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Flex 布局 ------ 父项常见属性

一、flex-direction 设置主轴的方向。

flex-direction：设置主轴的方向。

默认主轴方向就是 x 轴 ( 默认 flex-direction: row)，水平向右。

默认侧轴方向就是 y 轴，水平向下。

可以设置主轴方向为 y 轴 flex-direction: column

flex-direction 属性决定主轴的方向，元素跟着主轴排列。

flex-direction 属性值和说明如下

row：默认值从左到右

row-reverse：从右到左

column：从上到下

column-reverse：从下到上

<!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>flex主轴方向</title>
    <style>
        div{
            /* 给父级添加 flex 属性 */
            display: flex;
            width: 500px;
            height: 200px;
            background-color: pink;
            /* 默认的主轴是 x 轴 */
            /* 元素跟着主轴排列的 */
            flex-direction: row;   /*默认*/
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            /* flex-direction: column-reverse; */
        }
        div span{
            width: 150px;
            height: 100px;
            color:white;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

二、justify-content 设置主轴上的子元素排列方式。

justify-content: 设置主轴上的子元素排列方式。

justify-content 属性定义了项目在主轴上的对齐方式。
注意：在使用这个属性之前一定要确定好主轴是哪一个。
justify-content 属性值和说明如下

flex-start：默认值从头部开始，如果主轴是x轴，则从左到右。

flex-end：从尾部开始排列

center：在主轴居中对齐（如果主轴是x轴则水平居中）

space-around：平分剩余空间。

space-between：先两边贴边再平分剩余空间（重要）

<!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>
        div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是 x 轴 row */
            flex-direction: row;
            /* justify-content: 是设置主轴上子元素的排列方式 */
            justify-content: flex-start;
            justify-content: flex-end;
            /* 子元素居中对齐 */
            justify-content: center;
            /* 平分剩余空间 */
            justify-content: space-around;
            /* 先两边贴边，再分配剩余空间 */
            justify-content: space-between;
        }
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

三、flex-wrap 设置子元素是否换行

flex-wrap: 设置子元素是否换行。

默认情况下，项目都排在一条线（又称 “轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。

flex 布局中，默认的子元素是不换行的，如果装不开会缩小子元素的宽度，放到父元素里面。

左边：flex-wrap: nowrap; 默认不换行。

右边：flex-wrap: wrap; 换行。

flex-wrap 属性值和说明如下

nowrap：默认值，不换行。

wrap：换行。

<!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>
        div { 
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /* flex 布局中，默认的子元素是不换行的，如果装不开会缩小子元素的宽度，放到父元素里面。 */
            flex-wrap: wrap;
        }
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
</html>

四、align-items 设置侧轴上的子元素排列方式（单行）

align-items: 设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴（默认是 x 轴）上的排列方式，在子项为单项的时候使用。

主轴为 x 轴时

主轴为 y 轴时

align-items 属性值和说明如下

flex-start：默认值从上到下

flex-end：从下到上

center：挤在一起（垂直居中）

stretch：拉伸

<!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>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 默认的主轴是 x 轴 row */
            flex-direction: row;
            /* 设置主轴为 y 轴 column */
            /* flex-direction: column;  */
            justify-content: center;
            /* 需要一个侧轴居中 */
            align-items: center;
        }
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

五、align-content 设置侧轴上的子元素排列方式（多行）

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。
align-content 属性值和说明如下

flex-start：默认值在侧轴的头部开始排列

flex-end：在侧轴的尾部开始排列

center：在侧轴中间显示

space-around：子项在侧轴平分剩余空间

space-between：子项在侧轴先分布在两头，再平分剩余空间

stretch：设置子项元素高度平分父元素高度拉伸

align-content 和 align-items 的区别

align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸。

align-content 适用于换行（多行）的情况下（单行情况下失效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。

总结就是单行找 align-items ，多行找 align-content。

<!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>
        div {
            display: flex;
            width: 500px;
            height: 400px;
            background-color: pink;
            /* 换行 */
            flex-wrap: wrap;
            /* 因为有了换行，此时，我们侧轴上控制子元素的对齐方式用 align-content */
            /* align-content: flex-start; */
            /* align-content: flex-end; */
            /* align-content: center; */
            /* align-content: space-between; */
            align-content: space-around;
        }
        div span {
            width: 120px;
            height: 120px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
</html>

六、flex-flow 是 flex-direction 和 flex-wrap 属性的复合写法

flex-flow: column wrap; 等同于 flex-direction: column; flex-wrap: wrap;

两种方法同种效果

<!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>
        div {
            display: flex;
            width: 600px;
            height: 300px;
            background-color: pink;
            /* flex-direction: column;
            flex-wrap: wrap; */
            /* 把设置主轴方向和是否换行（换列）简写 */
            flex-flow: column wrap;
        }
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
</html>

总结：

flex-direction：设置主轴的方向

justify-content：设置主轴上的子元素排列方式

flex-wrap：设置子元素是否换行

align-content：设置侧轴上的子元素的排列方式（多行）

align-items：设置侧轴上的子元素排列方式（单行）

flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

不积跬步无以至千里不积小流无以成江海