align-self: stretch 失效

Taonce 发布于2019-08-30 15:44 / 1895人阅读

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

现象：

代码：



    
    
    



    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 2019-08-23 15:29 评论0 收藏0
再次简单明了总结flex布局，一看就懂...

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

huangjinnan 2019-08-23 15:28 评论0 收藏0
再次简单明了总结flex布局，一看就懂...

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

CarlBenjamin 2019-08-30 15:55 评论0 收藏0
再次简单明了总结flex布局，一看就懂...

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

kel 2019-08-30 15:55 评论0 收藏0
再次简单明了总结flex布局，一看就懂...

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

Shimmer 2019-08-02 14:20 评论0 收藏0