#flex布局(2)-子元素

Property #1: Flex-basic

改变main axis的长度,默认值是auto

Property #2: Flex Grow

flex-grow(膨胀系数),默认值是0,也就是元素不会主动去占据容器的空间,集中在一侧。

这个值是个相对值,当所有子元素都进行设定为1时后,他们占据的空间大小相同,如果将其中一个改为3,这个被改动的元素将占据更多的空间。简单的说,具体某个元素的flex-grow是分子,所有子元素的flex-grow之和是分母,分子越大,占据的空间也就越多。

值得注意的是,用于让子元素抢占的空间,并不是整个父容器,当前父容器比刚好紧凑放置子元素的容器多出来的部分。

Property #3: Flex Shrink

与flex-grow相反,flex-shrink(收缩系数)决定元素的收缩程度。只有当容器太小,需要子元素收缩适应时才使用这个属性。

默认情况下,所有子元素的flex-shrink的默认值是1,意味着他们当容器太小时,他们将受到容器的约束进行收缩。
如果要让一个子元素不自动收缩,那么就把它的flex-grow设置为0。

同样的,flex-grow也是个相对值,这个值越大收缩的程度越大。每个元素按比例收缩,而收缩的总值等于刚好紧凑放置子元素的容器与当前父容器的差值。

Property #4: Flex

flex是grow, shrink, basis的集合,它的默认值是0 1 auto,分别对应grow,shrink,basis

参考文章:https://medium.freecodecamp.com/even-more-about-how-flexbox-works-explained-in-big-colorful-animated-gifs-a5a74812b053

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 前言 FlexBox是css3的一种新的布局方式,天生为解决布局问题而存在的它,比起传统的布局方式,我们使用Fle...
    zevei阅读 5,288评论 23 3
  • 应用在父元素上-flex box 1.模型 方向 换行 display: flex(盒子模型) 定义父元素为fle...
    林立镇阅读 8,698评论 0 27
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 8,913评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 10,139评论 0 26
  • 人生皆因心中魔,万事一过成蹉跎。 若非心中杂念故,桂花又岂人闲落。 (心也浮躁,犹记人闲桂花落,写于2014)
    云烟一客阅读 2,948评论 0 4

友情链接更多精彩内容