博主信息
博文 11
粉丝 0
评论 0
访问量 12463
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
FLEX属性总结,练习--PHP培训十期线上班
宋明杰
原创
873人浏览过

1,Flex布局是什么?

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局

  1. .box{
  2. display:flex;
  3. }

行内元素也可以使用Flex布局。

  1. .box{
  2. display:inline-flex;
  3. }

Webkit内核的浏览器(safari),必须加上-webkit前缀。

  1. .box{
  2. display: -webkit-flex;
  3. display: flex;
  4. }

2,基本慨念

采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

3,容器的属性

--flex-direction:

  1. row:(默认)主轴为水平方向,起点在左端
  2. row-reverse:主轴为水平方向,起点在右端。
  3. column:主轴为垂直方向,起点在上方。
  4. columu-reverse:主轴为垂直方向,起点在下方。

运行实例:

  1. <style>
  2. .box{
  3. width: 800px;
  4. height: 300px;
  5. background-color: antiquewhite;
  6. border-style:solid;
  7. margin:auto;
  8. display: flex;
  9. /*适配 safari 浏览器*/
  10. display: -webkit-flex;
  11. flex-direction: row;
  12. }
  13. p{
  14. width: 160px;
  15. height: 80px;
  16. background-color: aqua;
  17. border-style:dashed ;
  18. font-size:25px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="box">
  24. <p>1</p>
  25. <p>2</p>
  26. <p>3</p>

  1. <style>
  2. .box{
  3. width: 800px;
  4. height: 300px;
  5. background-color: antiquewhite;
  6. border-style:solid;
  7. margin:auto;
  8. display: flex;
  9. /*适配 safari 浏览器*/
  10. display: -webkit-flex;
  11. flex-direction: row-reverse;
  12. }
  13. p{
  14. width: 160px;
  15. height: 80px;
  16. background-color: aqua;
  17. border-style:dashed ;
  18. font-size:25px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="box">
  24. <p>1</p>
  25. <p>2</p>
  26. <p>3</p>
  27. </div>

  1. <style>
  2. .box{
  3. width: 800px;
  4. height: 300px;
  5. background-color: antiquewhite;
  6. border-style:solid;
  7. margin:auto;
  8. display: flex;
  9. /*适配 safari 浏览器*/
  10. display: -webkit-flex;
  11. flex-direction: column;
  12. }
  13. p{
  14. width: 160px;
  15. height: 80px;
  16. background-color: aqua;
  17. border-style:dashed ;
  18. font-size:25px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="box">
  24. <p>1</p>
  25. <p>2</p>
  26. <p>3</p>
  27. </div>
  28. </body>

  1. <style>
  2. .box{
  3. width: 800px;
  4. height: 300px;
  5. background-color: antiquewhite;
  6. border-style:solid;
  7. margin:auto;
  8. display: flex;
  9. /*适配 safari 浏览器*/
  10. display: -webkit-flex;
  11. flex-direction: column-reverse;
  12. }
  13. p{
  14. width: 160px;
  15. height: 80px;
  16. background-color: aqua;
  17. border-style:dashed ;
  18. font-size:25px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="box">
  24. <p>1</p>
  25. <p>2</p>
  26. <p>3</p>
  27. </div>
  28. </body>

  1. <style>
  2. .box{
  3. width: 800px;
  4. height: 300px;
  5. background-color: antiquewhite;
  6. border-style:solid;
  7. margin:auto;
  8. display: flex;
  9. /*适配 safari 浏览器*/
  10. display: -webkit-flex;
  11. flex-wrap:nowrap;
  12. }
  13. p{
  14. width: 160px;
  15. height: 80px;
  16. background-color: aqua;
  17. border-style:dashed ;
  18. font-size:25px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="box">
  24. <p>1</p>
  25. <p>2</p>
  26. <p>3</p>
  27. <p>4</p>
  28. <p>5</p>
  29. <p>6</p>
  30. <p>7</p>
  31. <p>8</p>
  32. <p>9</p>
  33. </div>
  34. </body>

  1. <style>
  2. .box{
  3. width: 850px;
  4. height: 300px;
  5. background-color: antiquewhite;
  6. border-style:solid;
  7. margin:auto;
  8. display: flex;
  9. /*适配 safari 浏览器*/
  10. display: -webkit-flex;
  11. flex-wrap:wrap;
  12. }
  13. p{
  14. width: 160px;
  15. height: 80px;
  16. background-color: aqua;
  17. border-style:dashed ;
  18. font-size:25px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="box">
  24. <p>1</p>
  25. <p>2</p>
  26. <p>3</p>
  27. <p>4</p>
  28. <p>5</p>
  29. <p>6</p>
  30. <p>7</p>
  31. <p>8</p>
  32. <p>9</p>
  33. </div>
  34. </body>

  1. <style>
  2. .box{
  3. width: 850px;
  4. height: 300px;
  5. background-color: antiquewhite;
  6. border-style:solid;
  7. margin:auto;
  8. display: flex;
  9. /*适配 safari 浏览器*/
  10. display: -webkit-flex;
  11. flex-wrap:wrap-reverse;
  12. }
  13. p{
  14. width: 160px;
  15. height: 80px;
  16. background-color: aqua;
  17. border-style:dashed ;
  18. font-size:25px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="box">
  24. <p>1</p>
  25. <p>2</p>
  26. <p>3</p>
  27. <p>4</p>
  28. <p>5</p>
  29. <p>6</p>
  30. <p>7</p>
  31. <p>8</p>
  32. <p>9</p>
  33. </div>
  34. </body>

justify-content属性

align-items属性

align-content属性

该属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用

flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。

手写属性:

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

批改状态:合格

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

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

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