关于flex布局的简单讲解，以及基础使用

afae_1

已于 2024-04-15 08:02:40 修改

阅读量1.4k

点赞数 22

文章标签： html5 css

于 2024-04-14 20:53:51 首次发布

本文链接：https://blog.csdn.net/afae_1/article/details/137677475

版权

一.关于flex布局的基本概念

flex布局，中文译为“弹性布局”，当一个容器的display属性设置为flex时，则该容器使用flex布局。与传统依赖于display，position，float的盒模型布局不同，flex布局为盒模型提供了更大的便利性，灵活性；任何一个容器，都可以指定为flex布局

.box{display: flex;}

行内元素使用flex布局，需要加上inline

.box{display: inline-flex;}

注意：当一个容器设置为flex布局时，其子元素的float，clear和vertical-align属性都将失效。

当一个容器为flex布局时，容器默认存在两根轴——水平方向的主轴和垂直方向的交叉轴。主轴以默认左边界为始端，右边界为末端；交叉轴默认以上边界为始端，下边界为末端。内部元素块从两轴始端开始沿主轴排列

flex布局共有六个属性，分别是：

flex-direction，flex-wrap ，flex-flow，justify-content，align-items，align-content

该属性用于决定主轴方向（即内部元素排列方向），不设时默认水平，共有row（默认）| row-reverse | column | column-reverse四个值

row: 主轴为水平方向，始端在左边界。

row-reverse：主轴为水平方向，始端在右边界。

column：主轴为垂直方向，始端在上边界。此时交叉轴为水平方向

column-reverse：主轴为垂直方向，始端在下边界。此时交叉轴为水平方向

默认情况下，flex布局内部元素在一条（轴）线上排列，当内部元素占满一行后还未排下，可用 flex-wrap属性进行换行，并规定如何换行，共有no-wrap | wrap | wrap-reverse 三个属性值

no-wrap：不换行，当元内部素宽度超过容器宽度时，会按照特定比例缩小

上图中，每个内部元素宽度100px，一共9个，整个容器宽度600px，而此时未设置flex-wrap属性的属性值，所以默认为flex-wrap: no-wrap;属性值，不允许换行，内部元素宽度按照特定比例缩小

内部元素：

.box1 {
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        display: flex;
      }

容器：

.box {
        width: 600px;
        height: 600px;
        display: flex;
        background-color: bisque;
      }

wrap：当给容器添加flex-wrap: wrap;时，元素会进行换行

关注