弹性布局

弹性布局详解

弹性布局特点

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

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

弹性布局属性

2.flex-direction:row
确定主轴方向为水平方向，起点在左边，布局方向从左往右；
3.flex-direction:row
确定主轴方向为垂直方向，起点在上沿，布局方向从上往下；
4. flex-wrap:当行排列时候，判断是否需要换行；
nowrap：默认值不换行
wrap：换行
wrap-reverse：翻转；
5. flex-flow: column wrap：垂直方向换行
flex-flow: row wrap：水平方向换行

总结：

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

竖直方向弹性布局

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

方式：
1: 横向布局；我们只需要考虑左右方向就可以了
2： 纵向布局都需要看的是 页面的上下。

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

水平与竖直方向布局

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

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

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