Flex伸缩布局

Flex伸缩布局

• flexible Box的缩写，意为弹性布局

Flex 布局原理

• 当父元素设置为 flex 布局之后子元素的 float clear 和 vertical-align 属性都将失效

• 采取 Flex 布局的元素我们称为 Flex容器

• Flex容器的子元素称为容器成员，简称项目

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

• Flex 可以使行内元素可以设置高度和宽度

Flex 布局父项常用属性

• 给父元素添加 flex 属性

div {
   
    display : flex;
}

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

flex-direction 设置主轴方向

• 主轴与侧轴：x 和 y 两个方向

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

• 主轴和侧轴是可以变换的，看 flex-direction 设置谁为主轴，剩下的就是侧轴，子元素是跟着主轴来排列的

属性值	说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

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

• justify-content 属性定义了项目在主轴上的对齐方式
• 注意：在使用这个属性之前一定要确定主轴

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

flex-wrap 是否放在一行

• flex-wrap 属性默认让所有的元素再一行显示，如果放不下了会把子元素的宽度缩小强制放在一行

属性值	说明
nowrap	默认值 不换行
wrap	换行

align-items 侧轴排列方式 (单行)

• align-items属性控制侧轴上单行子元素排列方式

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

• 设置 stretch 属性的子元素不设置高度的话拉伸成和父盒子一样的高度

align-content 侧轴排列方式 (多行)

• align-content 设置子元素有多行时的排列方式

属性值	说明
flex-start	默认值 从侧轴头部开始排列
flex-end	从侧轴尾部开始排列
center	整体在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

flex-flow 复合属性

• flex-flow 属性是 flex-direction 和 flex-wrap 的复合属性
• 也就是同时设置主轴方向和主轴

div {
   
  flex-direction: row;
  flex-wrap: wrap;
}
/* 上下两个是相等的 */
div {
   
  flex-flow: row wrap;
}

Flex 布局子项常见属性

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

Flex 属性

• 分配剩余空间，用flex来表示占多少份

div {
   
  flex: number;
  /* 默认为0 */
}

align-self 控制子项自己在侧轴上的排列方式

• 可以允许单个项目在侧轴上有不一样的对齐方式，可以覆盖align-items 属性，默认值为 auto 表示继承align-items 属性
• 如果没有父元素，等同于 stretch

div {
   
  align-self: flex-end;
}
/* 只把这个盒子移到后面 */

order 定义元素的排列顺序

• 数值越小, 排列越靠前, 默认为0
• 这样更改的话没有动html结构，使用css来改变元素的位置

<!-- 我们把 2 放到 1 的前面 -->
<div>1</div>
<div>2</div>
<style>
  body:nth-child(2) {
    
    order: -1;
  }
</style>

---

• 下面是携程网移动端的案例，请选择观看

携程网首页移动端案例

• 移动端的最小宽度是 320px
• 初始化 body 示例：

/* body初始化样式 */
body {
   
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
    color: #000;
    background: #f2f2f2;
    /* 横滚动条隐藏 */
    overflow-x: hidden;
    /* 防止点击之后出现背景高亮 */
    -webkit-tap-highlight-color: transparent;
}

顶层搜索栏

• 搜索栏父盒子使用固定定位，固定定位需要给出宽度

• 固定定位和父级没有关系，他以屏幕为主

  • 这里使用left: 50% 和 transform: translateX(-50%) 来使他居中

• html结构：

<div class="search-index">
    <div class="search">搜索：目的地/酒店/景点/航班号</div>
    <a href="#" class="user">我 的</a>
</div>

• 顶部最大的模块css

/* 搜索模块 */
.search-index {
   
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* 固定定位的盒子要有宽度 */
    width: 100%;
    min-width: 320px;
    max-width: 540px;
    height: 4