search

博客列表 >flex容器中的四个属性

flex容器中的四个属性

Blastix Riotz
Blastix Riotz原创
2021年03月28日 17:19:09511浏览

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.       }

上一条：移动端滚动条去掉！！！下一条：选择器优先级、模块化样式组件、伪类选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多