文章目录
一、移动布局(流式布局):
二、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 */
}
示例: