Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 定位、flex和grid布局常用属性及使用场景
Blogger Information
Blog 19
fans 0
comment 0
visits 13325
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和grid布局常用属性及使用场景
王浩
Original
1087 people have browsed it
  1. 作业内容：
  2. 1. 实例演示绝对定位与固定定位(完成课堂上的模态框案例) 
  3. 2. 背诵flex,grid所有常用属性,并熟练应用它们的使用场景; 
  4. 3. 制作 思维导图,总结flex,grid属性,以及他们之间的区别,尽可能用简写

  1. <!DOCTYPE html>
  2. <html lang="zh_CH">
  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.             .modal {
  11.                 display: none;
  12.             }
  13.             /* 遮罩层 */
  14.             .modal .modal-bg {
  15.                 position: fixed;
  16.                 top: 0;
  17.                 bottom: 0;
  18.                 left: 0;
  19.                 right: 0;
  20.                 background-color: rgb(0, 0, 0, 0.5);
  21.             }
  22.             /* 表单 */
  23.             .modal .modal-form {
  24.                 background-color: #fff;
  25.                 position: fixed;
  26.                 top: 40vh;
  27.                 left: 40vw;
  28.                 right: 40vw;
  29.             }
  30.             /* 表单元素 */
  31.             .modal > .modal-form > fieldset {
  32.                 display: flex;
  33.                 flex-direction: column;
  34.                 gap: 0.5vh;
  35.             }
  36.             /* 登陆层 */
  37.             .modal fieldset div {
  38.                 height: 30px;
  39.                 display: flex;
  40.                 place-content: space-between;
  41.                 place-items: stretch;
  42.                 gap: 1em;
  43.             }
  44.             /* 按钮 */
  45.             .modal button {
  46.                 flex: auto;
  47.             }
  48.         </style>
  49.     </head>
  50.     <body>
  51.         <div class="modal">
  52.             <div class="modal-bg" onclick="this.parentNode.style.display='none'"></div>
  53.             <form class="modal-form" action="login.php" method="post">
  54.                 <fieldset>
  55.                     <legend>用户登陆</legend>
  56.                     <input type="text" id="username" />
  57.                     <input type="password" id="password" />
  58.                     <div>
  59.                         <button>登陆</button>
  60.                         <button type="button" onclick="window.location='regist.html'">注册</button>
  61.                     </div>
  62.                 </fieldset>
  63.             </form>
  64.         </div>
  65.         <button onclick="document.querySelector('.modal').style.display='block';">登陆</button>
  66.     </body>
  67. </html>

flex和grid常用属性

这是针对flex容器的相关属性

选择器 属性名 值 含义
flex容器 flex-direction row 主轴方向，按行排列
flex容器 flex-direction column 主轴方向， 按列排列
flex容器 flex-wrap wrap 没有弹性，换行
flex容器 flex-wrap nowrap 不换行，弹性自适应
flex容器 flex-flow row wrap 包含上面两个属性，两个值
flex容器 place-content start 剩余空间排列，靠左
flex容器 place-content end 剩余空间排列，靠右
flex容器 place-content center 剩余空间排列，居中
flex容器 place-content space-between 剩余空间在非首尾项目中间
flex容器 place-content space-around 分散对齐，剩余空间在每个项目两边平均分配
flex容器 place-content space-evenly 剩余空间在所有项目两边平均分配
flex容器 place-items start 交叉线方向靠头部
flex容器 place-items end 交叉线方向靠尾部
flex容器 place-items center 交叉线方向居中
flex容器 place-items stretch auto 交叉线方向拉伸

总结一下：

  • flex-flow: 主轴方向 换行
  • place-content: 主轴上的排列
  • place-items: 交叉轴上的排列

这是针对flex项目上的属性

选择器 属性名 值 含义
flex项目 flex-grow 0 项目禁止放大
flex项目 flex-grow 1 项目允许放大
flex项目 flex-shrink 0 项目禁止收缩
flex项目 flex-shrink 1 项目允许收缩
flex项目 flex-shrink 1 项目允许收缩
flex项目 flex-basis auto 项目宽度，等同于width，但优先级大于width。
flex项目 flex 0 1 auto 包含上面所有属性 flex-grow flex-shrink flex-basis，也可以用一个关键字，即auto，相当于1 1 auto，还有none，相当于0 0 auto
flex项目 order 3 调整项目的显示顺序

这是针对grid容器的相关属性

选择器 属性名 值 含义
grid容器 grid-template-columns 10em 10em 10em 分为3列等宽，这个单位也可以用1fr 1fr 1fr
grid容器 grid-template-rows 10em 10em 10em 分为3行等宽，这个单位也可以用1fr 1fr 1fr，也可以用repeat(3, 10em)
grid容器 grid-auto-flow row 设置项目在隐式网格中的排列方式，行优先
grid容器 grid-auto-flow column 设置项目在隐式网格中的排列方式，列优先
grid容器 grid-auto-rows 1fr 隐式网格单元行的高度
grid容器 place-items start start 左上角
grid容器 place-items end end 右下角
grid容器 place-items start end 左下角
grid容器 place-items center center 居中，也可以只写一个center
grid容器 place-content start start 剩余空间的分配，项目全放左上角
grid容器 place-content end end 剩余空间的分配，项目全放右下角
grid容器 place-content center center 剩余空间的分配，项目居中
grid容器 place-content space-between 剩余空间非首尾均匀分配
grid容器 place-content space-around 剩余空间分散分配
grid容器 place-content space-evenly 剩余空间平均分配

这是针对grid项目的相关属性

选择器 属性名 值 含义
grid项目 grid-column-start 1 按照列标记数出来的
grid项目 grid-column-end 2 按照列标记数出来的，可以不写
grid项目 grid-row-start 1 按照行标记数出来的
grid项目 grid-row-end 2 按照行标记数出来的，可以不写
grid项目 grid-column-end span 2 跨越多少列，如果是span 1，也可以不写
grid项目 grid-row-end span 2 跨越多少行，如果是span 1，也可以不写
grid项目 grid-column 1/4 跨越3列
grid项目 grid-column 1/span 3 跨越3列
grid项目 grid-row 1/4 跨越3行
grid项目 grid-row 1/span 3 跨越3行
grid项目 grid-area 3/1/4/4 这个后期推荐使用
grid项目 grid-area 3/1/span 1/span 3 这个后期推荐使用

思维导图

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