文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

容易忽视的Flex属性Align-Content

2024-12-02 13:11

关注

背景

近期做项目，写页面的 css 写的太多了，基本上都要用到 flex 布局， 而我所用到的 flex 布局中的属性很有限， 基本只会用到flex-direction, justify-content, align-items这三个容器属性， 最多涉及图片被挤压了， 使用一下子项的 flex-shrink: 0;来防止图片被挤压。

就当我一边听着音乐一边没有感情的敲打着justify-content: space-between;的时候, 我的脑袋瓜子好像有两个小人在吵架：Jerry: 就不能用一下其他没用过的 flex 属性吗!Tom: 又不是不能用!一把梭多快乐!Jerry: 朽木不可雕也!Tom: 朽木仍可灼!Jerry: ...

回过神来，Tom 貌似觉得 Jerry 说的有些道理， 多个方式多条路， 实在不行写出来让别人琢磨去(看不懂，<-_<-)。

flex 容器属性之 align-content

关于 flex 的容器属性、项目属性这里就不在赘述了， 网上有很多讲的很清楚的文章，推荐阮一峰-flex 布局巧了， Tom 就是看了阮老师的文章，看到 align-content 的时候， 它迷糊了。咋个意思?虽然画图了， 但是没有实践， 就等于看着健身视频以为就能瘦是一样的道理!

于是， Tom 开始开启了学习 align-content.

阮老师说："align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。"

Tom 思考着, flex 布局有主轴和交叉轴， 也就是 flex 布局默认的两根轴。那怎么才算是定义了多根轴线呢?经过 Tom 反复实践， 终于发现了规律， 原来需要显示的定义一下布局方向， 比如：

  1. "flex-container"> 
  2.   "flex-item flex-item-1">1
 
  •   "flex-item flex-item-1">1
    •  
  •   "flex-item flex-item-2">2
    •  
  •   "flex-item flex-item-2">2 
  •   "flex-item flex-item-3">3 
  •   "flex-item flex-item-3">3 
  •   "flex-item flex-item-4">4 
  •   "flex-item flex-item-4">4 
  •   "flex-item flex-item-5">5 
  •   "flex-item flex-item-5">5 
  •  
    •

     

     

     

    ##横向主轴：定义容器的布局方向flex-direction: row;

    1. .flex-container { 
    2.   height: 400px; 
    3.   display: flex; 
    4.   flex-flow: row wrap;  
    5.   align-content: flex-end; 
    6.   background: gray; 
    7. } 
    8. .flex-item { 
    9.   white-space: nowrap; 
    10.   margin-right: 10px; 
    11.   margin-bottom: 10px; 
    12.   text-align: end; 
    13. } 
    14. .flex-item-1, .flex-item-3 { 
    15.   width: 60px; 
    16.   height: 80px; 
    17.   background: lightcoral; 
    18. } 
    19. .flex-item-2, .flex-item-4 { 
    20.   width: 90px; 
    21.   height: 40px; 
    22.   background: lightblue; 
    23. } 
    24. .flex-item-5 { 
    25.   width: 105px; 
    26.   height: 20px; 
    27.   background: lightgreen; 
    28. } 

    align-content: flex-start 效果

    align-content: flex-end 效果

    align-content: center 效果

    align-content: space-around 效果

    align-content: space-between 效果

    align-content: stretch 效果

    Tom：WTF?! stretch 不是要占满容器的吗， 为啥没有效果!!看阮老师画的图也是充满的呀， why is that so funny?! 文档也没有其他内容说明了!这时候， Tom 看了一眼 align-items 的值， 里面也有一个 stretch, 这里阮老师说：“如果项目未设置高度或设为 auto，将占满整个容器的高度。” Tom: align-content 的 stretch 属性跟这里应该是一个意思， 验证一下!Tom 回去看了一下子项目的 css, 发现每个项目都设置了高度， 把这些高度去掉或者改为 auto 试一下：

    子项目高度改为 auto 时，align-content: stretch 效果

    Tom: 原来如此!只改了 item-1 和 item-3 的高度为 auto, 发现他们得到了延伸 stretch, 而其他没有修改高度的子项还是没有延伸。Tom 终于发现其中的奥秘了!!

    Tom 又加以思索， 这个是设置了横向的布局方向， 纵向的是什么表现?也来看一看。

    纵向交叉轴：定义容器的布局方向flex-direction: column;

    align-content: flex-start 效果

    align-content: flex-end 效果

    说明设置布局方向为 column 的时候， align-content 表现体现在水平方向上?如果是 center, 那就是水平居中了?试试!!

    align-content: center 效果

    align-content: space-around 效果

    align-content: space-between 效果

    align-content: stretch 效果

    总结

    经过一番实战后，Tom 可算找到规律了。对于容器属性align-content， 要让它生效的条件是：必须显式的设置布局方向

    如果布局方向为横向主轴：flex-direction: row;

    此时 align-content 的变化体现在竖直方向

    如果要让 align-content: stretch;生效，这个时候应该去掉子项的高度或者设置子项的高度为 auto

    如果布局方向为纵向交叉轴：flex-direction: column;

    此时 align-content 的变化体现在水平方向

    如果要让 align-content: stretch;生效，这个时候应该去掉子项的宽度或者设置子项的宽度为 auto

     

    这次 Tom 见到 Jerry 了Tom: Hey!Jerry, I've learned a new property of flex, align-content, you can look it up in my blog.Jerry: oh, I see! that's awesome! keep it on, find more intereting properties of flex.Tom: Good idea! I'll do it next time! thank you!Jerry: My pleasure!

     

    来源：微医大前端技术内容投诉

    免责声明：

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

      难度     813人已做
      查看

    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看

    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看

    • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

      难度     435人已做
      查看

    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机

    容易忽视的Flex属性Align-Content

    后端开发Flex属性2024-12-02

    CSS flex布局属性align-items和align-content的区别是什么

    后端开发2023-07-04
    位置：首页-资讯-后端开发
    咦！没有更多了？去看看其它编程学习网 内容吧
    首页课程
    资料下载    问答资讯