Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 媒体查询、定位、Flex布局
Blogger Information
Blog 119
fans 3
comment 1
visits 94669
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
媒体查询、定位、Flex布局
赵大叔
Original
517 people have browsed it

1、媒体查询(实列演示)

  • 媒体：屏幕、打印机等
  • 查询：查询当前屏幕的宽度变化
  • 布局前提：在宽度受限，高度不受限的空间内完成
  • 根据页面宽度显示不同样式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>媒体查询</title>
  8.     <style>
  9.       .html {
  10.         font-size: 10px;
  11.       }
  12.       /* 按钮基本样式 */
  13.       .btn {
  14.         background-color: #46c1fa;
  15.         color: #faf6f6;
  16.         border: none;
  17.         outline: none;
  18.       }
  19.       .btn:hover {
  20.         /* 鼠标移入样式 */
  21.         cursor: pointer;
  22.         opacity: 0.8;
  23.         transition: 0.3s; /* 延时 */
  24.       }
  25.       .btn.s {
  26.         /* 1.2rem = 12px */
  27.         font-size: 1.2rem;
  28.       }
  29.       .btn.m {
  30.         font-size: 1.6rem;
  31.       }
  32.       .btn.l {
  33.         font-size: 1.8rem;
  34.       }
  36.       /* PC优先，从最大的屏幕开始匹配
  37.         > 414px
  38.         /* only screen 仅支持屏幕，默认值可以省略 
  39.         @media only screen
  40.         @media
  41.         */
  42.       @media (min-width: 414px) {
  43.         html {
  44.           font-size: 12px;
  45.         }
  46.         .btn {
  47.           background-color: #c01ef1;
  48.         }
  49.       }
  51.       @media (min-width: 375px) and (max-width: 413px) {
  52.         html {
  53.           font-size: 14px;
  54.         }
  55.         .btn {
  56.           background-color: #e089fa;
  57.         }
  58.       }
  60.       @media (max-width: 374px) {
  61.         html {
  62.           font-size: 16px;
  63.         }
  64.         .btn {
  65.           background-color: #e2b9ee;
  66.         }
  67.       }
  68.     </style>
  69.   </head>
  70.   <body>
  71.     <!-- 媒体：屏幕、打印机等 -->
  72.     <!-- 查询：查询当前屏幕的宽度变化，
  73.     布局前提：在宽度受限，高度不受限的空间内完成
  74.     根据页面宽度现实不同样式
  75.     -->
  76.     <button class="btn s">按钮一</button>
  77.     <button class="btn m">按钮二</button>
  78.     <button class="btn l">按钮三</button>
  79.   </body>
  80. </html>

width >= 414px效果展示：

375px <= width <= 414px效果展示：

width < 375px效果展示：

2、定位与固定定位实列

STT 定位 说明
1 position: static; 静态定位,默认文档流
2 position: relative; 相对定位,相对自身在文档流中原来位置
3 position: absolute; 绝对定位,相对距离自己最近的定位元素包含块
4 position: fixed; 固定定位,相对html根元素定位

固定定位实列(模态框)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>固定定位</title>
  8.     <style>
  9.         *{
  10.             /* 初始化样式 */
  11.             box-sizing: border-box;
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  15.         .container{
  16.             margin: auto;
  17.             width: 380px;
  18.             height: 228px;
  19.             background-color: #F5DEB3;
  21.             /* 固定定位 */
  22.             position: fixed;
  23.             /* 顶部要留出头部导航的位置 */
  24.             top: 10em;
  25.             /* 左右相等,将表单挤到正中间 */
  26.             left: 20em;
  27.             right: 20em;
  28.         }
  29.         .container > h2{
  30.             margin-top: 10px;
  31.             margin-left: 10px;
  32.         }
  33.         .form-login{
  34.             display: flex;
  35.             flex-direction: column;
  37.         }
  38.         .form-login-input{
  39.             display: flex;
  40.             height: 28px; 
  41.             margin-top: 10px;
  42.             margin-left: 10px;
  43.         }
  44.         .form-login > button{
  45.             background-color: #60e0f7;
  46.             margin: 18px auto;
  47.             width: 120px;
  48.             height: 38px;
  49.         }
  50.         .motal{
  51.             /* 固定布局,定位空间在整个屏幕 */
  52.             position: fixed;
  53.             /* 屏幕视口的四个顶点的坐标 */
  54.             top: 0;
  55.             left: 0;
  56.             right: 0;
  57.             bottom: 0;
  58.             /* 背景半透明 */
  59.             background-color: #3b393980;
  60.         }
  62.     </style>
  63. </head>
  64. <body>
  65.     <div class="motal"></div>
  66.     <div class="container">
  67.         <h2>用户登录</h2>
  68.         <form action="" class="form-login">
  69.             <div class="form-login-input">
  70.                 <label for="">用户名:</label>
  71.                 <input type="text" neme="username" placeholder="example@mail.com">
  72.             </div>
  73.             <div class="form-login-input">
  74.                 <label for="">密码:</label>
  75.                 <input type="password" name="password" placeholder="password">
  76.             </div>
  77.             <div class="form-login-input">
  78.                 <label for="">验证码:</label>
  79.                 <input type="text" name="captcha">
  80.             </div>
  82.             <button>登录</button>
  83.         </form>
  84.     </div>
  86. </body>
  87. </html>

模态框效果展示：

3、Flex 常用属性(实列演示)

  • 定义弹性容器: display: flex;
  • 创建 flex 行内容器: display: inline-flex;,多个才有效

3.1 flex-direction: 设置 flex 容器主轴方向

STT 代码 说明
1 flex-direction: row; 设置主轴方向: 水平,左到右,默认
2 flex-direction: row-reverse; 设置主轴方向: 水平,右到左
3 flex-direction: column; 设置主轴方向: 垂直,上到下,默认
4 flex-direction: column-reverse; 设置主轴方向: 垂直,下到上

3.2 flex-wrap: 设置 flex 容器主轴方向

STT 代码 说明
1 flex-wrap: nowrap; 默认值，不换行，如果当前容器容纳不下，项目会自动收缩
2 flex-wrap: wrap; 换行，当前容器容纳不下项目，项目会换行显示，此时创建的容器为多行容器
3 flex-wrap: wrap-reverse; 反向换行

3.3 flex-flow: 设置 flex 容器主轴方向与项目换行的简写

STT 代码 说明
1 flex-flow: row nowrap; 水平 不换行，默认值
2 flex-flow: row wrap; 水平 换行
3 flex-flow: row wrap-reverse; 水平 反向换行
4 flex-flow: column nowrap; 垂直 不换行
5 flex-flow: column wrap; 垂直 换行
6 flex-flow: column wrap-reverse; 垂直 反向换行

3.4 justify-content: 设置 flex 项目在容器主轴方向上的对齐方式

STT 代码 说明
1 justify-content: flex-start; 主轴起始线对齐，默认
2 justify-content: flex-end; 主轴终止线对齐
3 justify-content: center; 居中对齐
4 justify-content: space-between; 两端对齐，剩余空间在第 1 个和最后 1 个项目之外的项目间平均分配
5 justify-content: space-around; 分散对齐，剩余空间在每个项目两侧平均分配
6 justify-content: space-evenly; 平均对齐，剩余空间在每个项目之间平均分配

3.5 align-content: 设置 flex 项目在多行容器中交叉轴方向上的对齐方式

STT 代码 说明
1 align-content: stretch; 项目拉伸，占据事整个交叉轴
2 align-content: flex-start; 所有项目与交叉轴启始线（顶部）对齐
3 align-content: flex-end; 所有项目与交叉轴终止线对齐
4 align-content: center; 所有项目与交叉轴中间线对齐，居中对齐
5 align-content: space-between; 两端对齐，剩余空间在头尾项目之外的项目间平均分配
6 align-content: space-around; 分散对齐，剩余空间在每个项目两侧平均分配
7 align-content: space-evenly; 平均对齐，剩余空间在每个项目之间平均分配

3.6 align-items: 设置 flex 项目在容器交叉轴方向上的对齐方式 |

STT 代码 说明
1 align-items: flex-start; 交叉轴起始线对齐，默认
2 align-items: flex-end; 交叉轴终止线对齐
3 align-items: center; 居中对齐

3.7 align-self: 单独设置某个 flex 项目在容器交叉轴方向上的对齐方式 |

STT 代码 说明
1 align-self: auto; 继承align-items属性值
2 align-self: flex-start; 与交叉轴启始线对齐
3 align-self: flex-end; 交叉轴终止线对齐
4 align-self: center; 交叉轴中间线对齐，居中对齐
5 align-self: stretch; 在在交叉抽上拉伸
6 align-self: baseline; 与基线对齐（与内容相关，用的很少）

3.8 flex-grow: 设置项目放大因子——分配主轴剩余空间

STT 代码 说明
1 flex-grow: 0;/flex-grow: initial; 项目不放大保持初始值
2 flex-grow: 1; 项目允许放大，剩余空间平均分配给每个项目
3 flex-grow: n; n 为整数，创建 flex 行内容器
  • 每个项目放大因子不同时，先求出所有因子之和，剩余空间/因子和*因子=对应项目的放大数

3.9 flex-shrink: 项目收缩因子——主轴空间小于项目空间时，收缩项目空间

STT 代码 说明
1 flex-shrink: 0; 项目禁止收缩
2 flex-shrink: 1;/flex-shrink: initial;; 项目允许收缩
3 flex-shrink: n; n 为整数，创建 flex 行内容器
  • 超出多少/收缩因子和*收缩因子=每个要收缩的值

3.10 flex-basis: 项目计算尺寸——设置项目大小

  • 在分配多余空间前，项目占据的主轴空间
  • 浏览器根据这个属性，计算主轴是否有多余空间
  • 该属性会覆盖项目原始大小(width/height)
  • 该属性会被项目的(min-width/min-height)值覆盖
STT 属性值 说明
1 flex-basis: auto; 默认值，项目原来的大小
2 flex-basis: *px; 项目像素
3 flex-basis: %; 项目百分比
  • 优先级：项目大小 < flex-basis < min-width/min-height

3.11 flex: 项目放大、项目收缩、计算尺寸简写

  • 三值语法：flex: flex-grow flex-shrink flex-basis，完整语法
STT 属性值 说明
1 flex: 0 1 auto; 默认值，不放大 可收缩 初始宽度
2 flex: 1 1 auto; 项目自动放大或收缩适应容器
3 flex: 0 0 100px; 项目按计算大小填充到容器
  • 双值语法：flex: flex-grow flex-basis
STT 属性值 说明
1 flex: 0 180px; 禁止放大，按计算大小填充到容器
  • 单值语法：flex: flex-grow flex-basis
STT 属性值 说明
1 flex: 1; flex: 1 1 auto;
2 flex: 180px; flex: 1 1 180px;
3 flex: initial; flex: 0 1 auto;
4 flex: auto; flex: 1 1 auto;
5 flex: none; flex: 0 0 auto;

3.12 order: 设置项目顺序

  • 选中项目==>order(n), n 是数字，支持负数；数字越小排序越靠前

实例演示查看地址

Flex 常用属性演示

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post