二、flex布局
1.1 传统布局和flex弹性布局
传统布局
-
兼容性好
-
布局繁琐
-
局限性,不能在移动端很好的布局
flex弹性布局
-
操作方便,布局极为简单,移动端应用广泛。
-
PC端浏览器支持情况较差。
-
IE11或更低版本,不支持或仅部分支持。
建议:
- 如果是PC端,则选择传统布局
- 如果是移动端,则使用flex弹性布局
1.2 flex布局原理
- 任何一个容器都可以使用flex布局
- 灵活性大
- 当父盒子设为flex布局后,子元素的float、clear和vertical-align都将失效
- 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
原理:通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
1.3 flex布局父级常见属性
以下6个属性是在父盒子上面设置:
属性 | 描述 |
---|---|
flex-direction | 设置主轴方向 |
jutify-content | 主轴上的子元素排列方式 |
flex-wrap | 子元素是否换行 |
align-content | 侧轴上的子元素排列方式(多行) |
align-items | 侧轴上的子元素排列方式(单行) |
flex-flow | 复合属性, 相当于同时设置了 flex-wrap 和flex-direction |
1.3.1 flex-direction 主轴和侧轴
在flex布局中,分为主轴和侧轴两个方向,也叫:行和列,X轴和Y轴
(如下图所示)。
- 默认主轴方向为X轴方向,水平向右
- 默认侧轴方向为Y轴方向,水平向下
1.3.2 flex-direction 属性值
flex-direction属性决定主轴的方向(及项目的排列方式)
注意:主轴和侧轴是变化的,看flex-direction设置谁为主轴,剩下的就是侧轴。子元素跟着主轴来排列。
属性值 | 描述 |
---|---|
row | 默认值。从左到右 |
row-reverse | 从右到左 |
column | 从上到下 |
column-reverse | 从下到上 |
1.3.3 justify-content 设置主轴上的子元素排列方式
定义项目在主轴上的对齐方式。
注意:使用这个属性,一定要确认主轴是哪一个。
属性值 | 描述 |
---|---|
flex-start | 默认值,从头部开始,如果主轴是x轴,则从左到右 |
flex-end | 从尾部开始排列 |
center | 在主轴居中对齐 |
space-around | 平分剩余的空间 |
space-between | 先两边贴边,再平分剩余空间(!important) |
1.3.4 flex-wrap 设置子元素是否换行
在flex布局中,如果子元素装不下,那么就一直在同行上显示。这时就需要一个属性,flex-wrap。
属性值 | 描述 |
---|---|
nowrap | 不换行 |
wrap | 换行 |
1.3.5 align-items 设置侧轴上的子元素排列方式(单行)
在侧轴(默认是Y轴)的排列方式。适用于单行。
属性值 | 描述 |
---|---|
center | 使元素在侧轴上居中对齐 |
stretch | |
flex-start | |
flex-end |
1.3.6 align-content 设置侧轴上的子元素的排列方式(多行)
在侧轴(默认是Y轴)的排列方式。适用于多行,单行无效。
属性值 | 描述 |
---|---|
flex-start | 默认值,从侧轴的头部开始排列 |
flex-end | 从尾部开始排列 |
center | 在侧轴居中对齐 |
space-around | 平分剩余的空间 |
space-between | 先两边贴边,再平分剩余空间 |
注: align-items 和 align-content 区别
- align-items 适用于单行情况下,只有上对齐、下对齐、居中和拉伸
- align-content 适用于换行(多行)情况下(单行效果如下),可以设置上对齐、下对齐、居中拉伸以及平均分配剩余空间等属性值。
- 总结:单行找 align-items ,多行找 align-content。
1.3.7 flex-flow 的复合属性
flex-flow:flex-direction flex-wrap
总结:
- 先设置
display:flex;
- 第二步进行设置主轴方向,
justify-direction:row/column;
- 第三步设置看元素是否换行,使用
flex-wrap
- 第四步看排列方式。
- 主轴排列方式使用
justify-content
。 - 侧轴排列方式则看是否为单行还是多行。单行排列使用
align-items
,多行排列使用align-content
- 主轴排列方式使用
1.4 flex布局子项常见属性
属性 | 描述 |
---|---|
flex (! important) | 子项目占的分数 |
align-self | 控制子项目自己在侧轴的排列方式 |
order | 定义子项的排列顺序(前后顺序) |
1.4.1 flex属性
看子项目分配的剩余空间。
`flex: flex-grow flex-shrink flex-basis`
/*
flex-grow: 默认为0,如果存在剩余的空间,项目也不会放大
flex-shrink:默认比例1,如果空间不足,项目缩小
flex-basis:相当于width和hight属性一样的值,将项目占据固定的空间。
*/
语法:
div {
flex: number;/*(没有单位) default为0*/
}
1.4.2 align-self 控制子项自己在侧轴上的排列方式
语法:
div {
/*规定的子项在侧轴上的排列方式,可以覆盖 align-items ,默认是auto*/
align-self: felx-end;
}
1.4.3 order属性定义项目的排列顺序
语法:
div {
/*默认是0,这个元素向前移动一个 */
order: -1;
}
1.5 背景线性渐变
语法:
background: linear-gradient(起始方向,color1,color2, ...)
background: -webkit-linear-gradient(起始方向,color1,color2, ...)
注意:
- 线性渐变必需添加浏览器私有前缀
- 起始方向可以是:方位名词、度数,如果省略默认就是top