06前端学习之移动web开发：移动布局(流式布局)、Flex伸缩布局、移动响应式web开发(rem布局)、响应式布局(Bootstrap框架)

一、移动布局(流式布局):

二、Flex伸缩布局:

1. flex布局原理：

flex是Flexible Box的缩写， 意为： 弹性布局； 用来为盒状模型提供最大的灵活性, 任何一个容器都可以指定为flex;

• 当为父盒子设为flex布局以后, 子元素的float, clear和vertical-align属性将失效;
• 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局;
  采用了flex布局的元素称为flex容器(flex container), 简称: “容器”. 它所有的子元素自动称为容器的成员, 称为flex项目(flex item), 简称: “项目”;

总结:

• 通过给父盒子添加flex属性, 来控制子盒子的位置和排列方式;

2. 常见的父项属性:

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

2.1 flex-direction:设置主轴的方向

2.1.1 主轴与侧轴:

在flex布局中, 是分为主轴与侧轴两个方向的, 同样的叫法有: 行和列, x轴和y轴;

• 默认主轴方向就是x轴方向, 水平向右;
• 默认侧轴方向就是y轴方向, 水平向下;
  

2.1.2 属性值:

flex-direction属性决定主轴的方向(即: 项目的排列方向)
注意: 主轴和侧轴是会变化的, 就看flex-direction设置的主轴, 剩下的为侧轴; 而子元素是跟着主轴来排列的;

属性	说明
flex-direction: row;	(默认值)从左到右
flex-direction: row-reverse;	从右到左
flex-direction: column;	从上到下
flex-direction: column-reverse;	从下到上

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

justify-content属性定义了项目在主轴上的对齐方式
**注意:**使用前要确认好哪个是主轴

属性	说明
justify-content: flex-start;	(默认值)从头部开始, 如果主轴是x轴, 侧从左到右
justify-content: flex-end;	从尾部开始排列
justify-content: center;	在主轴居中对齐(如果主轴是x轴,则水平居中)
justify-content: space-around;	平分剩余空间
justify-content: space-between;	先两边贴边,再评分剩余空间

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

flex布局中, 默认的子元素是不换行的. 如果装不开, 会缩小子元素的宽度(高度), 放到父盒子中

属性	说明
nowrap	(默认)不换行
wrap	换行

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

该属性控制子项在侧轴(默认是y轴)上的排列方式, 在子项为单项(单行)时使用

属性	说明
flex-start	(默认值)从上到下
flex-end	从下到上
center	垂直居中
stretch	拉伸

2.6 align-content: 设置侧轴上的子元素排列方式(多行)

该属性控制子项在侧轴(默认是y轴)上的排列方式, 在子项出现换行的情况;

属性	说明
flex-start	(默认值)在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴评分剩余空间
space-between	子项在侧轴先两头贴边, 再平分剩余空间
stretch	设置子项元素高度平分父元素高度

2.7 align-items 与 align-content:

• align-items: 适用于单行情况下, 只有上对齐, 下对齐, 居中和拉伸’
• align-content: 适用于换行(多行)的情况下, 可以设置 上对齐, 下对齐, 居中, 拉伸和平等剩余空间

2.8 flex-flow: 复合属性, 相当于同时设置了flex-direction和flex-wrap

flex-direction: row;
flex-wrap: wrap;
/* 合并简写 */
flex-flow: row wrap;

3. flex布局子项常见属性:

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

3.1 flex属性:

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

.item {
   
	flex: <number> /* default 0 */
}

示例: