登录  /  注册
博主信息
博文 7
粉丝 2
评论 0
访问量 11212
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
flex容器的6个属性练习总结
黑白。
原创
2459人浏览过

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.手写作业

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:教科书级的作业, 推荐所有学员学习
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
1条评论
涂妮 2020-12-16 12:38:17
文章在上传时会出现顺序颠倒的现象发生吗? 代码和图示有四处不一样, 设置容器中的项目在主轴上的对齐方式 :居中对齐与起始线对齐这两处; 在交叉轴上的排列方式:垂直居中对齐与顶部对齐这两处。
1楼
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学