登录  /  注册
博主信息
博文 26
粉丝 0
评论 0
访问量 20504
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
flex 容器与项目
default
原创
909人浏览过

1. display属性

序号 属性值 描述 备注
1 flex; 创建 flex 块级容器 内部子元素自动成为 flex 项目
2 inline-flex; 创建 flex 行内容器 内部子元素自动成为 flex 项目
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. .container{
  8. width: 500px;
  9. height: 400px;
  10. display: flex;
  11. }
  12. .item{
  13. width: 50px;
  14. height: 50px;
  15. background: gray;
  16. }
  17. .item:nth-of-type(1){
  18. background: lavenderblush;
  19. }
  20. .item:nth-of-type(2){
  21. background: lightblue;
  22. }
  23. .item:nth-of-type(3){
  24. background: lightcoral;
  25. }
  26. .item:nth-of-type(4){
  27. background: lightgreen;
  28. }
  29. .item:nth-of-type(5){
  30. background: lightyellow;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div class="container">
  36. <div class="item">1</div>
  37. <div class="item">2</div>
  38. <div class="item">3</div>
  39. <div class="item">4</div>
  40. <div class="item">5</div>
  41. </div>
  42. </body>
  43. </html>
  • 他的默认为横向排列

    容器的主轴排列有四个属性

    1. /*默认横向排列*/
    2. flex-direction: row;
    3. /*反向横向排列*/
    4. flex-direction: row-reverse;
    5. /*默认纵向排列*/
    6. flex-direction: column;
    7. /*反向纵向排列*/
    8. flex-direction: column-reverse;
  • 默认横向排列flex-direction: row;
  • 反向横向排列
  • 默认纵向排列 flex-direction: column;
  • 反向纵向排列flex-direction: column-reverse;

flex-direction: 分开意思就是 flex 是盒子 direction 是方向 含义为盒子方向

单行与换行

  1. /* 默认不换行显示,如果当前容器容纳不小, 项目会自动收缩 */
  2. flex-wrap: nowrap;
  3. /* 如果允许换行, 当前行容纳不小的项目会拆行显示,此时,创建的容器叫:多行容器 */
  4. flex-wrap: wrap;
  • flex-wrap: wrap; 这个是允许换行 当子元素的宽度大于父元素的宽度时 他就会换行
  • flex-wrap: nowrap; 不允许换行 如果子元素的宽度大于父元素宽度时 子元素会按照比例缩小子元素的宽度 并撑满父元素

    主轴项目对齐方式·

    1. /* 默认,所有项目与主轴的起始线对齐 */
    2. justify-content: flex-start;
    3. /* 所有项目与主轴的结束线对齐 */
    4. justify-content: flex-end;
    5. /* 所有项目居中对齐 */
    6. justify-content: center;
    7. /* 两端对齐 */
    8. justify-content: space-between;
    9. /* 分散对齐 */
    10. justify-content: space-around;
    11. /* 平均对齐 */
    12. justify-content: space-evenly;
  • justify-content: center; 居中对齐 左边边距和右边边距相同
  • justify-content: space-between; 两端对齐 两边没有边距 空白部分的宽度会分成相等的份 分到子元素中间并对齐
  • justify-content: space-around; 分散对齐 每个子元素左右都获得相等的空白部分并对齐
  • justify-content: space-evenly; 平均对齐 每个子元素都的空白部分变成相等部分并对其

    交叉轴项目对齐方式

    1. align-items: flex-start;
    2. align-items: flex-end;
    3. align-items: center;
  • align-items: flex-start;当父元素的高度没有被撑满 有空余高度的时候 纵向排列在起始位 这个和justify-content: flex-start;没什么区别 暂时不举例
  • align-items: flex-end;当父元素的高度没有被撑满 有空余高度的时候 纵向排列在结束位 他会落下来 跑到最底下
  • align-items: center; 当父元素的高度没有被撑满 有空余高度的时候 纵向排列在结束位当父元素的高度没有被撑满 有空余高度的时候 纵向排列居中 高度的居中 有点像文字处理时候的text-align

    交叉轴项目对齐方式 /纵向对齐方式

    1. /* 自动拉伸:默认 */
    2. align-content: stretch;
    3. /* 纵向排列起始位:默认 */
    4. align-content: flex-start;
    5. /*纵向排列结束位*/
    6. align-content: flex-end;
    7. /*纵向排列居中*/
    8. align-content: center;
    9. /*纵向排列两端对齐*/
    10. align-content: space-between;
    11. /*纵向排列分散对齐*/
    12. align-content: space-around;
    13. /*纵向排列平均对齐*/
    14. align-content: space-evenly;

  • align-content: stretch; align-content: flex-start; align-content: flex-end; align-content: center;和横向排列一样
  • align-content: space-between; /纵向排列两端对齐/
  • align-content: space-around; 分散对齐
  • align-content: space-evenly; 平均对齐

flex 容器主轴与项目换行简写

flex-flow属性

  • flex-flow是属性flex-directionflex-wrap的简写
  • 语法: flex-flow: flex-direction flex-wrap
属性值 描述
row nowrap默认值 主轴水平, 项目不换行
row wrap默认值 反向横向排列, 项目换行
column nowrap默认值 纵向排列, 项目换行
column-reverse wrap默认值 反向纵向排列 , 项目换行
这个简写很好用长期会用

操纵子元素

子元素的排序

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. .container{
  8. width: 500px;
  9. height: 400px;
  10. display: flex;
  11. flex-flow: row wrap ;
  12. }
  13. .item{
  14. width: 50px;
  15. height: 50px;
  16. background: gray;
  17. /*权重越高 排的越靠前*/
  18. order: 0;
  19. }
  20. .item:nth-of-type(1){
  21. background: lavenderblush;
  22. order:5;
  23. }
  24. .item:nth-of-type(2){
  25. background: lightblue;
  26. order: 4;
  27. }
  28. .item:nth-of-type(3){
  29. background: lightcoral;
  30. order: 3;
  31. }
  32. .item:nth-of-type(4){
  33. background: lightgreen;
  34. order: 2;
  35. }
  36. .item:nth-of-type(5){
  37. background: lightyellow;
  38. order: 1;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <div class="container">
  44. <div class="item">1</div>
  45. <div class="item">2</div>
  46. <div class="item">3</div>
  47. <div class="item">4</div>
  48. <div class="item">5</div>
  49. </div>
  50. </body>
  51. </html>

flex 子元素交叉轴单独对齐

  • align-self该属性可覆盖容器的align-items, 用以自定义某个项目的对齐方式
序号 属性值 描述
1 auto默认值 继承 align-items 属性值
2 flex-start 与交叉轴起始线对齐
3 flex-end 与交叉轴终止线对齐
4 center 与交叉轴中间线对齐: 居中对齐
5 stretch 在交叉轴方向上拉伸
6 baseline 与基线对齐(与内容相关用得极少)


-因为改了纵向排列 baseline的效果能出来 不然还是和默认一样

项目放大因子和缩小因子

  • flex-grow: 0; 值为0的时候 不放大
  • flex-shrink: 0;值为0的时候 不缩小 当父元素比子元素小的时候用

项目计算尺寸

  1. /* auto === width */
  2. flex-basis: auto;
  3. /* flex-basis: 权重大于width; */
  4. flex-basis: 70px;
  5. flex-basis: 20%;
  6. flex-basis: 5rem;
  7. /* min-width / max-width 权重大于flex-basis; */
  8. max-width: 100px;
  9. flex-basis: 150px;
  10. /* width < flex-basis < min/max-width; 1权重大小排比 */

flex 项目缩放的简写

1. flex属性

  • 项目放大,缩小与计算尺寸,对于项目非常重要,也很常用
  • 每次都要写这三个属性,非常的麻烦,且没有必要
  • flex属性,可以将以上三个属性进行简化:
  • 语法: flex: flex-grow flex-shrink flex-basis

1.1 三值语法

序号 属性值 描述
1 第一个值: 整数 flex-grow
2 第二个值: 整数 flex-shrink
3 第三个值: 有效宽度 flex-basis

举例:

序号 案例 描述
1 flex: 0 1 auto 默认值: 不放大,可收缩, 初始宽度
2 flex: 1 1 auto 项目自动放大或收缩适应容器
3 flex: 0 0 100px 按计算大小填充到容器中

1.2 双值语法

序号 属性值 描述
1 第一个值: 整数 flex-grow
3 第二个值: 有效宽度 flex-basis

举例:

案例 描述
flex: 0 180px 禁止放大,按计算大小填充到容器中

1.3 单值语法

序号 属性值 描述
1 整数 flex-grow
2 有效宽度 flex-basis
3 关键字 `initial auto none`

举例:

序号 案例 描述
1 flex: 1 flex: 1 1 auto
2 flex: 180px flex: 1 1 180px
3 initial flex: 0 1 auto
4 auto flex: 1 1 auto
5 none flex: 0 0 auto

推荐使用flex, 就像推荐使用flex-grow设置主轴与换行一样

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

批改状态:合格

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

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

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