Flex布局—携程网项目
传统布局和flex布局
传统布局
- 兼容性好、布局繁琐
- 局限性，不能在移动端很好的布局
flex布局
- 操作方便，布局极为简单，移动端应用很广泛
- PC端浏览器支持比较差
- IE11低版本不支持
选择方式
- 如果是PC端页面布局，考虑传统布局模式
- 如果是移动端或者不考虑兼容性问题的PC端，使用flex弹性布局
布局原理
- flexible box弹性布局，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局
- 当父盒子设置为flex布局以后，子元素的float、clear和vertical-align属性都将失效
- 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
- 采用flex的元素——容器
- 所有子元素自动为容器成员——项目
常见属性
父项常见属性
flex-direction设置主轴的方向
- row 默认从左到右
- row-reverse从右到左
- column从上到下
- column-reverse从下到上
justify-content主轴上子元素排列方式
- flex-start 默认从头部开始主轴为x，从左到右
- flex-end 从尾部开始排列
- center 主轴居中对齐
- space-around 平分剩余空间
- space-between 先两边贴边再平分剩余
flex-wrap子元素是否换行
- nowrap 默认值不换行
- wrap换行
align-items侧轴子元素排列方式（单行）
- flex-start默认从上到下
- flex-end从下到上
- center挤在一起居中
- stretch 拉伸
align-content侧轴子元素排列方式（多行）
- flex-start 默认从头部开始主轴为x，从左到右
- flex-end 从尾部开始排列
- center 主轴居中对齐
- space-around 平分剩余空间
- space-between 先两边贴边再平分剩余
- stretch 设置子项元素高度平分父元素高度
flex-flow属性
- 复合flex-direction和flex-wrap
子项常见属性
flex子项占份数
-
可以为子项目分配父盒子的剩余空间
-
实现圣杯布局：将1、3元素的盒子设置固定宽高后，给2的盒子直接设置flex的值为1，让其独占一份剩余的父盒子空间，这样就可以随着页面变化而进行变化。
section {
/* 必须先设置成为flex布局 */
display: flex;
width: 80%;
margin: 40px auto;
}
div:nth-child(2) {
flex: 1;
}
align-self控制子项自己在侧轴的排列方式
- 该属性允许单个项目有与其他项目不一样的对齐方式，可以覆盖掉align-items属性
- 默认值为auto，继承父元素的align-items属性，如果没有父元素则等同于stretch拉伸
order定义子项的排列顺序
- 调整子项的加载顺序，默认是0
- 如果想往前提，属性值可以为负数，如果是往后就要给大的数
携程网移动端
搜索框部分
- 使用flex布局，让搜索内容占据父元素的剩余空间，flex：1，这样就可以实现随着页面变化区域也发生变化的效果
- 小图标使用伪元素进行添加
- 垂直方向布局的实现，上图下文字
- 实现图片和文字的横向排布
- 调整主轴为Y轴
- 然后在侧轴让其居中
.search-box .login {
/* 内部使用flex布局样式 */
display: flex;
flex-direction: column;
/* 主轴侧轴的子元素样式均设置为center排布 */
align-items: center;
justify-content: center;
}
//插入伪元素精灵图的步骤
.search-box .login::after {
content: "";
display: block;
width: 22px;
height: 22px;
background: url(../images/sprite.png)no-repeat 0 -36px;
background-size: 21px auto;
order: -1;//对排布的先后顺序进行调整
}
- 背景图渐变使用伪元素
.focus::after {
content: "";
display: block;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}
local-nav栏部分
- 使用ul、li实现基本水平布局
- 每个li里面使用flex进行Y作为主轴，X作为侧轴居中
主导航部分
- 先书写common的结构和样式，对于特殊的样式再重新进行修改
background-image: url(../images/hot_sale.png), linear-gradient(to right, #ffbc49, #ffbc49);
- 设置背景属性
- 添加渐变色背景
- 后写的变色背景会覆盖掉前面先写的背景图
subnav-entry布局
- 导航栏不能使用flex分布，需要给添加百分比的宽度后进行布局自适应宽度
- 内部依旧是使用li标签，通过一个i的标签添加背景，span添加问题，设置Y为主轴，再居中对齐下就可以实现列表样式
热门活动区域
- 关于小箭头的书写
- 可以通过伪类来实现，设置一个上右边框
- 通过子绝父相的方法定位元素
- 通过旋转45°将小箭头确认到正确的方向上
i的标签添加背景，span添加问题，设置Y为主轴，再居中对齐下就可以实现列表样式
[外链图片转存中…(img-alrHagqp-1609680194967)]
热门活动区域
- 关于小箭头的书写
- 可以通过伪类来实现，设置一个上右边框
- 通过子绝父相的方法定位元素
- 通过旋转45°将小箭头确认到正确的方向上
