flex布局

yz_518 Nemo

于 2024-04-03 10:39:16 发布

阅读量801

点赞数 19

分类专栏：关于前端学习文章标签： css css3 前端

本文链接：https://blog.csdn.net/yz_518/article/details/137299823

版权

关于前端学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文详细介绍了Flex布局原理，包括轴的概念、主要使用三要素（主轴方向、对齐方式），展示了如何在实际项目中启用和应用。还探讨了Flex布局的属性、优点，以及其在响应式设计中的重要性。

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

4.1.3justify-content：

前言:

今天我们来学习关于flex的布局Flexbox（弹性盒子）布局是现代前端开发中一个非常流行且强大的布局方式。它提供了对容器内项目对齐、方向和顺序的精细控制，从而可以轻松地设计复杂的布局结构，并且具有良好的响应性。

1.Flex布局原理:

1.1轴的概念：

Flex布局通过定义两条轴——主轴（main axis）和副轴（cross axis），来控制容器内项目的排列。主轴是项目排列的主要方向，而副轴则垂直于主轴。

2.Flex的使用三要素:

2.1主轴的方向：

通过flex-direction属性设置。这决定了项目是水平排列还是垂直排列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 
            flex-direction
                row;  #  行,默认属性,从左往右
                column;  # 列,从上往下
                row-reverse;  #  行反转,从右往左
                column-reverse;  #  列反转,从下往上 
        */
        .box{
            display: flex;
            flex-direction: row-reverse;
            width: 500px;
            height: 500px;
            background-color: #096;
        }
        .box div{
            width: 100px;
            height: 100px;
            background-color: #6cf;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

2.2主轴元素对齐方式：

通过justify-content属性设置。它决定了项目在主轴上的对齐方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 
           justify-content
                flex-start;  # 靠起点
                flex-end;	# 靠终点
                center;  # 居中
                space-around;  # 均分布局  
                space-between;  # 两端布局
        */
        .box{
            display: flex;
            justify-content: space-around;
            width: 500px;
            height: 500px;
            background-color: #096;
        }
        .box div{
            width: 100px;
            height: 100px;
            background-color: #6cf;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

2.3副轴元素对齐方式：

通过align-items属性设置（对于单个项目，可以使用align-self）。它决定了项目在副轴上的对齐方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 
        align-items
            flex-start;  # 靠起点
            flex-end;	# 靠终点
            center;  # 居中
        */
        .box{
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 500px;
            height: 500px;
            background-color: #096;
        }
        .box div{
            width: 100px;
            height: 100px;
            background-color: #6cf;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

3.Flex的具体使用 :

3.1启用Flex布局：

在容器元素上设置display: flex;或display: inline-flex;（后者用于内联元素）。

3.2主轴方向：

通过flex-direction属性，可以选择row（默认，水平从左到右）、column（垂直从上到下）、row-reverse（水平从右到左）或column-reverse（垂直从下到上）。

3.3主轴对齐方式：

justify-content属性可以有以下值：flex-start（靠起点对齐）、flex-en（靠终点对齐）、center（居中对齐）、space-around（项目两侧间隔相等）和space-between（项目之间间隔相等，首尾无间隔）。

3.4副轴对齐方式：

align-items属性控制所有项目在副轴上的对齐方式，可选值与justify-content类似，但通常不包括space-around和space-between，因为它们在副轴上的意义不大。对于单个项目的特殊对齐需求，可以使用align-self属性。

3.5换行：

当容器内的项目无法在一行内完全显示时，可以使用flex-wrap属性来控制是否换行。可选值有nowrap（默认，不换行，项目可能会缩小）和wrap（换行）。还有一个较少使用的值wrap-reverse，它会换行但顺序相反。

3.6元素顺序：

通过order属性可以控制Flex容器中项目的显示顺序。默认值为0，值越小，项目在容器中的位置越靠前。这对于在不改变HTML结构的情况下调整视觉呈现顺序非常有用。

4.Flex布局的属性:

Flex布局涉及多个属性，这些属性可以应用于容器或项目。

4.1容器属性:

4.1.1display：

设置为flex或inline-flex以启用Flex布局。

4.1.2flex-direction：

定义主轴的方向（如row、column、row-reverse、column-reverse）。

4.1.3justify-content：

定义项目在主轴上的对齐方式（如flex-start、flex-end、center、space-between、space-around、space-evenly）。

4.1.4align-items：

定义项目在交叉轴上的对齐方式（如flex-start、flex-end、center、baseline、stretch）。

4.1.5flex-wrap：

控制项目是否换行（如nowrap、wrap、wrap-reverse）。

5.1项目属性:

5.1.1order：

定义项目的排列顺序。数值越小，排列越靠前。

5.1.1flex-grow：

定义项目的放大比例。

5.1.2flex-shrink：

定义项目的缩小比例。

5.1.3flex-basis：

定义项目在主轴方向上的初始大小。

5.1.4flex：

是flex-grow、flex-shrink和flex-basis的简写。

5.1.5align-self：

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

5.Flex布局的优点 :

5.1灵活性：

Flex布局允许开发者轻松地调整容器内项目的位置、大小和间距，无需使用复杂的定位或浮动技术。

5.2响应式：

Flex布局可以自动适应不同的屏幕尺寸和设备类型，确保布局在各种情况下都能保持美观和一致。

5.3对齐方式丰富：

Flex布局提供了多种对齐方式，可以满足各种设计需求。

5.4顺序控制：

通过order属性，开发者可以在不改变HTML结构的情况下调整项目的显示顺序。

结语:

今天我们关于flex布局的内容就先讲到这里了,总的来说，Flex布局是一种强大且灵活的CSS布局方式，适用于各种现代Web应用程序和响应式设计。通过掌握其基本概念和属性，开发者可以创建出既美观又实用的界面布局。关于学习flex布局可以帮助我们更好的设计我们想要实现的网页界面。以上的内容都是我个人关于flex布局的一些学习,欢迎大家和谐讨论,也希望大家多多指教,在评论区和谐讨论。