Flex子元素

Posted jian1234

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flex子元素相关的知识,希望对你有一定的参考价值。

order

控制子元素在父容器的顺序 0 任何整数 负数

order:1;

 

flex-grow谁的值大谁空间多,同样的值就平分

flex-grow:1

 

flex-shrink 设置弹性容器中项目的收缩比率

1  数字  不能负数

 

flex -basis   伸缩项目分配空间=伸缩容器空间-basis设置的空间-其他子元素的width(若无则为其他内容占的空间)

auto   空间按剩余空间平均分

[width]

0  全部空间大小一致

 

*flex复合元素

flex-grow   flex-shrink  flex-basis

 

align-self

align-self:flex-start

align-self:flex-end

align-self:center

align-self:baseline

align-self:stretch

 

以上是关于Flex子元素的主要内容,如果未能解决你的问题,请参考以下文章

使用flex布局,子元素怎么高度自适应

Flex子元素

如何垂直对齐一个flex元素子元素[重复]

flex盒子子元素实现文本超出部分...

flex属性flex-growflex-shrinkflex-basis

移动端优先的flex三栏布局