H5移动开发布局之-------流式布局~弹性布局(flex) ----圣杯布局

布局形式

1. 流式布局

百分比布局:使用场景比较传统,通过百分比控制盒子宽度
demo :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
 .p {
   width: 100%;
   height: 50px;
   border: 1px solid #000;
 }
.p div {
   float: left;
 }
.s_1 {
   width: 30%;
   height: 100%;
   background-color: red;
 }
</style>
</head>
<body>
<div class="p">
 <div class="s_1"></div>
</div>
</body>
</html>
2. flex弹性布局
flex布局是相比较传统布局(流式布局操作非常快捷的布局)
  1. PC端浏览器支持情况比较差:IE11或更低版本不支持flex或仅支持部分;

  2. 使用: 如果是PC端页面布局,采用传统方式;如果是移动端或者是不考虑兼容的pc则采用flex;

  3. 注意 : 当为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。

  4. 基本介绍:

    • 采用 Flex 布局的元素,称为 Flex 容器(flexcontainer),父级简称"容器"。
    • 它的所有子元素自动成为容器成员,称为 Flex 项目(flexitem),简称"项目"。H5移动开发布局之-------流式布局~弹性布局(flex) ----圣杯布局_第1张图片
  • 重要属性
  • flex-direction:改变主轴的选择,元素就是按照不同的主轴进行排布

    1. 坐标轴:
      H5移动开发布局之-------流式布局~弹性布局(flex) ----圣杯布局_第2张图片
    2. 语法
      flex-direction:row —默认值 从左到右
      H5移动开发布局之-------流式布局~弹性布局(flex) ----圣杯布局_第3张图片
      • 默认:主轴: x 轴方向,水平向右;侧轴:是y 轴方向,水平向下;
      • 该属性是改变主轴的选择,即选择一个轴为主轴,另外一个自动成为侧轴;(这里说的并不是改变轴的指向);
      • 当前元素会按照主轴的正方向 进行 排列
  • justify-content:控制主轴上的元素的对齐方式,类似word里的左对齐,右对齐,居中对齐,分散对齐
    语法值 :H5移动开发布局之-------流式布局~弹性布局(flex) ----圣杯布局_第4张图片

  • flex-wrap:控制子元素是否换行

    • 不换行;子项目加起来的宽度超过父级的宽度时,子项宽度会被缩小,宽度只是不生效,必须设置
      flex-wrap:nowrap;
    • 换行: 子项的总宽加起来超过父级宽度,就会换行
      flex-wrap:wrap;
  • flex-flow:复合属性:设置主轴与换行

    flex-flow:row wrap;

  • align-items :该属性是控制子项在 侧轴(默认是y轴)上的排列方,在子项为单项(单行)的时候使用;
    • 整体一行元素看成整体,设置在侧轴上的对齐方式

    H5移动开发布局之-------流式布局~弹性布局(flex) ----圣杯布局_第5张图片

    • 语法:
      H5移动开发布局之-------流式布局~弹性布局(flex) ----圣杯布局_第6张图片
      特点:stretch:侧轴方向上进行拉伸;
  • align-content
    • 设置子项在侧轴上的排列方式 ,并且只能用于子项出现 换行 的情况
      H5移动开发布局之-------流式布局~弹性布局(flex) ----圣杯布局_第7张图片

    • 语法:
      H5移动开发布局之-------流式布局~弹性布局(flex) ----圣杯布局_第8张图片

    • flex .item{
      • 默认值 0 flex来表示占多少份数,不设置宽高,在宽高方向全部进行剩余空间的划分
        flex:;

      • 分配剩余空间的百分比,使用%,必须加起来是百分之百
        flex: 20%;
        }

  • 补充之秀起来---->线性渐变

    • 语法:

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

      1.必须有私有前缀
      2.起始方向:可以为方向名词left 或 deg度数,默认从上到下
      3.颜色个数:最少2两个颜色 `

彩蛋---------常见布局之圣杯布局

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* ********************************************************定位方式办法 */
    
    .box_1 {
      width: 100%;
      height: 100px;
      border: 1px solid #000;
      position: relative;
      box-sizing: border-box;
      padding: 0 100px;
    }
    
    .box_1 .left {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 0;
      left: 0;
    }
    
    .box_1 .right {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 0;
      right: 0;
    }
    
    .box_1 .mid {
      width: 100%;
      height: 100%;
      background-color: #ccc;
    }
    /* *****************************************************************flex布局 */
    
    .box_2 {
      margin-top: 10px;
      width: 100%;
      height: 100px;
      border: 1px solid #000;
      /* flex */
      display: flex;
      /* 默认主轴 行 */
    }
    
    .box_2 .left {
      width: 100px;
      height: 100px;
      background-color: red;
    }
    
    .box_2 .right {
      width: 100px;
      height: 100px;
      background-color: red;
    }
    
    .box_2 .mid {
      flex: 1;
      /*  */
      /* align-self: auto; 当父亲没有设置侧轴上的对齐,auto自动变为拉伸 */
      background-color: #ccc;
    }
    /* *-------------------大盒子不设置宽度,中间采用margin值的方法------------------------------------------------ */
    
    .box_3 {
      margin-top: 10px;
      height: 100px;
      border: 1px solid #000;
      position: relative;
    }
    .box_3 .left {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 0;
      left: 0;
    }
    .box_3 .right {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 0;
      right: 0;
    }
     .box_3 .mid {
      height: 100%;
      margin: 0 100px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="box_1">
    <div class="left"></div>
    <div class="mid"></div>
    <div class="right"></div>
  </div>
  <div class="box_2">
    <div class="left"></div>
    <div class="mid"></div>
    <div class="right"></div>
  </div>
 <div class="box_3">
    <div class="left"></div>
    <div class="mid"></div>
    <div class="right"></div>
  </div>
</body>

</html>

效果图
H5移动开发布局之-------流式布局~弹性布局(flex) ----圣杯布局_第9张图片

你可能感兴趣的:(概念笔记)