弹性布局flex

最新推荐文章于 2024-08-10 17:13:35 发布

来杯宝藏茶

最新推荐文章于 2024-08-10 17:13:35 发布

阅读量111

点赞数

本文链接：https://blog.csdn.net/weixin_43627177/article/details/104479090

版权

1）初识

初次知道这个布局方式其实是在vx小程序里面，但是当时没有仔细了解，于是乎拖到今天打算好好了解一下这个布局。以下是我的学习成果，在以后也可以方便我查看喔~

2）介绍

CSS3最喜欢的属性之一便是flex布局属性，用六个字概括便是简单，方便，快速。
Flex（flexible box：弹性布局盒模型），W3C提出了一种新的方案——flex布局，以简便，完整，响应式地实现了各种页面布局。
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

3）基本概念

采用Flex布局的元素，称为Flex容器，他所有子元素自动成为容器成员，称为Flex项目
话不多说！上图！

嘿嘿，没错，这个就是Flex容器！有俩默认轴，分别是：水平主轴（main axis）和垂直的交叉轴（across axis）。主轴的开始叫main start，结束位置叫main end，交叉轴的开始位置叫cross start ，结束位置叫 cross end。容器中单个项目（子元素）占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

4）容器属性

概念大致了解完了，就该说说此容器的属性了，共6个属性，一一呈上：

flex-direction：决定元素排列方向
flex-wrap：决定元素如何换行
flex-flow： flex-direction 和 flex-wrap的简写
justify-content：元素在主轴上的对齐方式
align-items：元素在交叉轴的对齐方式
align-content：

4.1 flex-direction属性

有4个值：

row(默认值)
row-reverse
column
column-reverse



 <div class="content">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

  .content{
            display: flex;
            flex-direction: row/row-reverse/column/column-reverse;
        }
        .item{
            height: 50px;
            width: 50px;
            margin-bottom: 10px;
            border-radius: 10px;
            margin-right: 10px;
            background-color: orange;
        }

在这里插入图片描述

4.2 flex-wrap 属性

有3个值

nowrap
wrap
wrap-reverse

 <div class="content">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>

  .content{
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap/wrap/wrap-reverse;
        }
        .item{
            height: 50px;
            width: 30%;
            margin-bottom: 10px;
            border-radius: 10px;
            margin-right: 10px;
            background-color: orange;
        }

在这里插入图片描述

4.3 flex-flow

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

4.4 justify-content属性

定义了项目在主轴上的对齐方式
有5个值

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

.content{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start/flex-end/center/space-between/space-around;
        }
        .item{
            height: 50px;
            width: 50px;
            margin-bottom: 10px;
            border-radius: 10px;
            margin-right: 10px;
            background-color: orange;
        }

在这里插入图片描述

4.5 align-items 属性

定义项目在交叉轴上如何对齐
有5个值

flex-start
flex-end
center
baseline：项目第一行文字的基线对其
stretch（默认值）

.content{
    
            display: flex;
            flex-direction: row;
            /* justify-content: space-around; */
            align-items: flex-start/flex-end/center/baseline/stretch;
        }
        .item{
            width: 50px;
            margin-bottom: 10px;
            border-radius: 10px;
            margin-right: 10px;
            background-color: orange;
        }
         #o{
            height: 50px;
        }
         #s{
            height: 60px;
        }
         #t{
            height: 80px;
            line-height: 80px;
            /* text-align: ; */
        }
        #f{
            height: 40px;
        }
       #w{
            height: 60px;
        }

在这里插入图片描述

4.6 align-content属性

只适用于多行的flex容器（也就是flex容器中的子项不止一行时该属性才有的效果），它的作用是当flex容器在交叉轴上有多余空间时，将子项作为一个整体进行对齐
如果该容器子元素只有一行，该属性不起效果
有6个值

flex-start
flex-end
center
space-between
space-around
strech

4.6.1 flex容器不设置高度

使用align-items属性：

 .content{
            width: 200px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            /* justify-content: space-around; */
            align-content: space-between;
            border: 1px solid #333;
            align-items: center;
        }

在这里插入图片描述

使用align-content属性：

 .content{
            width: 200px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            /* justify-content: space-around; */
            border: 1px solid #333;
            align-content: center;
        }

在这里插入图片描述
我们发现，align-content：center并没有起作用，因为此时flex容器没有指定高度，所以flex容器在交叉轴上没有多余空间，自然就没有在交叉轴上对其的说法了。

4.6.2 flex容器设置高度

使用align-items属性：

 .content{
            width: 200px;
            height: 250px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            border: 1px solid #333;
            align-items: center;
        }

在这里插入图片描述
使用align-content属性：

.content{
            width: 200px;
            height: 250px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            border: 1px solid #333;
            align-content: center;
        }