移动web开发-day02-flex布局

移动web开发-day02-flex布局

00-移动WEB开发flex布局导读

• 目录
  • flex布局体验
  • flex布局原理
  • flex布局父项常见属性
  • flex布局子项常见属性
• 目标
  • 能够说出flex盒子的布局原理
  • 能够使用flex弹性布局的常用属性

01-flex布局体验

• 传统布局
  • 兼容性好
  • 布局繁琐
  • 不能在移动端很好的布局
• flex布局
  • 操作方便，布局简单，移动端应用广泛
  • PC端支持较差，IE11或更低版本不支持或仅部分支持
• 建议：PC端用传统布局，移动端用flex布局

02-flex布局原理

• 一句话，就是通过给父盒子添加display: flex;属性，来控制项目的位置和排列方式
• 补充说明：
  • 任何一个容器都可以指定为flex布局
  • 父盒子设为flex布局后，子元素的float、clear、vertical-align属性将失效
  • 设为flex布局的元素，称为flex容器（flex container），简称“容器”，它所有的子元素称为flex项目，简称“项目”
  • flex项目也可以再设为flex容器

03-flex设置主轴方向

• 常见父项属性
  • flex-direction：设置主轴方向
  • justify-content：设置主轴上项目的排列方式
  • flex-wrap：设置项目是否换行
  • align-items：设置侧轴上项目的排列方式（单行）
  • align-content：设置侧轴上项目的排列方式（多行）
  • flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
• flex-direction（设置主轴和方向）
  • 主轴：默认从左至右
  • 侧轴：默认从上至下
  • 属性值：
    • row：从左至右，默认值
    • row-reverse：从右至左
    • column：从上至下
    • column-reverse：从下至上
  • 项目是跟主轴来排列的，就看flex-direction设置的主轴是谁，另一个轴就是侧轴
    • 主轴水平方向，侧轴就是垂直方向
    • 主轴垂直方向，侧轴就是水平方向

04-justify-content设置主轴子元素排列

• justify-content用来控制项目在主轴上的排列方式

• 属性值

  • flex-start：默认值，从头开始
  • flex-end：从尾开始
  • center：居中对齐
  • space-around：平分剩余空间
  • space-between：先贴两边，再平分剩余空间

05-flex-wrap子元素是否换行

• flex-wrap用来控制项目是否换行
• 属性值
  • nowrap：默认值，不换行，如果装不下，项目会缩小
  • wrap：换行

06-align-items设置侧轴子元素排列

• align-items用来控制项目在侧轴上的排列方式（单行）
• 注意：与flex-wrap: wrap;没有直接关系，即使设置了换行，但未呈现换行样式，也是有用的
• 属性值
  • flex-start：从头开始
  • flex-end：从尾开始
  • center：居中
  • stretch：拉伸，默认值，不能给项目设置高度

07-align-content设置侧轴子元素排列

• align-center用来控制项目在侧轴上的排列方式（多行）
• 注意：与flex-wrap: wrap;没有直接关系，即使设置了换行，但未呈现换行样式，也是没用的
• 属性值
  • flex-start：默认值，从头开始
  • flex-end：从尾开始
  • center：居中
  • space-around：平分剩余空间
  • space-between：先贴两边，再平分剩余空间
  • stretch：拉伸，平分容器剩余空间
• align-item和align-content可以同时设置，单行样式自动应用align-item，出现多行样式时自动应用align-content

08-flex-flow以及总结

• flex-flow就是flex-direction和flex-wrap的结合属性

09-子项flex属性使用

• flex：控制项目自己所占容器剩余空间份数
• align-self：控制项目自己在侧轴上的排列方式
• order：控制顺序

10-align-self和order

• align-self：控制项目自己在侧轴上的排列方式，默认值auto，继承父元素的align-items属性
• order：控制项目自己在主轴上的排列顺序，数值越小，排列越靠前，默认值0，可以为负数

11-背景渐变linear-gradient

• 语法：background: -webkit-linear-gradient(起始方向, 颜色1, 颜色2, ...);

• 目前浏览器对该属性支持还不是很好，故需要添加私有前缀

• 起始方向可以是方位名词或者度数，默认值top

• 范例：

  background: -webkit-linear-gradient(left, red, blue);
  background: -webkit-linear-gradient(left top, red, blue);
  background: -webkit-linear-gradient(left bottom, red, blue);