资讯专栏INFORMATION COLUMN

align-self: stretch 失效

Taonce / 1858人阅读

摘要:现象代码失效,元素没有预想中的拉伸。预期的现象应该是这样的。所有的子元素的高度是。这个高度是固定的,不可改变的。

现象:

代码:



    
    
    


flex-start
flex-end
center
stretch

align-self: stretch 失效,元素没有预想中的拉伸。预期的现象应该是这样的。

为什么这样?
拉伸的前提是元素可以拉伸。容器的高度是100px。所有的子元素的高度是40px。
这个高度是固定的,不可改变的。

只需要将需要拉伸的元素的高度设置成min-height: 40px;而不是height: 40px;就可以了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116098.html

相关文章

  • 再次简单明了总结flex布局,一看就懂...

    摘要:可能值含义如下假设主轴为水平方向左对齐右对齐居中对齐两端对齐沿轴线均匀分布各行将根据其值伸展以充分占据剩余空间备注设置,不然默认按照比例排满一行。默认值为,表示当空间不足时,自动缩小,其可能的值为整数,表示不同的缩小比例。 思维导图 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

    felix0913 评论0 收藏0
  • 再次简单明了总结flex布局,一看就懂...

    摘要:可能值含义如下假设主轴为水平方向左对齐右对齐居中对齐两端对齐沿轴线均匀分布各行将根据其值伸展以充分占据剩余空间备注设置,不然默认按照比例排满一行。默认值为,表示当空间不足时,自动缩小,其可能的值为整数,表示不同的缩小比例。 思维导图 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

    huangjinnan 评论0 收藏0
  • 再次简单明了总结flex布局,一看就懂...

    摘要:可能值含义如下假设主轴为水平方向左对齐右对齐居中对齐两端对齐沿轴线均匀分布各行将根据其值伸展以充分占据剩余空间备注设置,不然默认按照比例排满一行。默认值为,表示当空间不足时,自动缩小,其可能的值为整数,表示不同的缩小比例。 思维导图 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

    CarlBenjamin 评论0 收藏0
  • 再次简单明了总结flex布局,一看就懂...

    摘要:可能值含义如下假设主轴为水平方向左对齐右对齐居中对齐两端对齐沿轴线均匀分布各行将根据其值伸展以充分占据剩余空间备注设置,不然默认按照比例排满一行。默认值为,表示当空间不足时,自动缩小,其可能的值为整数,表示不同的缩小比例。 思维导图 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

    kel 评论0 收藏0
  • 再次简单明了总结flex布局,一看就懂...

    摘要:可能值含义如下假设主轴为水平方向左对齐右对齐居中对齐两端对齐沿轴线均匀分布各行将根据其值伸展以充分占据剩余空间备注设置,不然默认按照比例排满一行。默认值为,表示当空间不足时,自动缩小,其可能的值为整数,表示不同的缩小比例。 思维导图 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

    Shimmer 评论0 收藏0

发表评论

0条评论

Taonce

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<