淘宝999买的教程之弹性布局,弹性布局真的很好用,除了一些不支持的浏览器,移动端必备

弹性布局

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

弹性布局

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

主轴:默认为盒子水平方形;可以通过改变方向主轴方向
交叉轴:与主轴垂直及时交叉轴

总结:

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

竖直方向弹性布局

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

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

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


下一篇:时间检定仪日差检定仪秒表检定仪参数介绍