flex容器与项目中常用的属性

flex布局术语

序号简称描述
1二根轴主轴和交叉轴
2二条线起始线和终止线
3二个主体容器和项目
4一个空间剩余空间

图示:

  • 特点
  1. 任何一个可视元素,添加display:flex后都可转为flex弹性容器

  2. flex弹性容器内的直接子元素称之为flex项目,它是真正的布局目标对象

  • 常用属性
    1.flex-flow: 描述主轴方向和是否换行
    例如 flex-flow: row nowrap; 默认值
    2.justify-content:描述项目在主轴上的对齐方式
    例如 justify-content: flex-start; 默认值
    3.align-items:描述项目在交叉轴对齐的方式
    例如 align-items: flex-start;
    4.flex: 放大因子 收缩因子 计算大小
    flex默认: 禁止放大, 允许收缩, 宽度自动
    flex默认可以写作 flex: 0 1 auto;
    或者
    flex: initial;
    5.align-self: 单独设置某个项目在交叉轴上的对齐
    例如 align-self: flex-start;

flex布局实例

代码显示

代码

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>flex容器</title>
  8. <link rel="stylesheet" href="flex.css">
  9. </head>
  10. <body>
  11. <header>页眉</header>
  12. <div class="container">
  13. <aside>左侧</aside>
  14. <main class="main">
  15. <div class="item">item1</div>
  16. <div class="item two">item2</div>
  17. <div class="item three">item3</div>
  18. </main>
  19. <aside>右侧</aside>
  20. </div>
  21. <footer>页脚</footer>
  22. </body>
  23. </html>

css

  1. * {
  2. margin:0;
  3. padding:0;
  4. box-sizing: border-box;
  5. }
  6. :root {
  7. font-size:10px;
  8. }
  9. body {
  10. font-size:1.6rem;
  11. }
  12. header,
  13. footer {
  14. height: 5rem;
  15. background-color: rgba(151, 150, 149, 0.897);
  16. }
  17. .container {
  18. display: flex;
  19. flex: 1,1,auto;
  20. justify-content: space-between;
  21. min-height: 50rem;
  22. }
  23. .container > aside {
  24. border: 1px solid;
  25. background-color:rgba(255, 192, 192, 0.294);
  26. width: 15rem;
  27. margin: 2px 5px;
  28. }
  29. .container > .main {
  30. display: flex;
  31. flex-flow: column nowrap;
  32. border: 1px solid;
  33. background-color:pink;
  34. flex: 1;
  35. margin: 2px 5px;
  36. justify-content:space-evenly;
  37. align-items: center;
  38. }
  39. .main > .item {
  40. border: 1px solid;
  41. background-color:rgb(160, 154, 155);
  42. height: 5rem;
  43. width: 50rem;
  44. }
  45. .main .item.two {
  46. background-color: rgb(243, 237, 243);
  47. align-self: flex-start;
  48. order: -1;
  49. }
  50. .main .item.three {
  51. background-color: rgba(53, 51, 53, 0);
  52. align-self: flex-end;
  53. }