博主信息
黑白。
博文
7
粉丝
2
评论
0
访问量
1950
积分:0
P豆:14

flex容器的6个属性练习总结

2019年12月31日 08:42:12阅读数:777博客 / 黑白。/ HTML前端开发

1. flex是什么

  • flex: 弹性布局

  • flex兼容性不要担心

2. flex解决了什么问题

  • 块元素的垂直居中

  • 元素在容器中 自动伸缩,适应容器大小的变化,特别适合移动端布局

3. flex布局的角色/参与者有哪些

  • 只有二级: 父级和子级

  • 父元素叫: flex容器(container)

  • 子元素叫: flex项目(item)flex元素

4. flex 项目的布局方向是什么

  • flex是一维布局,项目要么水平排列, 要么垂直排列,任何时间都只能沿着一个方向排列

  • flex项目的排列方向, 称为主轴, 排列方式有二种, 所以主轴也有二种: 水平/行轴,垂直/纵轴

  • 与主轴对应的轴,称为交叉轴, 副轴, 侧轴

5. 可以用到flex容器上的属性有哪些

  • flex-direction: 设置容器中的主轴方向

    flex-direction: row;       /*按行方向延伸*/
    flex-direction: column;    /*按列方向延伸*/
  • flex-wrap: 是否允许创建多行容器, 一行排不下, 是否允许换行显示

    flex-wrap: nowrap;   /*不允许换行*/
    flex-wrap: wrap;     /*允许换行*/
  • flex-flow: 是上面二个属性的简写

    flex-flow: /*主轴方向 是否换行显示;
    flex-flow: row wrap;    /*按行方向延伸且允许换行
  • justify-content: 设置容器中的项目在主轴上的对齐方式

    justify-content: flex-start;   /*向起始线对齐*/
    justify-content: flex-end;     /*向终止线对齐*/
    justify-content: center;       /*居中对齐*/
  • justify-content: 可以分配主轴上剩余空间

    justify-content: space-between;  /*两端对齐
    justify-content: space-around;   /*分散对齐
    justify-content: space-evenly;   /*平均对齐
  • align-items: 项目在交叉轴上的排列方式

    align-items: flex-start;  /*顶部对齐*/
    align-items: flex-end;    /*底部对齐*/
    align-items: center;      /*垂直居中对齐*/
  • align-content: 设置项目在多行容器交叉轴上的对齐方式

    align-content: space-between;  /*上下对齐*/
    align-content: space-around;   /*分散对齐*/
    align-content: space-evenly;   /*平均对齐*/

6. 案例练习

  • HTML页面

    <!doctype html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>flex练习</title>
     <style>
         .container {
             border: 1px dashed;
             box-sizing: border-box;
             background-color: lightsteelblue;
         }
         .item {
             width: 100px;
             height: 50px;
             border: 1px dashed;
             background-color: wheat;
         }
     </style>
    </head>
    <body>
    <div class="container">
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
     <div class="item">4</div>
     <div class="item">5</div>
     <div class="item">6</div>
    </div>
    </body>
    </html>

  • 转为flex容器(默认为按行排列)

    .container {
             /*转为弹性盒子,flex容器*/
             display: flex;
             /*默认flex-direction: row排列*/
         }

  • flex-direction: column(按列方向排列)

    .container {
             /*转为弹性盒子,flex容器*/
             display: flex;
             flex-direction:column;
         }

  • flex-wrap: 是否允许换行

    .container {
             /*转为弹性盒子,flex容器*/
             display: flex;
             flex-wrap: nowrap; /*不设置此属性时也默认为不允许换行*/
         }

    .container {
             /*转为弹性盒子,flex容器*/
             display: flex;
             flex-wrap:wrap;  /*允许换行*/
         }

  • flex-flow:主轴方向 是否允许换行

    .container {
             /*转为弹性盒子,flex容器*/
             display: flex;
             /*按行方向排序,允许换行*/
             flex-flow: row wrap;
         }

  • justify-content: 设置容器中的项目在主轴上的对齐方式

    .container {
             /*转为弹性盒子,flex容器*/
             display: flex;
             /*居中对齐*/
             justify-content: center;
         }

    .container {
             /*转为弹性盒子,flex容器*/
             display: flex;
             /*向终止线对齐*/
             justify-content: flex-end;
         }

    .container {
             /*转为弹性盒子,flex容器*/
             display: flex;
             /*flex容器默认为起始线对齐*/
             justify-content: flex-start;
         }

  • justify-content: 可以分配主轴上剩余空间

    .container {
             /*转为弹性盒子,flex容器*/
             display: flex;
             /*平均对齐*/
             justify-content: space-evenly;
         }

    .container {
             /*转为弹性盒子,flex容器*/
             display: flex;
             /*分散对齐*/
             justify-content: space-around;
         }

    .container {
             /*转为弹性盒子,flex容器*/
             display: flex;
             /*两端对齐*/
             justify-content: space-between;
         }

  • align-items: 项目在交叉轴上的排列方式

    .container {
             /*转为弹性盒子,flex容器*/
             display: flex;
             height: 200px;
             /*垂直居中对齐*/
             align-items: center;
         }

    .container {
             /*转为弹性盒子,flex容器*/
             display: flex;
             height: 200px;
             /*底部对齐*/
             align-items: flex-end;
         }

    .container {
             /*转为弹性盒子,flex容器*/
             display: flex;
             height: 200px;
             /*flex默认为顶部对齐*/
             align-items: flex-start;
         }

  • align-content: 设置项目在多行容器交叉轴上的对齐方式

    .container {
             /*转为弹性盒子,flex容器*/
             display: flex;
             height: 200px;
             /*允许换行*/
             flex-wrap: wrap;
             /*平均对齐*/
             align-content: space-evenly;
         }

    .container {
             /*转为弹性盒子,flex容器*/
             display: flex;
             height: 200px;
             /*允许换行*/
             flex-wrap: wrap;
             /*两端对齐*/
             align-content: space-around;
         }

    .container {
             /*转为弹性盒子,flex容器*/
             display: flex;
             height: 200px;
             /*允许换行*/
             flex-wrap: wrap;
             /*两端对齐*/
             align-content: space-between;
         }

7.手写作业

批改老师:Peter-ZhuPeter-Zhu

批改状态:合格

老师批语:教科书级的作业, 推荐所有学员学习

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论