移动Web开发 -- flex布局

前言 – 传统布局与flex布局

传统布局

1. 兼容性好
2. 布局繁琐
3. 局限性，不能在移动端很好地布局

flex弹性布局

1. 操作方便，布局极 为简单，移动端应用很广泛
2. PC端浏览器支持情况较差
3. IE11或更低版本，不支持或仅支持部分

建议

1. 如果是PC端界面布局，还是使用传统布局
2. 如果是移动端或者不考虑兼容性问题的PC端界面布局，我们还是使用flex布局

一. flex布局原理

1.1 布局原理

任何一个容器都可以指定为flex布局，同时当我们为父盒子设置为flex布局之后。子元素的float、clear和vertical-align属性将失效
采用flex布局的元素称为Flex容器，简称“容器”，他的所有子元素自动成为容器成员，称为Flex项目简称“项目”
总结原理：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

二. flex布局父项常见属性

2.1 常见父项属性（6个）

• flex-direction: 设置主轴的方向
• justify-content: 设置主轴上的子元素排列方式
• flex-wrap: 设置子元素是否换行
• align-content: 设置側轴上的子元素的排列方式(多行)
• align-items: 设置側轴上的子元素的排列方式(单行)
• flex-flow: 复合属性，相当于同时设置了flex-direction 和 flex-wrap。

2.2 flex-direction设置主轴方向

1. 主轴与側轴

在flex布局中，是分为主轴和側轴两个方向

• 默认主轴方向就是x轴方向，水平向右
• 默认側轴方向就是y轴方向，水平向下

2. 属性值

• flex-direction属性决定主轴的方向（即项目的排列方向）
• 注意：主轴和側轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是側轴。而且子元素是跟着主轴来进行排列的。
  属性值 ---------------------------------- 说明
  row --------------------------------------默认从左到右
  row-reverse---------------------------从右到左
  column---------------------------------从上到下
  column-reverse---------------------从下到上

2.3 justify-content 设置主轴上的子元素排列方式

justify-content 属性定义了项目在主轴上的对齐方式
使用这个属性之前一定要确定好主轴是哪个
属性值 ---------------------- 说明
flex-start -------------------默认值 从头部开始 如果主轴是x轴，则从左到右
flex-end---------------------从尾部开始排列
center------------------------在主轴居中对齐(如果主轴是x轴则水平居中)
space-around-------------平分剩余空间
space-between-----------先两边贴边 再平分剩余空间(重要)

2.4 flex-wrap设置子元素是否换行

默认情况下，项目都排在一条线(又称"轴线")上。flex-wrap属性定义，flex布局中默认是不换行的
如果装不开，会缩小子元素的宽度，放到父元素里面
属性值 ---------------------- 说明
nowrap ---------------------默认值 不换行
wrap-------------------------换行

2.5 align-items 设置側轴上的子元素排列方式(单行)

该属性是控制子项在側轴(默认是y轴)上的排列方式，在子项为单项的时候使用
属性值 ---------------------- 说明
flex-start -------------------默认值 从上到下
flex-end---------------------从下到上
center------------------------挤在一起居中(垂直居中)
stretch-----------------------拉伸

2.6 align-content 设置側轴上的子元素排列方式（多行）

设置子项在側轴上的排列方式并且只能用于子项出现换行的情况(多行),在单行下是没有效果的。
属性值 ---------------------- 说明
flex-start -------------------默认值 在側轴的头部开始排列
flex-end---------------------从側轴的尾部开始排列
center------------------------在側轴中间显示
space-around-------------子项在側轴平分剩余空间
space-between-----------子项在側轴先分布在两头 再平分剩余空间(重要)
stretch-------------设置子项元素高度平分父元素高度

2.7 flex-flow

flex-flow属性是flex-direction和flex-wrap属性的复合属性
flex-flow: row wrap

三. flex布局子项常见属性

• flex子项目占的份数
• align-self 控制子项自己在側轴的排列方式
• order属性定义子项的排列顺序(前后顺序)

3.1 flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

3.2 align-self 控制子项自己在側轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

3.3 order属性定义项目的排列顺序

数值越小·，排列越靠前，默认为0
注意：和z-index不一样

四. 网站首页案例制作