• 弹性容器----六大属性(5、项目在交叉轴上的对齐方式)


    弹性容器----六大属性(5、项目在交叉轴上的对齐方式)

    align-items属性定义项目在交叉轴(纵轴|侧轴)上如何对齐。 语法:

    .box {
     align-items: flex-start | flex-end | center | baseline | stretch;
    }

    它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

    • flex-start:交叉轴的起点对齐。

    • flex-end:交叉轴的终点对齐。

    • center:交叉轴的中点对齐。

    • baseline: 项目的第一行文字的基线对齐。

    • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

    注意:你使用align-items:stretch;的大前提是 弹性项目没有高度或者弹性项目的高度是auto。

     项目在交叉轴上的对齐方式
        
    
    
        
            1---小李子
            2---是憨憨
            3
        4
        5
        6     

  • 相关阅读:
    Vue项目配置文件整理
    LM2596S DC-DC可调降压模块
    受保护的PDF文档怎么编辑?
    elasticsearch10-查询文档处理
    【AIGC调研系列】Claude 3 Haiku 最快且最具成本效益
    PMP备考大全:经典题库(8月第3周)
    【Debug危机系列】Embedding层的千层套路
    分享几个简单实用的 JavaScript 优雅小技巧!
    (附源码)springboorCRM客户关系管理系统 毕业设计 316631
    2022年6月1日启动-蓝图功能C++初级编程教学重置计划启动
  • 原文地址:https://blog.csdn.net/weixin_72303943/article/details/126316444