博客列表 >flex容器的认识

flex容器的认识

咸鱼老爷
咸鱼老爷原创
2021年02月26日 17:24:40666浏览

flex简介

  • flex:弹性盒布局,这是一个针对布局的技术,之前是-table,div,css,position,float等;
  • 在flex容器中,所有元素都是行内块;
  • 在flex容器中,页面存在二个布局的参考轴,一个叫做主轴(元素的排列),还有一个交叉轴,控制元素的换行方向;

    1、术语

    1、容器:具有”display:flex”属性的元素
    2、项目:flex容器的子元素
    3、主轴:项目排列的轴线
    4、交叉轴:与主轴垂直的轴线

    2、容器属性

    1、 flex-flow 主轴方向与换行方式
    2、 justify-content 项目与主轴上的对齐方式
    3、 align-items 项目在交叉轴上的对齐方式
    4、 align-content 项目在多行容器中的对齐方式

    3、项目属性

    1、flex 项目的缩放比例与基准宽度
    2、align-self 单个项目在交叉轴上的对齐方式
    3、order 项目在主轴上的排列顺序

    主轴排列

    flex-direction:row |column;设置主轴;
    flex-wrap:nowrap 换行
    简写:flex-flow:row nowrap
    垂直排列
    1. <style>
    2. * {
    3. padding: 0;
    4. margin: 0;
    5. box-sizing: border-box;
    6. }
    7. .container {
    8. display: flex;
    9. flex-flow: column nowrap;
    10. }
    11. .container .item {
    12. width: 5em;
    13. height: 5em;
    14. border: 1px solid #ccc;
    15. padding: 1em;
    16. margin: 1em;
    17. }
    18. </style>
    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>
    效果图

    单行容器对齐方式

    主轴对齐方式justify-content

    设置项目在单行容器上的对齐前提:主轴上存在剩余空间
    空间分配
    1、将所有项目作为一个整体,在项目组俩边进行分配;
    justify-content:flex-start 左对齐

    justify-content:flex-end 右对齐

    justify-content:flex-center 居中对齐

    2、将项目作为单个独立个体,在项目之间进行分配;
    justify-content:space-between 俩端对齐

    justify-content:space-around 分散对齐

    justify-content: space-evenly 平均对齐
  1. <style>
  2. * {
  3. padding: 0;
  4. margin: 0;
  5. box-sizing: border-box;
  6. }
  7. .container {
  8. border: 1px solid #ccc;
  9. display: flex;
  10. /* 左对齐 */
  11. justify-content: flex-start;
  12. /* 右对齐 */
  13. justify-content: flex-end;
  14. /* 居中对齐 */
  15. justify-content: center;
  16. /* 俩端对齐 */
  17. justify-content: space-between;
  18. /* 分散对齐 */
  19. justify-content: space-around;
  20. justify-content: space-evenly;
  21. }
  22. .container .item {
  23. width: 5em;
  24. height: 5em;
  25. border: 1px solid #ccc;
  26. padding: 1em;
  27. margin: 1em;
  28. }
  29. </style>
  30. <body>
  31. <div class="container">
  32. <div class="item">1</div>
  33. <div class="item">2</div>
  34. <div class="item">3</div>
  35. </div>
  36. </body>

交叉轴对齐方式 align-items

1、默认拉伸 align-items: stretch;
2、上对齐 align-items: flex-start;
3、下对齐 align-items: flex-end;
4、居中对齐 align-items: center;

多行容器对齐方式 align-content

1、拉伸 align-content: stretch;
2、上对齐 align-content: flex-start;
3、下对齐 align-content: flex-end;
4、俩端对齐 align-content: space-between;
5、分散对齐 align-content: space-around;
6、平均对齐 align-content: space-evenly;

项目属性 flex

用在容器项目上的属性 flex:放大因子 收缩因子 基准宽度
默认值 不放大 可收缩 当前容器中的widh;
flex:0 1 auto;
简写flex:initial;
允许放大和收缩
flex:1 1 auto;
简写flex:auto;
禁止放大和收缩
flex:0 0 auto;
简写flex:none;
如果只有一个数字,省掉后面第二个参数表示的是放大因子
flex:1等价于 flex:1 1 auto;

flex通常不会用来设置所有项目的默认选项,通常用来设置某一个项目的特征;
单个项目对齐方式align-self;支持定位

项目在主轴上的显示顺序

order:数值

  1. <style>
  2. * {
  3. padding: 0;
  4. margin: 0;
  5. box-sizing: border-box;
  6. }
  7. .container {
  8. border: 1px solid #ccc;
  9. display: flex;
  10. flex-flow: row wrap;
  11. }
  12. .container .item {
  13. width: 5em;
  14. height: 5em;
  15. border: 1px solid #ccc;
  16. padding: 1em;
  17. margin: 1em;
  18. }
  19. .container .item:first-of-type {
  20. order: 4;
  21. background-color: wheat;
  22. }
  23. .container .item:last-of-type {
  24. order: 1;
  25. background-color: yellowgreen;
  26. }
  27. </style>
  28. <body>
  29. <div class="container">'
  30. <div class="item">1</div>
  31. <div class="item">2</div>
  32. <div class="item">3</div>
  33. <div class="item">4</div>
  34. </div>
  35. </body>

效果图

flex嵌套

实际工作中flex嵌套应用很多

  1. <style>
  2. * {
  3. padding: 0;
  4. margin: 0;
  5. box-sizing: border-box;
  6. }
  7. .container {
  8. display: flex;
  9. }
  10. .container .item {
  11. width: 5em;
  12. height: 5em;
  13. border: 1px solid #ccc;
  14. padding: 1em;
  15. margin: 1em;
  16. }
  17. .container .item:nth-of-type(4) {
  18. display: flex;
  19. }
  20. </style>
  21. <body>
  22. <div class="container">
  23. <div class="item">1</div>
  24. <div class="item">2</div>
  25. <div class="item">3</div>
  26. <div class="item">4
  27. <div>5</div>
  28. <div>6</div>
  29. <div>7</div>
  30. </div>
  31. </div>
  32. </body>

效果图

flex快速实现水平垂直居中

  • justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
  • align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
  1. <style>
  2. .box {
  3. width: 15em;
  4. height: 15em;
  5. background-color: seagreen;
  6. display: flex;
  7. justify-content: center;
  8. align-items: center;
  9. }
  10. .box div {
  11. width: 5em;
  12. height: 5em;
  13. background-color: sienna;
  14. }
  15. </style>
  16. <body>
  17. <div class="box">
  18. <div></div>
  19. </div>
  20. </body>

效果图

flex实现简单三列布局

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. box-sizing: border-box;
  6. }
  7. header,
  8. footer {
  9. height: 8vh;
  10. background-color: steelblue;
  11. }
  12. .container {
  13. height: calc(84vh - 1em);
  14. display: flex;
  15. margin: .5em 0;
  16. }
  17. .container aside {
  18. min-width: 15em;
  19. background-color: turquoise;
  20. }
  21. .container main {
  22. min-width: calc(100% - 31em);
  23. background-color: wheat;
  24. margin: 0 .5em;
  25. }
  26. </style>
  27. <body>
  28. <header>头部</header>
  29. <div class="container">
  30. <aside>左侧</aside>
  31. <main>内容</main>
  32. <aside>右侧</aside>
  33. </div>
  34. <footer>底部</footer>
  35. </body>

效果图

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议