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

最新推荐文章于 2024-05-08 11:06:58 发布

别动我代码儿

最新推荐文章于 2024-05-08 11:06:58 发布

阅读量1.3k

点赞数 3

分类专栏： CSS 文章标签：流式布局 flex布局圣杯布局线性渐变

本文链接：https://blog.csdn.net/weixin_45176415/article/details/102881616

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

布局形式

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布局是相比较传统布局（流式布局操作非常快捷的布局)

PC端浏览器支持情况比较差：IE11或更低版本不支持flex或仅支持部分；
使用: 如果是PC端页面布局，采用传统方式；如果是移动端或者是不考虑兼容的pc则采用flex；
注意 : 当为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
基本介绍:
- 采用 Flex 布局的元素，称为 Flex 容器（flexcontainer），父级简称"容器"。
- 它的所有子元素自动成为容器成员，称为 Flex 项目（flexitem），简称"项目"。

重要属性
flex-direction:改变主轴的选择，元素就是按照不同的主轴进行排布
1. 坐标轴:
2. 语法
  flex-direction:row —默认值从左到右
  - 默认：主轴： x 轴方向，水平向右；侧轴：是y 轴方向，水平向下；
  - 该属性是改变主轴的选择，即选择一个轴为主轴，另外一个自动成为侧轴；(这里说的并不是改变轴的指向)；
  - 当前元素会按照主轴的正方向进行排列
justify-content:控制主轴上的元素的对齐方式，类似word里的左对齐，右对齐，居中对齐，分散对齐
语法值 :
flex-wrap:控制子元素是否换行
- 不换行；子项目加起来的宽度超过父级的宽度时，子项宽度会被缩小，宽度只是不生效，必须设置
  flex-wrap:nowrap;
- 换行: 子项的总宽加起来超过父级宽度，就会换行
  flex-wrap:wrap;
flex-flow:复合属性：设置主轴与换行

flex-flow:row wrap;
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>

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

别动我代码儿

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
H5移动开发布局之-------流式布局~弹性布局(flex) ----圣杯布局

布局形式1. 流式布局百分比布局:使用场景比较传统，通过百分比控制盒子宽度demo :<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scal...
复制链接

扫一扫