flex布局原理及常见的父项元素

一.flex布局原理

 采用Flex布局的元素，称为flex容器，它的所有子元素自动成为容器成员，称为Flex项目

总结flex布局原理：

就是通过给父元素添加flex属性，来控制子盒子的位置和排列方式

二.常见父项属性

1.flex-direction:设置主轴方向

2.justify-content:设置主轴上的子元素排列方式

3.flex-wrap:设置子元素是否换行

4.align-content:设置侧轴上的子元素的排列方式（多行）

5.align-items:设置侧轴上的子元素的排列方式（单行）

6.flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

三.flex-direction设置主轴的方向

flex-direction属性决定主轴的方向（即项目的排列方向）

注意：主轴和侧轴会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，而我们的子元素跟着主轴来排序的

row    默认值从左到右

row-reverse   从右到左

column   从上到下

column-reverse    从下到上

四.justify-content设置主轴上的子元素排列方式

           justify-content属性定义了项目在主轴上的对齐方式

注意：使用这个属性之前一定要确定好主轴是哪个

flex-start   默认值从头开始，如果主轴是X轴，则从左到右

flex-end   从尾部开始排列

center   在主轴居中对齐（如果主轴是x轴则水平居中）

space-around   平分剩余空间

spance-between   先两边贴边 在平分剩余空间 

五.flex-wrap设置子元素是否换行

nowrap   默认值，不换行

wrap      换行