Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex布局基础知识和常见属性
Blogger Information
Blog 24
fans 1
comment 0
visits 20863
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
608 people have browsed it

flex布局介绍

  • 传统布局: 基于浮动(float)与定位(position)
  • flex弹性布局: 灵活,强大,简单,直观
  • flex布局没有方向性
  • flex布局空间自由分配, 自动对齐

  • flex仅适用于简单的线性布局

    flex功能预览

    1. <html lang="en">    
    2.   <head>
    3.       <meta charset="UTF-8">
    4.       <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.       <title>Document</title>
    6.       <style>
    7.           .container {
    8.               width: 500px;
    9.               border: 1px sienna solid;
    10.               /*如果这个容器的内容要使用FLex布局，第一步需要将此容器转换为弹性盒布局*/
    11.               display: flex;
    12.           }    
    13.           /*一旦将父元素转换为弹性盒布局，里面的子元素自动成为 弹性项目  必须是子元素。孙元素不行
    14.   不管这个项目标签之前是什么类型，都转换为行内块
    15.   可以设置宽度和高度*/
    16.           .container>.item {    
    17.               flex: auto;    
    18.               height: 50px;        
    19.           }
    20.       </style>
    21.   </head>    
    22.   <body>
    23.       <div class="container">
    24.           <div class="item">1</div>
    25.           <a class="item">2</a>
    26.           <span class="item">3</span>
    27.           <div class="item">4</div>
    28.       </div>
    29.   </body>    
    30.   </html>

    页面效果如下：

    flex换行显示

    1. <html lang="en">
    2. <head>
    3.   <meta charset="UTF-8">
    4.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.   <title>Document</title>
    6.   <style>
    7.       .container {
    8.           width: 300px;
    9.           display: flex;
    10.       }
    11.       .container>.item {
    12.          /* width: 50px;*/
    13.           /*会剩余50像素的剩余空间*/
    14.           width: 120px;
    15.           /*内容会被缩放*/
    16.       }
    17.       /*换行显示*/
    18.       .container {
    19.           flex-wrap: wrap;
    20.           /*默认是nowrap 不换行*/
    21.       }
    22.   </style>
    23. </head>
    24. <body>
    25.   <div class="container">
    26.       <div class="item">1</div>
    27.       <div class="item">2</div>
    28.       <div class="item">3</div>
    29.       <div class="item">4</div>
    30.       <div class="item">5</div>
    31.   </div>
    32. </body>
    33. </html>

    flex单行容器项目的对齐方式

    项目位于容器的开头

    1.    justify-content: flex-start;
    2.    /*默认值，项目位于容器的开头。剩余空间在最右侧*/

    项目位于容器的结尾

    1.    justify-content: flex-end;
    2.    /*项目位于容器的结尾，剩余空间在最左侧*/

    项目位于容器的中心

    1. justify-content: center;
    2. /*项目位于容器的中心。剩余空间平均分配在两侧*/

    两端对齐

    1. justify-content: space-between;
    2. /*两端对齐，剩余空间在除了首尾项目之外的所有项目之间分配*/

    分散对齐

    1. justify-content: space-around;
    2. /*分散对齐,剩余空间在每个项目两侧分配*/

    平均分配

    1. justify-content: space-evenly;
    2. /*平均分配，每个项目之间的剩余空间是相等的*/

    多行容器中的项目对齐方式

    项目在开始

    1. <html lang="en">
    2. <head>
    3. <meta charset="UTF-8" />
    4. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    5. <title>Flex弹性盒布局多行容器中的项目对齐方式</title>
    6. <style>
    7.   .container {
    8.     width: 300px;
    9.     display: flex;
    10.     flex-wrap: wrap;
    11.     height: 150px;
    12.     /*align-content 为多行容器设置项目对齐方式*/
    13.    align-content: stretch;/* 默认值 */
    14.   }
    15.   .container>.item {
    16.     width: 60px;
    17.   }
    18. </style>
    19. </head>
    20. <body>
    21. <div class="container">
    22.   <div class="item">1</div>
    23.   <div class="item">2</div>
    24.   <div class="item">3</div>
    25.   <div class="item">4</div>
    26.   <div class="item">5</div>
    27.   <div class="item">6</div>
    28.   <div class="item">7</div>
    29.   <div class="item">8</div>
    30. </div>
    31. </body>
    32. </html>

    项目在开始

    1. /*1.容器剩余空间在项目两边如何分配，将所有项目视为一个整体*/
    2.     align-content: flex-start;
    3.     /*项目在开始*/

    项目在结尾

    1. align-content: flex-end;
    2.     /*项目在结尾*/

    项目在中间

    1. align-content: center;

    两端对齐

    1. justify-content: space-between;
    2. /*两端对齐，剩余空间在除了首尾项目之外的所有项目之间分配*/

    分散对齐

    align-content: space-around;

    平均分配

    align-content: space-evenly;

    项目在交叉轴上的排列

    1. <html lang="en">
    2.   <head>
    3.     <meta charset="UTF-8" />
    4.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    5.     <title>项目在交叉轴上的排列</title>
    6.     <style>
    7.       .container {
    8.         width: 300px;
    9.         height: 150px;
    10.         display: flex;
    11.         /*项目在交叉轴上默认是拉伸的*/
    12.         align-items: stretch;   /*默认值*/   
    13.       }
    14.       .container>.item {
    15.         width: 60px;
    16.       }
    17.     </style>
    18.   </head>
    19.   <body>
    20.     <div class="container">
    21.       <div class="item">1</div>
    22.       <div class="item">2</div>
    23.       <div class="item">3</div>
    24.     </div>
    25.   </body>
    26.   </html>

    项目在开始

    align-items: flex-start;

    项目在结尾

    align-items: flex-end;

    align-items: center;

    主轴与项目排列方向的简写

    1. <html lang="en">
    2. <head>
    3.   <meta charset="UTF-8" />
    4.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    5.   <title>项目在交叉轴上的排列</title>
    6.   <style>
    7.     .container {
    8.       width: 300px;
    9.       height: 150px;
    10.       display: flex;
    12.       /*默认是row  nowrap*/
    13.       flex-flow: column nowrap;
    14.     }
    15.     .container > .item {
    16.       width: 60px;
    17.     }
    18.   </style>
    19. </head>
    20. <body>
    21.   <div class="container">
    22.     <div class="item">1</div>
    23.     <div class="item">2</div>
    24.     <div class="item">3</div>
    25.     <div class="item">4</div>
    26.     <div class="item">5</div>
    27.   </div>
    28. </body>
    29. </html>

    主轴在垂直方向的项目排列

    1. <html lang="en">
    2. <head>
    3.   <meta charset="UTF-8" />
    4.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    5.   <title>主轴在垂直方向的项目排列</title>
    6.   <style>
    7.     .container {
    8.       width: 300px;
    9.       height: 150px;
    10.       display: flex;
    11.       flex-direction: column; /*默认是row*/
    12.     }
    13.     .container > .item {
    14.     }
    15.   </style>
    16. </head>
    17. <body>
    18.   <div class="container">
    19.     <div class="item">1</div>
    20.     <div class="item">2</div>
    21.     <div class="item">3</div>
    22.   </div>
    23. </body>
    24. </html>

总结

Flex布局相对于浮动和定位，难以理解。要多实践多思考，才能掌握于心。加油！

Correcting teacher：GuanhuiGuanhui

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