移动端布局-flex布局

目录

一.flex布局体验

1.1传统布局与flex布局

1.2初体验

1.搭建HTML结构

2.CSS样式

3.实现效果

二.flex布局原理

三.flex布局父项常见属性

3.1常见父项属性

3.2flex-direction 设置主轴的方向

1.主轴与侧轴

2.属性值

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

 flex-direction：row的情况：

 flex-direction：column的情况

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

3.5align-items设置侧轴上的子元素排列方式（单行）

3.6align-content设置侧轴上的子元素的排列方式（多行）

3.7align-content和align-items区别

3.8flex-flow

四.flex布局子项常见属性

4.1flex属性

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

4.3order属性定义项目的排列顺序

五.携程网首页案例制作

1.技术选型

2.搭建相关文件夹结构

3.引入视口标签以及初始化样式

4.常用初始化样式

5.遇到的问题

6.常见flex布局思路

---

一.flex布局体验

1.1传统布局与flex布局

 建议：

• 如果是PC端页面布局，我们还是传统布局

• 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局

1.2初体验

1.搭建HTML结构

2.CSS样式

3.实现效果

 span无需display即可指定宽度高度等

---

二.flex布局原理

flex是flexible box的缩写，意为“弹性布局”，用来为盒状模型提供最大灵活性，任何一个容器都可指定为flex布局

• 当我们为父元素设置flex布局以后，子元素的float（不需要浮动），clear（不需要清除浮动）和vertical-align（flex可以实现盒子垂直居中）属性将失效

• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局的元素，称为flex容器（flex container），简称“容器”。他的所有子元素自动成为容器成员，称为flex项目（flex item）简称“项目”

总结flex布局原理：

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

---

三.flex布局父项常见属性

3.1常见父项属性

以下有6个属性是对父元素设置的

• flex-direction：设置主轴的方向

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

• flex-wrap：设置子元素是否换行

• align-content：设置侧轴上的子元素的排列方式（多行）

• align-items：设置侧轴上的子元素排列方式（单行）

• flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

3.2flex-direction 设置主轴的方向

1.主轴与侧轴

在flex布局中，是分为主轴和侧轴两个方向的，同样的叫法有：行和列、x轴和y轴

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

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

2.属性值

flex-direction属性决定主轴的方向（即项目的排列方向）

注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，而我们的子元素是按主轴来排列的

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

justify-content属性定义了项目在主轴上的对齐方式

注意：使用这个属性之前一定要确定好主轴是哪个

 flex-direction：row的情况：

实现效果：

justify-content：center；

 justiy-content：space-between；

 flex-direction：column的情况

justift-content：center；

 justify-content：space-between；

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

默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的

  
    

      1
      2
      
      
    
  

flex-nowrap（默认）：

 flex-wrap：

3.5align-items设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单项的时候使用

  
    

      1
      2
      3
    
  

flex-direction：row，水平垂直居中：

 flex-dirextion：column，水平垂直居中：

 align-items：stretch；使用时子元素不要指定高度，不然无效

3.6align-content设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没效果的

align-content：center；

 align-content：space-between：

 align-content：stretch；

3.7align-content和align-items区别

• align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸

• align-content适用于换行的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸、以及平均分配剩余空间等属性值

• 总结就是单行找align-items多行找align-content

3.8flex-flow

flex-flow属性是flex-direction和flex-wrap属性的复合属性

  
    

      1
      2
      3
      4
      5
    
  

四.flex布局子项常见属性

• flex子项目占的份数

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

• order属性定义子项的排列顺序（前后顺序）

4.1flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

  
    

      

      

      

    
    

      1
      2
      3
    
  

实现效果：

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

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值是auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

4.3order属性定义项目的排列顺序

数字越小，排列越靠前，默认为0

注意：和z-index不一样

 
    

      1
      2
      3
    
  

五.携程网首页案例制作

携程网移动端首页

访问地址：m.ctrip.com

1.技术选型

方案：我们采取单独制作移动页面方案

技术：布局采取flex布局

2.搭建相关文件夹结构

 

3.引入视口标签以及初始化样式

4.常用初始化样式

body {
  font: normal 16px/1.5 PingFangSC-regular, Tahoma, Lucida Grande, Verdana,
    Microsoft Yahei, STXihei, hei;
  color: #000;
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: none;
  max-width: 540px;
  min-width: 320px;
  margin: 0 auto;
  background: #f4f4f4;
}

5.遇到的问题

1.盒子固定定位后，宽度和浏览器一致？

.search-index {
  /* 固定定位跟父级没有关系，他以屏幕为准 */
  position: fixed;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  /* 固定的盒子必须要有宽度 */
  width: 100%;
  max-width: 540px;
  min-width: 320px;
  height: 44px;
}

解决方法：设置最小，最大宽度。然后通过定位加translate来做到水平居中。此处不写left也可实现水平居中，子盒子会继承body的margin：0 auto实现居中。

 2.空格问题

在html结构中按空格可以添加一个空格，但多个时只有一个有效， ；可以添加多个并生效。

3.行高问题

行高最好等于content内容区域，所以如果行高包含上面边框，文字就会偏下。

上下是都有边框，但是在有边框情况，又是c3盒模型，盒子做了自减，所以实际内容区域变小，原本26px的行高，在24px的内容里装不下，字体下边空白行间距溢出，所以看见字体偏下。传统盒模型就没有这个影响，

.search-index .search {
  flex: 1;
  height: 26px;
  border: 1px solid #0086f6;
  margin: 7px 10px;
  border-radius: 13px;
  font-size: 12px;
  line-height: 24px;
  color: #666;
}
.search-index .search::before {
  content: "";
  display: inline-block;
  background: url(../images/sprite.png) no-repeat -59px -279px;
  background-size: 104px auto;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  margin: 5px;
}

6.常见flex布局思路

 

7.背景线性渐变

语法：

background:linear-gradient(起始方向，颜色1，颜色2，...);
background:-webkit-linear-gradient(left,red,blue);
background:-webkit-linear-gradient(left,top,red,blue);

背景渐变必须添加浏览器私有前缀

起始方向可以是：方位名称或度数，如果省略默认就是top