简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > flex 使用及弹性布局
Blogger Information
Blog 18
fans 1
comment 0
visits 16086
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
642 people have browsed it

flex 使用及弹性布局

  1. flex 快速实现水平和垂直居中
    css 代码
    1. .box {
    2.     display: flex;
    3.     justify-content: center;
    4.     align-items: center;
    5.   }
    效果演示

  1. flex 实现三列布局
    代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.     <title>flex实现三列布局</title>
    7.     <style>
    8.       * {
    9.         margin: 0;
    10.         padding: 0;
    11.         box-sizing: border-box;
    12.       }
    13.       /* 页面元素的基本属性设置 */
    14.       header,
    15.       footer {
    16.         height: 8vh;
    17.         background-color: violet;
    18.       }
    19.       .box {
    20.         height: 84vh;
    21.         margin: 0.5em 0;
    22.       }
    23.       .box aside {
    24.         background-color: skyblue;
    25.         min-width: 15em;
    26.       }
    27.       .box main {
    28.         background-color: springgreen;
    29.         min-width: calc(100% - 30em);
    31.         margin: 0 0.5em;
    32.       }
    33.       /* 中间主体用felx弹性盒布局实现 */
    34.       .box {
    35.         display: flex;
    36.       }
    37.     </style>
    39.   </head>
    40.   <body>
    41.     <header>页眉</header>
    42.     <div class="box">
    43.       <aside>左侧边栏</aside>
    44.       <main>内容主体</main>
    45.       <aside>右侧边了</aside>
    46.     </div>
    47.     <footer>页脚</footer>
    48.   </body>
    49. </html>

    效果演示

  1. grid 实现 demo0 中的三列布局
    代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>grid实现demo0中的三列布局</title>
  7.   </head>
  8.   <style>
  9.     * {
  10.       margin: 0;
  11.       padding: 0;
  12.       box-sizing: border-box;
  13.     }
  14.     body > * {
  15.       background-color: springgreen;
  16.     }
  17.     /* grid布局 */
  18.     body {
  19.       height: 100vh;
  20.       display: grid;
  21.       /* 页面布局可以看做三行三列的网格布局，其中页眉和页脚是夸3列 */
  22.       grid-template-rows: 8vh 1fr 8vh;
  23.       grid-template-columns: 15em 1fr 15em;
  24.       gap: 0.5em;
  25.     }
  26.     header,
  27.     footer {
  28.       grid-column: span 3;
  29.     }
  30.   </style>
  31.   <body>
  32.     <header>页眉</header>
  33.     <aside>左侧边栏</aside>
  34.     <main>内容主体</main>
  35.     <aside>右侧边了</aside>
  36.     <footer>页脚</footer>
  37.   </body>
  38. </html>
  39. 效果演示

  1. 弹性容器与弹性项目
    1. 任何元素都可以通过添加 display: flex 属性,转为弹性盒元素
    2. 转为 flex 元素后,它的内部的”子元素”就支持 flex 布局了
    3. 使用了 display: flex 属性的元素称为: flex 容器
    4. flex 容器中的”子元素”称之为: flex 项目
    5. 容器中的项目自动转为”行内块元素”(不管之前是什么类型)
    6. flex 容器允许嵌套，在实际工作中会大量使用到
      代码
      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8" />
      5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      6. <title>弹性容器与弹性项目</title>
      7. <style>
      8. * {
      9.   padding: 0;
      10.   margin: 0;
      11.   box-sizing: border-box;
      12. }
      13. .box {
      14.   display: flex;
      15.   height: 15em;
      16.   border: 1px solid black;
      17.   padding: 1em;
      18.   margin: 1em;
      19. }
      20. .item {
      21.   width: 5em;
      22.   height: 6em;
      23.   border: 1px solid black;
      24.   background-color: skyblue;
      25. }
      26. .box > .item:nth-of-type(4) {
      27.   display: flex;
      28. }
      29. .box > .item:nth-of-type(4) > div {
      30.   border: 1px solid black;
      31.   background-color: yellow;
      32. }
      33. </style>
      34. </head>
      35. <body>
      36. <div class="box">
      37. <div class="item">item1</div>
      38. <div class="item">item2</div>
      39. <div class="item">item3</div>
      40. <div class="item">
      41.   item4
      42.   <div>1</div>
      43.   <div>2</div>
      44.   <div>3</div>
      45. </div>
      46. </div>
      47. </body>
      48. </html>
      效果演示
  1. 弹性容器、项目、主轴、交叉轴
    • 弹性容器：
      弹性容器是具有display:flex属性元素
      弹性容器有单行容器和多行容器，其中多行容器在一行显示不下时允许换行
    • 项目：
      项目就是弹性容器里的元素
    • 主轴：
      主轴就是项目的排列方式的那条轴线
    • 交叉轴：
      交叉轴是与主轴垂直的那条轴线
  1. 容器属性
序号 属性 描述
1 flex-flow 主轴方向与换行方式
2 justify-content 项目在主轴上的对齐方式
3 align-items 项目在交叉轴上的对齐方式
4 align-content 项目在多行容器中的对齐方式
  • flex-flow属性的属性值
序号 属性值 描述
1 flex-flow: row nowrap; 单行容器，单行放不下不允许换行
2 flex-flow: row wrap; 多行容器，单行放不下允许换行
3 flex-flow: column nowrap; 主轴默认方向由水平方向改为垂直方向，单行放不下不允许换行
4 flex-flow: column wrap; 主轴默认方向由水平方向改为垂直方向，单行放不下允许换行
  • justify-content属性的属性值（项目在主轴上的对齐方式；单行容器）
序号 属性值 描述
1 justify-content: flex-start; 将所有项目是为一个整体，整个项目组靠容器左边排列
2 justify-content: flex-end; 将所有项目是为一个整体，整个项目组靠容器右边排列
3 justify-content: center; 将所有项目是为一个整体，整个项目组在容器中居中排列
4 justify-content: space-between 所有项目都是为独立的个体，两端对齐
5 justify-content: space-around 所有项目都是为独立的个体，分散对齐
6 justify-content: space-evenly 所有项目都是为独立的个体，平均对齐
  • align-items属性的属性值（项目在交叉轴上的对齐方式，单行容器）
序号 属性值 描述
1 align-items: stretch; 在交叉轴上，项目所占空间大小默认拉伸
2 align-items: flex-start; 在交叉轴上，项目紧靠顶部，大小由内容撑开
3 align-items: flex-end; 在交叉轴上，紧靠底部，大小由内容撑开
4 align-items: center; 在交叉轴上，居中排列，大小由内容撑开
  • align-content属性的属性值（项目在多行容器中的对齐方式）
序号 属性值 描述
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; 元素挤在一起，大小由内容撑开，平均排列在容器的中间
  1. 项目属性
序号 属性 描述
1 flex 项目的缩放比例与基准宽度
2 align-self 单个项目在交叉轴上的对齐方式
3 order 项目在主轴上排列顺序
  • flex属性的属性值
    flex: flex-grow flex-shrink flex-basis
    flex: 放大因子 收缩因子 项目在主轴上的基准宽度
序号 属性值 简写 描述
1 flex: 0 1 auto; flex: initial; 默认不放大或收缩
2 flex: 1 1 auto; flex: auto; 允许放大和收缩
3 flex: 0 0 auto; flex: none; 禁止放大和收缩

如果只有一个数字,省掉后面二个参数,表示的放大因子flex: 2;

  • align-self 属性的属性值(单个项目在交叉轴上的对齐方式)
序号 属性值 描述
1 align-self: stretch; 默认方式对齐
2 align-self: flex-start; 单个项目紧靠容器顶部排列，大小由内容撑开
3 align-self: flex-end; 单个项目紧靠容器底部排列，大小由内容撑开
4 align-self: center;; 单个项目紧靠容器居中排列，大小由内容撑开

单个项目在交叉轴上还支持绝对定位

  • order属性的属性值（项目在主轴上排列顺序）
    默认情况下，项目按照书写顺序，沿着主轴排列
    通过修改 order 属性order: 5;;order: -1;来改变项目在主轴上的排序。
Correcting teacher：天蓬老师天蓬老师

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！