弹性布局（一）

弹性布局（一）
开发工具和关键技术：Adobe Dreamweaver CC 2017、弹性布局
撰写时间：2019年2月10日
今天，和大家分享的技术是弹性（flex）布局。
大家都知道被采用flex布局的元素是叫“容器”，它的子元素被称为“项目”。
下面，我举个例子来说明一下。
flex布局的应用：
一、 给所在的元素添加display:flex;
截图如下：

效果图如下：

二、 给所在的元素添加主轴上的对齐方式，添加justify-content。
截图如下：

效果图如下：

图中只是演示主轴上的对齐方式的一种（居中），还有flex-start(左对齐)、flex-end(右对齐)、space-between(两端对齐、间隔相等)、space-around(间隔相等、间隔比项目与边框的间隔大一倍)。
三、 换行，添加flex-wrap。
截图如下：

效果图如下：