Flex--弹性布局学习--flex瀑布流的实现

时间：2024-03-15 20:36:59

众所周知：传统的布局方式是通过position+display+flort实现的，在页面的构造过程中会出现很多的问题，包括高度塌陷和元素垂直居中等等的问题，一直到2009年，W3C提出了一种新的方案【Flex布局】，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

现在的手机端，包括手机页面，微信小程序等大多采用flex进行布局，flex也将成为未来布局的首选内容，下面我将会对我在flex的学习过程中遇到的一些问题和相关知识进行部分总结，并通过flex的布局实现瀑布流布局的方式进行简单的分析。

一、什么是flex，什么是flex布局

简单的来说，flex是一种全新的布局方式，有的人称它为Flexible Box，意思就是说“弹性布局”，旨在实现一种更加有效地布局方式，更好的控制项目的对齐和*分配容器空间，即使它们的大小是未知的或动态的。所以当时才命名为"flex"。Flex布局背后的主要思想是给容器控制项目（Flex项目）的宽度、高度的能力，使用Flex项目可以自动填满容器的可用空间（主要是适应所有类型的显示设备和屏幕大小）。Flex容器使用Flex项目可以自动放大与收缩，用来填补可用的空闲空间。

想要使用flex布局，首先就是要将父元素设置   display：flex   ，当出现这句代码的时候，就是说明将此块元素设为了flex容器，而且将它的子元素设为了flex项目。

注意：flex的布局不是一个元素属性，而是一系列属性实现的flex布局。

二、基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

Flex--弹性布局学习--flex瀑布流的实现

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、相关属性

1、 flex-direction属性：主轴的排列方向

flex-direction: row;(默认) ----主轴为水平方向，起点在左端。
flex-direction: row-reverse; ----主轴为水平方向，起点在右端。
flex-direction: column; ----主轴为垂直方向，起点在上沿。
flex-direction: column-reverse; ----主轴为垂直方向，起点在下沿。

2、flex-wrap属性：定义元素的换行

flex-wrap: nowrap;(默认) ----表示不换行，平分父元素
flex-wrap: wrap; ----表示换行布局
flex-wrap: wrap-reverse; ----换行布局，但首行在下方

3、flex-flow属性：属于以上两个属性的缩写

flex-flow：row nowrap；(默认)

4、justify-content属性：主轴方向上的对齐方式

justify-content: flex-start;(默认) ----靠左对齐
justify-content: flex-end; ----靠右对齐
justify-content: center; ----居中排列
justify-content: space-between; ----两端对齐，项目之间的间隔都相等
justify-content: space-around; ----每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

5、align-items属性：交叉轴方向上的对齐方式

align-items: flex-start;(默认)----交叉轴的起点对齐
align-items: flex-end;----交叉轴的终点对齐
align-items: center;----交叉轴的中点对齐
align-items: baseline;----项目的第一行文字的基线对齐
align-items: stretch;----如果项目未设置高度或设为auto，将占满整个容器的高度

6、align-content属性：多根轴线的对齐方式

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

四、项目属性

1、order属性：order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

2、flex-grow属性：flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

3、flex-shrink属性：flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

4、flex-basis属性：flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

5、flex属性：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

6、align-self属性：align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

五、瀑布流概述

刚开始的时候，我们做瀑布流，是通过Multi-columns列的概念来实现的，或是通过JavaScript来实现，现在有了flex，那么就可以通过flex进行实现瀑布流的布局，实现的方式其实相当的简单，在一个大的flex容器中放几个块，通过水平排列不换行的方式实现，接着分别在块中添加元素，元素的排列属于垂直排列。

就个人而言不推荐使用这种方式进行布局，因为到后来进行前后端交互的时候，将数据分开放在不同的板块进行遍历是相当困难的，还是需要通过JavaScript的帮助，不过在静态页面中还是不错的布局方式。

六、瀑布流代码实现

1、HTML

<div class="masonry">
    <div class="column">
        <div class="item">
            <div class="item__content"></div>
        </div>
        <div class="item">
            <div class="item__content"></div>
        </div>
    </div>
    <div class="column">
        <div class="item">
            <div class="item__content"></div>
        </div>
        <!-- more items -->
    </div>
    <div class="column">
        <div class="item">
            <div class="item__content"></div>
        </div>
        <div class="item">
            <div class="item__content"></div>
        </div>
        <div class="item">
            <div class="item__content"></div>
        </div>
    </div>
</div>

2、CSS

.masonry {
    display: flex;
    flex-direction: row;
}
.column {
    display: flex;
    flex-direction: column;
    width: calc(100%/3);----三列的情况下
}

我的分享就这些内容了，一方面对学过的知识进行复习巩固，另一方面希望可以给需要的人一些小小的帮助，很多内容太过简短，不够详细，大佬勿喷。

相关文章