弹性布局
display:fixed
弹性布局特点:
1:优点:可以解决复杂的布局问题 缺点IE不兼容
弹性布局
- 改变是父容器的布局方式;有默认的流逝布局变为弹性布局
- 简洁改版子元素的属性;块变为行内块
主轴:默认为盒子水平方形;可以通过属性改变主轴方向
交叉轴:与主轴垂直的及时交叉轴
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
总结:
1:弹性布局改变的容器内部的布局方式;从流式布局变为flex布局
2:布局方式的规律是什么呢?
沿着主轴起始方向排列,在主轴方向上有不同的对其方式
主轴方向:水平 垂直
起点:正(左or 上) 反 (右 or 下)
对齐方式:左对齐 右对齐;居中对齐;两端对齐;等距离对齐(子元素距离相等)
注意:如果子元素;宽度或者高度之和 大于父元素;在布局之后;是否换行
当容器的流放生改变时候;子元素也会受到影响;有块变行内块
竖直方向弹性布局
注意:我们所接触的所有布局;视觉角度- 都是横向的。所以纵向会很抽象
方式:1: 横向布局;我们只需要考虑左右方向就可以了
2: 纵向布局都需要看的是 页面的上下。
align-item
-
作用:决定子元素在交叉轴排列方式
-
flex-start 从交叉轴起始位置开始排列;
- 如果交叉轴方向在纵向,那么就是从上面开始排列
-
flex-end 从交叉轴末端开始排列
-
center 从父容器的中间开始;
- 如果交叉轴方向在竖直方向;那么center 就是从父容器高度中间开始排列
-
baseline 与子元素中的文字有关;所有子元素中;第一行文字对齐 , 也就是;根据每个子元素中;第一行文字的位置;决定每个子元素对齐的方式
-
stetch 默认值
水平与竖直方向布局
-
朔评方向布局方式;从左往右;考虑到的是高度
-
竖直方向布局方式:从上往下,针对的一整行 在竖直竖直方向进行排列
-
总结;弹性布局的流;先从左往右布局;再从上往下布局的