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

时间  2020-06-23 标签 h5 移动 开发 布局 弹性 flex

布局形式

1. 流式布局

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

<!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或仅支持部分；web

  2. 使用: 若是是PC端页面布局，采用传统方式；若是是移动端或者是不考虑兼容的pc则采用flex；浏览器

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

  4. 基本介绍:svg

    • 采用 Flex 布局的元素，称为 Flex 容器（flexcontainer），父级简称"容器"。
    • 它的全部子元素自动成为容器成员，称为 Flex 项目（flexitem），简称"项目"。在这里插入图片描述
  • 重要属性

  • flex-direction:改变主轴的选择，元素就是按照不一样的主轴进行排布布局

    1. 坐标轴:
      在这里插入图片描述
    2. 语法
      flex-direction:row —默认值 从左到右
      在这里插入图片描述
      • 默认：主轴： x 轴方向，水平向右；侧轴：是y 轴方向，水平向下；
      • 该属性是改变主轴的选择，即选择一个轴为主轴，另一个自动成为侧轴；(这里说的并非改变轴的指向)；
      • 当前元素会按照主轴的正方向 进行 排列

  • justify-content:控制主轴上的元素的对齐方式，相似word里的左对齐，右对齐，居中对齐，分散对齐
    语法值 :在这里插入图片描述flex

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

    • 不换行；子项目加起来的宽度超过父级的宽度时，子项宽度会被缩小，宽度只是不生效，必须设置
      flex-wrap:nowrap;
    • 换行: 子项的总宽加起来超过父级宽度，就会换行
      flex-wrap:wrap;

  • flex-flow:复合属性：设置主轴与换行spa

    flex-flow:row wrap;code

  • align-items :该属性是控制子项在 侧轴（默认是y轴）上的排列方，在子项为单项（单行）的时候使用；
    • 总体一行元素当作总体，设置在侧轴上的对齐方式

    在这里插入图片描述

    • 语法：
      在这里插入图片描述
      特色：stretch：侧轴方向上进行拉伸；
  • align-content

    • 设置子项在侧轴上的排列方式 ，而且只能用于子项出现 换行 的状况
      在这里插入图片描述

    • 语法:
      在这里插入图片描述

    • flex .item{

      • 默认值 0 flex来表示占多少份数，不设置宽高，在宽高方向所有进行剩余空间的划分
        flex:<number>;

      • 分配剩余空间的百分比,使用%，必须加起来是百分之百
        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>

效果图
在这里插入图片描述

联系我们 沪ICP备13005482号-10