Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex容器中的四个属性
Blogger Information
Blog 16
fans 0
comment 0
visits 9532
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容器中的四个属性
Blastix Riotz
Original
512 people have browsed it

flex容器中的四个属性

序号 属性 描述
1 flex 主轴方向与换行方式
2 justify-content 项目在主轴上的对齐方式
3 align-items 项目在交叉轴上的对齐方式
4 align-content 项目在多行容器中的对齐方式

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>flex容器与项目</title>
  8.     <style>
  9.          /* 初始化 */
  10.         * {
  11.             margin: 0;
  12.             padding: 0:；
  13.             box-sizing: border-box;
  14.         }
  15.         :root {
  16.             font-size: 10px;
  17.         }
  18.         .text {
  19.             /* 转为flex布局，这就元素就叫flex容器 */
  20.             display: flex;
  21.             height: 20rem;
  22.             border: 1px solid #000;
  23.         }
  24.         /* 项目样式：必须是flex容器的子元素 */
  25.         /* flex容器中的子元素自动成为flex容器的项目 */
  26.         .text > .item {
  27.             padding: 1rem;
  28.             background-color: lightcyan;
  29.             border: 1px solid #000;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div class="text">
  35.     <div class="item">item1</div>
  36.     <div class="item">item2</div>
  37.     <div class="item">item3</div>
  38.     </div>
  39. </body>
  40. </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.       .text {
    10.           /* 转为flex布局，这就元素就叫flex容器 */
    11.           display: flex;
    12.           height: 20rem;
    13.           border: 1px solid #000;
    14.       }
    15.       /* 项目样式：必须是flex容器的子元素 */
    16.       /* flex容器中的子元素自动成为flex容器的项目 */
    17.       .text > .item {
    18.           /* padding: 1rem; */
    19.           width: 10rem;
    20.           height: 5rem;
    21.           background-color: lightcyan;
    22.           border: 1px solid #000;
    23.       }
    24.       /* 多行容器 */
    25.       .text {
    26.           /* 允许换行 */
    27.           /* flex-flow: row wrap; */
    28.           /* 主轴垂直 */
    29.           /* flex-flow: column nowrap; */
    30.           flex-flow: column wrap;
    31.       }
    32.   </style>
    33. </head>
    34. <body>
    35.   <div class="text">
    36.   <div class="item">item1</div>
    37.   <div class="item">item2</div>
    38.   <div class="item">item3</div>
    39.   <div class="item">item4</div>
    40.   <div class="item">item5</div>
    41.   <div class="item">item6</div>
    42.   <div class="item">item7</div>
    43.   <div class="item">item8</div>
    44.   </div>
    45. </body>
    46. </html>

    2.项目在主轴上的对齐方式

  • 将所有项目看成一个整体来处理
    1. /* 左对齐 */
    2. justify-content: flex-start;
    3. /* 右对齐 */
    4. justify-content: flex-end;
    5. /* 居中 */
    6. justify-content: center;居中

  • 将所有项目看成一个个独立的个体来处理

    1. /* 两端对齐 */
    2. justify-content: space-between;
    3. /* 分散对齐 */
    4. justify-content: space-around;
    5. /* 平均对齐 */
    6. justify-content: space-evenly;

    3.项目在交叉轴上的对齐方式

    1. align-items: stretch;
    2. align-items: flex-start;
    3. align-items: flex-end;
    4. align-items: center;

    4.项目在多行容器上的对齐方式

    1. .text {
    2.           flex-flow: row wrap;
    4.           align-content: stretch;
    5.           /* 看成整体 */
    6.           aligin-content:flex-start;
    7.           aligin-content:flex-end;
    8.           aligin-content:center;
    10.           /* 看成个体 */
    11.           /* 两端对齐 */
    12.           align-content: space-between;
    13.           /* 分散对齐 */
    14.           align-content: space-around;
    15.           /* 平均对齐 */
    16.           align_content: space-evenly;
    17.       }

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