登录  /  注册
博主信息
博文 49
粉丝 0
评论 0
访问量 47748
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
flex容器(常用属性)的理解
lus菜
原创
1173人浏览过

flex弹性盒布局:

  1. 任何元素都可以通过添加display:flex属性,转为弹性盒元素,
  2. 转为flex元素后,它的内部的"子元素"就支持flex布局了
  3. 只要使用了display: flex属性的元素就称为:(flex容器)
  4. flex容器中有"子元素"称之为:flex项目
  5. 容器中的项目自动转为"行内块元素"(不管之前是什么类型)
  6. 容器默认存在两根轴:水平方向(主轴) 垂直方向的(交叉轴)

容器属性:

  1. flex-direction: 决定主轴的方向默认值, row(水平方向) colum(垂直方向)
  2. flex-wrap: 决定不换行, 默认值nowrap(不换行) wrap(换行)
  3. justify-content:定义了项目在主轴上的对齐方式
  4. flex-start: (默认值)左对齐, flex-end: 右对齐, center: 居中, space-between: 两端对齐, space-around: 分散对齐, space-evenly: 平均对齐,
  5. align-items: 定义项目在交叉轴上如何对齐
  6. stretch:默认拉伸, flex-start:交叉轴的起点对齐, flex-end:交叉轴的终点对齐, center:交叉轴的中点对齐,
  7. align-content:性定义了多根轴线的对齐方式
  8. stretch(默认值):轴线占满整个交叉轴 flex-start:与交叉轴的起点对齐 flex-end:与交叉轴的终点对齐 center:与交叉轴的中点对齐 space-between:与交叉轴两端对齐,轴线之间的间隔平均分布 space-around:每根轴线两侧的间隔都相等

项目属性:

  1. flex通常不会用来设置所有项目的默认选项,通常用来设置某一个项目的特征
  2. flex-grow:放大因子 flex-hrink收缩因子 flex-basis:项目在主轴上的基准宽度
  3. flex:0 1 auto;默认就会不放大或收缩 flex:1 1 auto;允许放大和收缩 flex:0 0 auto;禁止放大或收缩
  4. order 设置某个项目在主轴上的排列顺序 数值越小,排列越靠前,支持负值
  5. align-self: 定义某个项目的对齐方式

演示代码:

  1. //justify-content: 定义了项目在主轴上的对齐方式
  2. *{
  3. //转为IE盒子
  4. box-sizing: border-box;
  5. }
  6. .index{
  7. //转换为felx弹性布局元素
  8. display: flex;
  9. height: 15em;
  10. border: 1px solid rgb(0, 0, 0);
  11. padding: 1em;
  12. margin: 1em;
  13. }
  14. .index>.box{
  15. width: 4em;
  16. height: 5em;
  17. background-color: lightsalmon;
  18. border: 3px solid #000;
  19. }
  20. .index{
  21. //简写默认值
  22. flex-flow: row nowrap;
  23. //(默认值)左对齐
  24. justify-content: flex-start;
  25. //右对齐
  26. justify-content: flex-end;
  27. //居中
  28. justify-content: center;
  29. //两端对齐
  30. justify-content: space-between;
  31. //分散对齐
  32. justify-content: space-around;
  33. //平均对齐
  34. justify-content: space-evenly;
  35. }
  36. </style>
  37. <body>
  38. <div class="index">
  39. <div class="box">早上</div>
  40. <div class="box">中午</div>
  41. <div class="box">傍晚</div>
  42. <div class="box">晚上</div>
  43. </div>
  44. </body>

效果:






  1. <style>
  2. *{
  3. //转为IE盒子
  4. box-sizing: border-box;
  5. }
  6. .index{
  7. //转换为felx弹性布局元素
  8. display: flex;
  9. height: 15em;
  10. border: 1px solid rgb(0, 0, 0);
  11. padding: 1em;
  12. margin: 1em;
  13. }
  14. .index>.box{
  15. width: 3em;
  16. background-color: lightsalmon;
  17. border: 3px solid #000;
  18. }
  19. //align-items: 定义项目在交叉轴上如何对齐
  20. .index{
  21. //默认拉伸
  22. align-items: stretch;
  23. //交叉轴的起点对齐
  24. align-items: flex-start;
  25. //交叉轴的终点对齐
  26. align-items: flex-end;
  27. //交叉轴的中点对齐
  28. align-items: center;
  29. }
  30. //改变元素顺序
  31. .index>.box:nth-of-type(3){
  32. order: 1;
  33. }
  34. </style>
  35. <body>
  36. <div class="index">
  37. <div class="box">早上</div>
  38. <div class="box">中午</div>
  39. <div class="box">傍晚</div>
  40. <div class="box">晚上</div>
  41. <div class="box">半夜</div>
  42. </div>
  43. </body>

示例:





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

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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

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