弹性布局
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 默认值
水平与竖直方向布局
-
水平方向布局方式:从左往右,考虑到的高度
-
竖直方向布局方式:从上往下,针对的一整行 在竖直方向进行排列
-
总结:弹性布局的流,先从左往右布局,再从上往下布局的