弹性布局整理和笔记（1）

弹性布局

display:flex;
弹性布局特点：
1：优点 可以解决复杂的布局问题 缺点IE不兼容

弹性布局

• 改变是父容器的布局方式，有默认的流式布局变成弹性布局
• 简洁改版子元素的属性，块变为行内块

主轴：默认为盒子水平方向，可以通过属性改变主轴方向
交叉轴：与主轴垂直的都是交叉轴

• flex-direction 属性决定主轴的方向（即项目的排列方向）。
  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿

flex-wrap 属性定义，如果一条轴线排不下，如何换行。
flex-flow
jusify-content 属性定义了项目在主轴上的对齐方式。
align-items 属性定义项目在交叉轴上如何对齐
align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

总结

1.弹性布局改变的容器内部的布局方式，从流式布局变为flex布局
2.布局方式的规律是什么？
沿着主轴起始方向排列，在主轴方向上有不同的对齐方式
主轴方向：水平 垂直
起点：正（左，上）反（右，下）
对齐方式：左对齐，右对齐，居中对齐，两端对齐，等距对齐（子元素距离相等）
注意：如果子元素，宽度或者高度之和 大于父元素 在布局之后 是否换行
当容器的流发生改变时候，子元素也会受到影响 由块变行内块

竖直方向弹性布局

注意：我们所接触的所有布局，视觉角度都是横向的 所以纵向会很抽象

方式：1.横向布局，我们只需要考虑左右方向就可以了
2.纵向布局都需要看的是 页面的上下
align-item

• 作用：决定子元素在交叉轴排列方式
• flex-start 从交叉轴起始位置开始排列，
• 如果交叉轴方向在纵向，那么就是从上面开始排列
• flex-end 从交叉轴末端开始排列
• center 从父容器的中间开始，
• 如果交叉轴方向在竖直方向，那么center 就是从父容器的高度中间开始排列
• baseline 与子元素中文字有关，所有子元素中，第一行文字对齐 也就是 根据每个子元素中 第一行文字的位置 决定每个子元素对齐的方式
• stetch 默认值
• 

水平与竖直方向布局

• 水平方向布局方式：从左往右，考虑到的高度

• 竖直方向布局方式：从上往下，针对的一整行 在竖直方向进行排列

• 总结：弹性布局的流，先从左往右布局，再从上往下布局的