flex布局父项常见属性（设置主轴方向，t设置主轴上子元素排列方式，设置子元素是否换行，设置侧轴上子元素的排列方式（单行、多行），flex-flow复合属性写法）

最新推荐文章于 2023-10-13 13:17:58 发布

程序员shy

最新推荐文章于 2023-10-13 13:17:58 发布

阅读量376

点赞数

分类专栏：《移动端布局》第二站文章标签： css html css3

本文链接：https://blog.csdn.net/junyi727/article/details/127264839

版权

《移动端布局》第二站专栏收录该内容

15 篇文章 1 订阅

订阅专栏

flex布局父项常见属性

flex-direction设置主轴方向

这个属性决定容器的主轴以及项目的排列方向，默认为row（设x为主轴，从左到右）

<!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: 500px;
            background-color: pink;
            flex-direction: column;
        }
        span {
            width: 150px;
            height: 100px;
            background-color: gold;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>

</body>
</html>

justify_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: 1000px;
            height: 500px;
            background-color: pink;
            flex-direction: row;
            justify-content: space-around;
        }
        span {
            width: 150px;
            height: 100px;
            background-color: gold;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

</body>
</html>

flex-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: 500px;
            height: 500px;
            background-color: pink;
            flex-direction: row;
            /* justify-content: space-around; */
            flex-wrap: wrap;
        }
        span {
            width: 150px;
            height: 100px;
            background-color: gold;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>

</body>
</html>

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

用于控制子元素在侧轴上的排列方式（仅适用与容器内只有一行子元素，多行无法使用）

当使用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: 1000px;
            height: 500px;
            background-color: pink;
            flex-direction: row;
            /* justify-content: space-around; */
            justify-content: center;
            /* flex-wrap: wrap; */
            align-items: center;
        }
        span {
            width: 150px;
            height: 100px;
            background-color: gold;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

</body>
</html>

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

用于控制子元素在侧轴上的排列方式（仅适用于容器内出现了换行flex-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: 1000px;
            height: 500px;
            background-color: pink;
            flex-direction: row;
            /* justify-content: space-around; */
            justify-content: center;
            flex-wrap: wrap;
            /* align-items: center; */
            align-content: space-between;
        }
        span {
            width: 150px;
            height: 100px;
            background-color: gold;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

</body>
</html>