flex布局-父项常见属性

WangZhang_521

已于 2022-01-21 21:43:55 修改

阅读量202

点赞数

分类专栏：移动Web开发文章标签： css3 css html

于 2022-01-17 20:16:59 首次发布

本文链接：https://blog.csdn.net/WangZhang_521/article/details/122541763

版权

移动Web开发专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细探讨了Flex布局中父项的常见属性，包括主轴方向、子元素在主轴上的排列方式、是否允许子元素换行、侧轴上的子元素排列方式以及复合属性flex-flow的使用，通过多个效果展示进行直观说明。

摘要由CSDN通过智能技术生成

01-flex主轴方向

<!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: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是x轴 行 row 那么y轴就是侧轴 */
            /* 我们的元素是根据主轴来排列的 */
            /* flex-direction: row; */
            /* 简单了解 翻转 */
            /* flex-direction: row-reverse; */
            /* 我们可以设置y轴为主轴 x为侧轴 */
            flex-direction: column;
            /* flex-direction: column-reverse; */
        }
        
        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>

效果展示

在这里插入图片描述

02-设置主轴上的子元素排列方式1

<!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>设置主轴上的子元素排列方式1</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是x轴 row */
            flex-direction: row;
            /* justify-content: 是设置主轴上子元素的排列方式; */
            /* 默认从头部开始，如果x轴是主轴，从左到右排列 */
            /* 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>
        <span>4</span>

    </div>
</body>

</html>

效果展示

在这里插入图片描述

02-设置主轴上的子元素排列方式2

<!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设置主轴上的子元素排列方式2</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 我们现在的主轴是y轴 */
            flex-direction: column;
            /* 居中对齐，从上到下 */
            /* justify-content: center; */
            /* 先沿y轴方向两边贴 再平分剩余空间 */
            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>

效果展示

在这里插入图片描述

03-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>flex-wrap子元素是否换行</title>
    <style>
        div {
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /* flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，在一行显示 */
            /* flex-wrap: nowrap; */
            /* 装不下换行 */
            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>
    </div>
</body>

</html>

效果展示

在这里插入图片描述

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

<!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>align-items设置侧轴上的子元素排列方式</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 1.默认主轴是x轴 row */
            /* justify-content: center; */
            /* 我们需要一个侧轴 y轴居中 */
            /* align-items: center; */
            /* 拉伸，但是盒子不要给高度 */
            /* align-items: stretch; */
            /* 2.将y轴设置为主轴 */
            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>

效果展示

在这里插入图片描述

05-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>align-content设置侧轴上的子元素的排列方式（多行）</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 换行 */
            flex-wrap: wrap;
            /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式用align-content */
            /* align-content: flex-start; */
            /* align-content: center; */
            /* align-content: space-between; */
            align-content: space-around;
        }
        
        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>

效果展示

在这里插入图片描述

06-flex-flow复合属性

<!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-flow复合属性</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;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

</html>