22 flex布局容器六大属性

最新推荐文章于 2024-08-26 17:21:03 发布

远近2021

最新推荐文章于 2024-08-26 17:21:03 发布

阅读量1.6k

点赞数 2

分类专栏： # css3学习 htmlcss学习园地文章标签： css3

本文链接：https://blog.csdn.net/weixin_47197906/article/details/120609264

版权

htmlcss学习园地同时被 2 个专栏收录

91 篇文章 7 订阅

订阅专栏

css3学习

25 篇文章 3 订阅

订阅专栏

本文详细介绍了Flex布局中的关键属性，包括flex-direction、flex-wrap、flex-flow、justify-content、align-items和align-content，通过实例展示了它们如何影响子元素在容器中的排列方式，帮助理解CSS弹性布局的对齐和换行控制。

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

1、flex-direction

flex-direction属性决定主轴的⽅向。
flex-direction 属性指定了主轴线的方向，子元素默认是按照主轴线排列的，所以 flex-direction 也指定了弹性子元素在弹性容器中的排列方式，有以下四个值：

row ：（默认）横向从左到右排列。
row-reverse ：顾名思义，从右向左横向排列，反向。
column ：纵向从上往下排列。
column-reverse ：纵向从下往上排列。

下面使用值 row 操作属性 flex-direction：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            display: flex;
            flex-direction: row; /*（默认）横向从左到右排列。*/
            width: 400px;
            height: 450px;
            background-color: green;
        }
        .item {
            background-color: red;
            width: 100px;
            height: 100px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
</body>

在这里插入图片描述
如图所示，三个子元素按照值 row 的排列方式，在容器的横向从左到右排列。

当我们修改 flex-direction 为 column ，在容器的纵向从上往下排列。
在这里插入图片描述
指明容器的高度，才能更好的看到效果。

2、flex-wrap

flex-wrap属性设置⼦项⽬的换⾏⽅式。
弹性盒子默认情况下所有子元素都是排在一行上的，但容器大小有限，很有可能出现子元素被截断的情况，这时候就需要换行，flex-wrap 就是用来操作子元素换行的属性。flex-wrap 有以下三个值：

nowrap ：（默认）不换行。
wrap ：换行，第一行排满后自动换到第二行。
wrap-reverse ：换行，与 wrap 不同的是如果出现换行，换行后的元素在第一行上方。

下面使用值 wrap 来操作属性 flex-wrap ：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap-reverse;
            width: 350px;
            height: 450px;
            background-color: green;
        }
        .item {
            background-color: red;
            width: 120px;
            height: 100px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
</body>

在这里插入图片描述
当父元素的一行排不下三个盒子，那么设置 wrap 属性就能够换行，第一行排满后自动换到第二行。
修改代码如下：

flex-wrap: wrap;

在这里插入图片描述
而如果我们强制不换行，设置 nowrap 属性值：

子元素的宽度就会被自动减少（宽度失效），挤在一行。

5、flex-flow

flex-flow 是 flex-direction 和 flex-wrap 的简写形式，默认值为 row nowrap。

flex-flow: <flex-direction> || <flex-wrap>;

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            display: flex;
            /*从左往右 换行*/
            flex-flow: row wrap; 
            width: 350px;
            height: 350px;
            background-color: green;
        }
        .item {
            background-color: red;
            width: 120px;
            height: 100px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
</body>

在这里插入图片描述

设置align-content: flex-start;

6、justify-content

子元素在容器中默认是以左对齐的布局排列在主轴线上的，属性 justify-content 用来调整子元素在主轴线上的对齐方式，它有以下五个值：

flex-start ：左对齐
flex-end ：右对齐
center ：居中
space-between ：两端对齐，项目之间的间隔都相等。
space-around ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

在这里插入图片描述

修改成justify-content: space-between;

修改成justify-content: space-around;
在这里插入图片描述

<style>
        .container {
            display: flex;
            justify-content: space-around;
            width: 400px;
            height: 250px;
            background-color: green;
        }
        .item {
            background-color: red;
            height: 100px;
            margin: 10px;
			}
    </style>
</head>
<body>
	<div class="container">
	    <div class="item">item1</div>
	    <div class="item">item2</div>
	    <div class="item">item3</div>
	</div>
</body>

在这里插入图片描述
容器的宽度为 400px，三个子元素的宽度和加上它们的边框小于 400px，所以不会出现换行。

7、align-items

align-items属性规定⼦项⽬在交叉轴上的对⻬⽅式（单行情况下在交叉轴的对齐方式）
与主轴垂直的轴我们称它为交叉轴，属性 align-items 用于定义子元素在交叉轴上的排列方式，它有下列五个值：

flex-start ：交叉轴的起点对齐。
flex-end ：交叉轴的终点对齐。
center ：交叉轴的中点对齐。
baseline ：项目的第一行文字的基线对齐。
stretch ：如果子元素未设置高度或设置为 auto ，子元素将占满整个容器高度。

align-items: flex-start;的效果

align-items: flex-end;的效果

align-items: center;的效果

下面使用值 flex-end 来操作属性 align-items ：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            display: flex;
            flex-direction: column; /**/
            align-items: flex-end;
            width: 400px;
            height: 250px;
            background-color: green;
        }
        .item {
            background-color: red;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
</body>

在这里插入图片描述
注：这里的 flex-direction 设置为 column ，即主轴线的方向是垂直的，即交叉轴的方向是水平的；align-items 设置为 flex-end，即子元素在交叉轴结束位置上的边界对齐，交叉轴的结束位置在右侧，所以三个子元素在右边界上对齐。

8、align-content

align-content多⾏情况下的对⻬⽅式，类似justify-content的对⻬⽅式。（多行情况下在交叉轴的对齐方式）
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。align-content 有以下六个值：

flex-start ：与交叉轴的起点对齐。
flex-end ：与交叉轴的终点对齐。
center ：与交叉轴的中点对齐。
space-between ：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around ：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch：轴线占满整个交叉轴。

在这里插入图片描述
注释子项目的height: 100px;，效果如下：

align-content: flex-end;的效果如下：

align-content: center;的效果如下：

align-content: space-around;的效果如下：

下面使用值 center 来操作属性 align-content ：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            width: 200px;
            height: 600px;
            background-color: green;
        }
        .item {
            background-color: red;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
</body>

在这里插入图片描述
注：该处设置 flex-wrap 换行属性为 wrap，允许换行。align-content 属性在容器内不存在换行时不产生效果，所以我们将容器的 width 设置为 200px，一行只能放下一个子元素。align-content：center 表示每一行在交叉轴上居中排列，三个子元素只是在交叉轴上居中排列，因为我们没有设置主轴线的对齐方式，如果我们将 CSS 代码修改为如下所示，其余代码不变，那么子元素的排列效果就会发生变化。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            width: 200px;
            height: 600px;
            background-color: green;
        }
        .item {
            background-color: red;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
</body>