Flex布局

Flex是Flexible Box 的缩写，就是弹性盒子布局的意思。作用是解决元素居中问题，自动弹性伸缩，合适适配不同大小的屏幕，和移动端。

演示flex-direction属性的使用

flex属性实现项目从上往下排列

* 编写页面结构代码

*编写页面样式代码

使用flex-direction属性实现项目从上往下排列的效果图，如下

flex属性实现项目从左往右排列

*编写页面结构 代码

*编写页面样式代码

使用flex-direction属性实现项目从左往右排列的效果图，如下

flex属性实现项目从右往左排列

*编写页面结构代码

*编写页面样式代码

使用flex-direction属性实现项目从右往左排列的效果图，如下

flex属性实现项目从下往上排列

*编写页面结构代码

*编写页面样式代码

使用flex-direction属性实现项目从下往上排列的效果图，如下

演示justify-content属性的使用

justify-content属性表示项目对齐到主轴起点，项目之间没有空隙

*编写页面结构代码

*编写页面样式代码

效果图，如下

justify-content属性表示项目对齐到主轴终点，项目之间不留空隙

*编写页面结构代码

*编写页面样式代码

效果图，如下

justify-content属性表示居中排列，之间没有空隙

*编写页面结构代码

*编写页面样式代码

效果图，如下

 justify-content属性表示每个项目之间的距离相等，第一个项目离主轴起点和终点的距离为中间项目间距的一半 

*编写页面结构代码

*编写页面样式代码

效果图，如下

justify-content属性表示两端对齐，两端的项目分别靠向容器的两端，其他项目之间的间隔相等

*编写页面结构代码

*编写页面样式代码

效果图，如下​​​​​​​​​​​​​​

演示align-items属性的使用

align-items表示项目在 交叉轴的之间位置对齐

*编写页面结构代码

*编写页面样式代码

效果图，如下

align-items表示项目顶部与交叉轴起点对齐

*编写页面结构代码

*编写页面样式代码

效果图，如下

align-items表示项目底部与交叉轴终点对齐

*编写页面结构代码

*编写页面样式代码

效果图，如下

align-items表示项目的第一行文字的基线对齐 

*编写页面结构代码

*编写页面样式代码

效果图，如下