FLEX布局个人解析

FLEX布局

Flex容器：采用 Flex 布局的元素的父元素；
Flex项目：采用 Flex 布局的元素的父元素的子元素；
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

使用flex布局的好处：
在进行网页的编辑时，如果要多个元素在一行显示，并且要均匀分布的话，不需要添加float属性和外边距属性，也避免了高度塌陷和分布时的距离测量，还可能因为父级在进行版心居中时设定的宽度不够而导致的内容溢出，虽然也可以通过max-content避免父级居中溢出的问题。

接下来进行flex布局的属性详解：

flex容器属性

1、display:flex、inline-flex
注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
作用: 控制子集在"主轴"上排列
显示规则:所有的子元素都会在主轴上排列；
默认x为主轴；
如果设置x为主轴,那y为侧轴；
如果设置y为主轴,那么x为侧轴；
当容器加了flex属性后：
1.子级无论是块级元素还是内联块或者内联元素，都将在一行显示；

2.都可以进行高度大小的设置；
3.即使因为项目过多，本应该超出容器的范围的，但是这种情况不会发生，容器内的项目会自动缩小比列，以确保不会出容器的范围；

4.两个容器是兄弟关系且都有flex属性，那么每个容器单独占据一行；

当容器是display：inline-flex；那么两个容器间只会占据设定的大小位置，两个容器间可以在一行分布；

2、flex-direction属性 决定主轴的方向（即项目的排列方向）
属性:
row 水平方向主轴
row-reverse 水平反向主轴
column 垂直主轴
column-reverse 垂直反向主轴

row

3、flex-wrap属性，定义子元素是否换行显示
flex-wrap:;子元素是否换行
nowrap 不换行（默认情况，超过容器大小，项目自动缩小比列）
wrap 换行
wrap-reverse 反向换行
注意：换行后，两行的间距是浏览器产生的，如果要消除，那么就只能用align-content属性，将两行的位置设置为flex-start，注意项目如果本身是没有外边距的情况下会两行粘合在一起；


4、 flex-flow
flex-flow（综合写法）:;设置主轴 是否换行；
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap;

5、 justify-content属性 定义了项目在主轴（）上的对齐方式
  flex-start 起始位置（以坐标轴定义的话，默认起始位置在（0，0））
  flex-end 终点位置（元素会在右边位置，与反向不同，他的排序不会变）
  center 居中
  space-around 完全自动分配
  space-between 两端对齐,紧挨边框，中间自动分配

上图是flex-end，加与反向不同的是他的排列顺序为发生变化

上图是： space-around

上图是space-between；本应该两边紧挨边框，因为项目加了外边距，所以会有间隙；

6、align-items属性定义项目在交叉轴上如何对齐。
子元素在侧轴上的对齐方式（想要在侧轴使用这个，那么子元素也要设定弹性盒，这样他子元素的子元素才能用，要么就用align-self也可以）
flex-start 起始位置（主轴是x轴就紧挨上边框线就是起始位置）
flex-end 终点位置
center 居中
baseline 基线对齐（文字大小不同，基线位置不同）
stretch 默认位置对齐（在不设置的情况下，与起始位置一样）



当项目有不同的时候，基线会产生变化；

7、align-content属性定义了多根轴线的对齐方式。对于单行子元素，该属性不起作用。
注意：用该属性会使的align-items和子级使用的align-self属性失效；
align-content在侧轴上执行样式的时候，会把默认的间距给合并。对于单行子元素，该属性不起作用；
flex-start 起始位置（可以取消当元素设定换行后，两行元素间的巨大间距，这样除非是子元素本身有外边距，否则就会黏在一起）
flex-end 终点位置
center 居中
space-around 完全自动分配
space-between 两端对齐,中间自动分配
stretch 默认位置对齐

flex-start；消除了因为分行的中间间距；之所以黏一起是因为我把项目的外边距取消了，否则项目与项目间还会有小间距的；



space-around;均匀分布，之间的间距是边上的两倍；

space-between;

flex项目属性

1、align-self属性
Internet Explorer 和 Safari 浏览器不支持 align-self 属性
说明：

加入项目里面还有自己的子项目，那么如果想要让子项目能够进行侧轴的移动，要么给项目设定为弹性盒，这样自己的子项目才能够侧轴移动，要么用align-self属性，可以直接移动且盖过align-items的属性值；

align-self 属性规定灵活容器内被选中项目的对齐方式,给项目添加，不是在容器添加。
注意：align-self 属性可重写灵活容器的 align-items 属性。使用这个属性前，父级的align-content需要取消，否则align-self属性无效。
属性值
auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
Stretch 元素被拉伸以适应容器。
Center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。

flex-start;


ailgn-self:stretch；该属性要有效，则项目需要不设置高度，注意才会被拉伸，其实该属性不写也一样，这是默认属性，只要想不写高度，那么项目进入容器后，高度直接与容器高度一致，上面之所以有间隙是设置了外边距；
2、order（改变位置，即使很多行也一样）
说明：number排序优先级，数字越大越往后排，默认为0，支持负数。
3、flex
在使用flex进行填充时，注意input自有的宽度，父级要大于他才能将另一个显示出来；flex=1，效果和cale一样，就是一行除了占据的空间大小以外都是他的；