一、背景—

本文介绍 5 种瀑布流场景的实现，

css

盒模型是什么

1. 安装Element-plus

1.1 安装组件库

• 执行安装

在网页制作过程中，布局是我们最重要的一个环节。可以说布局的好坏直接影响到整个网页的成败！布局成则事半功倍；布局败，则事倍功半。 随着移动互联的到来，响应式网站风靡。这也就兴起了一种新兴的布局方式——弹性布局。取代我们之前“display+float+position”的布局形式，采用全新的弹性布局，会让你的网站如丝般顺滑！ 今天，就让我们一起来学习一下弹性布局，让我们用5个div玩转弹性布局吧~

在html css设计中，对于控件布局是一个界面美观重要工具。传统布局工具是盒状模式,它布局通过依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

因此在2009年，W3C推出 flex布局，也叫flexbox，直译就是弹性盒子。它可以简便、完整、响应式地实现各种页面布局，是一个越来越流行的布局方式，常见浏览器都支持，而在微信小程序，uni-app，vue等各种环境也缺省使用这个布局。因此做前端开发,flex布局必须要掌握的。

一、Flex布局涉及的基本概念

容器(container)：display被设置为flex、inline-flex的元素被称作为容器。

前言

又到周五了，是时候该放个大招了。哈哈~~

提到

项目属性

• order属性[子项目自定义顺序]

功能: 定义子项目的排列顺序,越小越靠前

前言

在css3 Flex技术出现之前制作网页大多使用浮动（float）、定位（position）以及 显示（display）来布局页面，随着互联网快速发展，移动互联网的到来，已无法满足需求，它对于那些特殊布局非常不方便，比如，垂直居中

flex弹性布局，如果子元素宽度之和大于或者小于父元素宽度，空间就会存在剩余和不够，flex默认不换行，除非设置flex-wrap,那么这种情况下，有两个重要的属性，flex-grow和flex-shrink.