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

前端杂货铺

已于 2022-05-14 20:45:16 修改

阅读量1.5k

点赞数 6

分类专栏： Flex布局文章标签： css3 css html

于 2022-02-28 19:42:42 首次发布

本文链接：https://blog.csdn.net/qq_45902692/article/details/123139297

版权

Flex布局专栏收录该内容

3 篇文章 2 订阅

订阅专栏

一、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

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

前端杂货铺

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
3
评论
Flex 布局 ------ 父项常见属性

一、flex-direction 设置主轴的方向。flex-direction：设置主轴的方向。默认主轴方向就是 x 轴 ( 默认 flex-direction: row)，水平向右。默认侧轴方向就是 y 轴，水平向下。可以设置主轴方向为 y 轴 flex-direction: columnflex-direction 属性决定主轴的方向，元素跟着主轴排列。属性值和说明如下row：默认值从左到右row-reverse：从右到左column：从上到下column-reve
复制链接

扫一扫