【无标题】

弹性布局简介

在网页制作过程中，布局是我们最重要的一个环节。可以说布局的好坏直接影响到整个网页的成败！随着移动互联的到来，响应式网站风靡。这也就兴起了一种新兴的布局方式——弹性布局。取代我们之前“display+float+position”的布局形式。

flex 属性用于检索弹性盒模型对象的子元素如何空间分配。

flex布局

fiex：是对对象作为弹性伸缩盒显示。

1，给父级添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；

2，display:flex; 容器添加弹性布局后，显示为块级元素；

display:inline-flex; 容器添加弹性布局后，显示为行级元素；

代码演示

示例1

示例2

 

 先设3个小div，然后给大的div设置样式给3个小div分成3份然后加入justify-content: space-around将里面的数字等分排列。

示例3

示例4

以上就是弹性布局的简单介绍，要想更深入的了解弹性布局的用法，还得要多敲代码观察不同，合理的运用弹性布局也能让我们的制作变得简单一点。