Flex布局

一 使用条件

适合移动端或不考虑兼容性问题的PC端页面布局

二 布局体验

案例为移动端的携程案例

三 开始学习

flex 布局原理

采用Flex布局的元素为Flex容器，简称容器。所有子元素自动成为容器成员，称为容器项目，简称项目

即：父盒子为容器，给父盒子添加display:flex 来控制子盒子的排列方式
可以给子盒子横向排列也可以纵向排列

父盒子的常见属性

• flex-direction:设置主轴的方向
• justify-content:设置主轴上子元素的排列方式（主轴指的是flex-direction所设置的横向或者纵向）
• flex-wrap:设置主轴是否换行
• align-content:设置侧轴（与主轴垂直的方向）上的子元素的排列方式（多行：指在主轴方向上有多行项目）
• align-items:设置侧轴上的子元素的排列方式（单行：指在主轴上只有单行项目）
• flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

1. 父盒子常见属性的分析
   flex-direction 设置主轴的方向
   不设置，则默认主轴方向为X轴，水平向右 ；侧轴为Y方向，水平向下
   
   默认样式：
   

属性值	说明
row	默认值从左到右
row-reverse	从右到左（会发生反转）
column	从上到下
column-reverse	从下到上

使用之后：

使用row-reverse之后：

使用column：

使用column-reverse:

justify-content ：设置主轴上的子元素排列方式
使用前确定好主轴是哪一个(默认是row，既水平向右)
主轴就是：flex-direction所设置的方向（横向或者纵向）
主轴上的子元素:就是父元素下的每一个子元素，这个案例里面就是类为box1的项目

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

注：既然默认主轴是row，那么不用默认，在本例里面设置为column
flex-start:

flex-end：从尾部开始排列

center:
space-around

space-between:

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

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

wrap:换行 默认主轴方向为水平向右

align-items 设置侧轴上的子元素排列方式（单行 ）
该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用

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

flex-start:侧轴的顶部

flex-end：侧轴的底部

center

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

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

flex-start

flex-end

center：

space-around

space-between

stretch:平分空间

align-content 和 align-items 区别

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

flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
flex-flow:row wrap;.

子项常见的属性

• flex ：子项目占的份数
• align-self： 控制子项自己在侧轴的排列方式
• order：属性定义子项的排列顺序（前后顺序）

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

平分时，不指定高度，高度也会占剩余容器得高度
align-self 控制子项自己在侧轴上的排列方式
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

order 属性定义项目的排列顺序
数值越小，排列越靠前，默认为0。
注意：和 z-index 不一样。

四 携程案例

1. 技术选型
   采用Flex布局的方式布局

2. 搭建文件
   

3. 设置视口标签及初始化样式

    <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">/*normalize.css是移动端的通用样式，可在http://necolas.github.io/normalize.css/进行下载*/
    <link rel="stylesheet" href="css/index.css">/*index.css项目样式*/

4. 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;/* 如果溢出元素的内容区域的话，裁剪 div 元素中内容的左/右边缘 */
-webkit-tap-highlight-color: transparent;/*取消点击链接或可点击元素时出现的半透明背景*/
}

5. 案例所有源代码下载地址：https://github.com/haohuihai/Flex.git

五 CSS样式技术点

元素的水平居中方式：
已知宽度时：在定义固定宽度的容器

1. 使用margin：0 auto;

div{
width:200px;
margin:0 auto;}

2. 左右移动(适用于子盒子的宽度为父盒子宽度的一半)

div{
   width:200px;
	left: -50%;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
}

3. 子元素设置：display:inline-block;和父元素设置：display:text-align;

//html
  <div class="box">
        <div class="box1">
        </div>
  </div>
//css
 .box {
     text-align: center;
     background-color: green;
     width: 200px;
     height: 200px;
        }
 .box1 {
       display: inline-block;
       background-color: aquamarine;
       width: 100px;
       height: 100px;
        }

4. 父元素flex的实现方式,子元素居中

div{
	display:flex;
	justify-content:center;
}

5. 给父元素加上css3的fit-content
   这个使用条件：父元素样式加上width: fit-content; margin: 0 auto;对子元素进行居中，与父元素的宽度无关

//html
  <div class="box">
        <div class="box1">
        </div>
  </div>
//css
  .box { 
      width: fit-content;
      margin: 0 auto;
        }
  .box1 {
      background-color: aquamarine;
      width: 400px;
      height: 100px;
        }

详情戳：https://www.cnblogs.com/chengxs/p/11231906.html
box-shadow的用法：
box-shadow: h-shadow v-shadow blur spread color inset;

值	说明
h-shadow	必需的。水平阴影的位置。允许负值 正值为容器的右侧
v-shadow	必需的。垂直阴影的位置。允许负值 正值为容器的下方
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

精灵图的使用
原理参考文章：https://blog.csdn.net/sinat_34104446/article/details/83032762
使用绝对定位的方法
父盒子加相对定位，子盒子绝对定位

//html
<div class="box">
        <div class="box1">
        </div>
</div>
//css
 .box {
            height: 15px;
            width: 15px;
            position: relative;
        }
        .box1:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            width: 15px;
            height: 15px;
            background: url(images/sprite.png) no-repeat -59px -279px;
            background-size: 104px auto;
        }    

背景线性渐变

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

背景渐变必须添加浏览器私有前缀
起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是 top