flex布局笔记

flex布局概述
此前我们制作的所有网页都是基于盒子模型和浮动布局完成的，flex布局又叫弹性布局（或者叫弹性盒子布局)，
这是一种更先进的布局方式，可以让网页布局更简洁，更易于维护。
基本概念
将元素设置为display : flex;元素会变为一个flex容器。容器内部的元素为flex元素或者叫flex项目（flex-item ).
flex容器中的默认效果
1.flex项目在flex容器中延主轴排列。
2.flex项目高度适应flex容器高度（同行内元素)。
设置flex容器
flex-direction :设置flex项目排列方向’
justify-content : flex项目主轴排列方式
align-items : flex项目在交叉轴的排列方式

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

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

align-item
flex-start:交叉轴的起点对齐。