flex容器中的四个属性

序号属性描述
1flex主轴方向与换行方式
2justify-content项目在主轴上的对齐方式
3align-items项目在交叉轴上的对齐方式
4align-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;
    3. align-content: stretch;
    4. /* 看成整体 */
    5. aligin-content:flex-start;
    6. aligin-content:flex-end;
    7. aligin-content:center;
    8. /* 看成个体 */
    9. /* 两端对齐 */
    10. align-content: space-between;
    11. /* 分散对齐 */
    12. align-content: space-around;
    13. /* 平均对齐 */
    14. align_content: space-evenly;
    15. }

更多相关文章

  1. flex基础:flex容器中的四个属性的功能,参数,以及作用
  2. 210325 CSS flex布局 项目属性
  3. 210324 CSS flex 布局
  4. flex容器常用的四个属性
  5. Docker基本组件、概念介绍
  6. flex容器中的四个属性的功能,参数,以及作用
  7. flex布局理解
  8. flex容器中的四个属性的功能演示
  9. flex容器属性的功能,参数,以及作用

随机推荐

  1. [置顶] 我的Android进阶之旅------>Andro
  2. 【Android(安卓)界面效果9】9patch图片
  3. Android单元测试初探Instrumentation
  4. EditText的常用属性和实例
  5. Android(安卓)UI开发第二十五篇――分享
  6. TextView常用属性
  7. 《Android攻防实战》读书笔记——Android
  8. Android(安卓)Toast使用简介
  9. android中的数据库操作
  10. android新闻App源码、仿微信源码、地图音