flex右对齐_移动WEB开发 — Flex布局

一、Flex布局原理

1.1 传统布局与 flex 布局

建议：

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

flexb布局体验

1.2 flex布局原理

总结：

flex布局原理：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列顺序。

1.2 flex布局常见属性

1.2.1 flex布局父项常见属性

1. flex-direction 设置主轴的方向

默认主轴为水平从左往右
flex-direction: row;

主轴为水平从右往左 
flex-direction: row-reverse;

主轴为垂直从上往下 
flex-direction: column;

主轴为垂直从下往上 
flex-direction: column-reverse;

2. justify-content 设置主轴子元素排列顺序

默认主轴为水平从左往右 
flex-direction: row;

默认值，在主轴开始位置 
justify-content: flex-start;

在主轴结束位置对齐 
justify-content: flex-end;

在主轴居中对齐 
justify-content: center;

在主轴平分剩余空间 
justify-content: space-around;

先两边对齐，其他的子项目平分剩余空间 
justify-content: space-between;

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

默认值，不进行换行 
flex-wrap: nowrap;

换行效果 
flex-wrap: wrap;

4. align-items 侧轴上子元素排列方式（单行）

默认主轴方向为水平向右
flex-direction: row;

flex-direction: column;

justify-content: center;

侧轴，默认值就是从上往下加载 
align-items: flex-start;

从下往上加载 
align-items: flex-end;

从中间加载 
align-items: center;

拉伸 
align-items: stretch;

5. align-content 侧轴上子元素排列方式（多行）

/* 默认主轴方向为水平向右 */
flex-direction: row;
flex-wrap: wrap;
/* 侧轴整体居于开始位置 */
/* align-content: flex-start; */

/* 侧轴整体居于结束位置 */
/* align-content: flex-end; */

/* 侧轴整体居中 */
/* align-content: center; */

/* 侧轴方向拉伸 */
/* align-content: stretch; */

/* 侧轴方向平均分布 */
/* align-content: space-around; */

/* 侧轴方向，两边对齐，中间的行进行平均分布 */
/* align-content: space-between; */

align-items 和 align-content 区别

6. flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
flex-flow： row nowrap;

/* 默认主轴方向为水平向右 */
/* flex-direction: row;

/* flex-wrap: wrap; */

/* 可以将主轴方向的设置和子元素是否换行的设置进行合写 */
flex-flow: column wrap;

/* 侧轴整体居中 */
align-content: center;

1.2.2 flex布局子项常见属性