flex 布局下关于容器内成员 flex属性的理解

flex布局分为容器的设置和容器内成员的设置，容器的设置是管理成员的排列方式，也就是管理排列的方向和对齐的位置。成员的设置则是关于成员的大小和显示的位置（order）。

弹性布局，弹性布局，自然要提现他的弹性，所谓弹性也就是对空间的分配。成员设置中的flex属性，就是对于额外空间的管理。

flex可以设置三个值，第一个值必选，后两个可选。

flex的第一个值

可以用flex-grow单独设置，代表含义是对额外空间的占据量，所谓额外空间就是这一行多余的空间，有多余的空间这一属性才有用。默认值是0，意思就是即使有多余空间，它也不要。

举个列子

这就是默认的效果，如果给其中的一个设置任意一个正值，那它会把所有额外空间占掉；如果给多个成员设置正值，那么他们会根据正值的大小分配，比如值一个为1，一个为2，那么额外空间就会分成三份，给1的一份，给2的两份。

首先将二号设为1，如图

如果将二号设为1，三号设为2，如图

有人会把flex-grow的值理解为总长度，这是个误解，它实质是对额外空间的分配。

flex的第二个值

可以用flex-shrink单独设置，这个属性只有在没有额外空间时起作用，意思是没有额外空间时，成员贡献出空间的大小。默认值为1，如果为0意思是不贡献空间，也就是说即使空间不足，成员大小也不发生改变。

首先默认情况，改变容器的大小

然后，如果设置为0。

如果给二号设置为2，已知默认值为1

可以看出二号释放出的空间是一和三的两倍，所以这里的值并不是缩小的比例，而是释放空间的份额。默认都为1，那也就是说大家释放同等的空间去填补容器的缩小量。

flex的第三个值

可以用flex-basis来设置，这个值呢，表示在分配额外空间之前，成员占据的空间，默认值为auto，意思就是你本来占多少就是多少。但也可以自己设置长度(px)。这个值的效果就是确定在释放和分配空间的时候，你的初值是多少。

比如三个成员原本长度一样的，我给二号设置flex-basis，如图

总结

flex属性其实就是flex-grow，flex-shrink，flex-basis三者的缩写形式。要么只写第一个，要么三个全写，防止自己搞错（确实有flex：0 auto 这种写法，但最好还是避免吧）

一般还有几个常用值

flex：auto；等同于 flex：1 1 auto; 意思就是占满额外空间，可缩放。

flex:none; 等同于flex：0 0 auto；意思是不占额外空间，不可缩放。

从字面上解释大概就是可弹性与不可弹性。

转载于:https://www.cnblogs.com/grey-zhou/p/5736223.html

flex 布局下关于容器内成员 flex属性的理解相关推荐

css不换行省略号没作用,flex布局下，css设置文本不换行时，省略号不显示的解决办法...
大致是有一个 main 容器是 flex 布局,左边一个 logo 固定宽高,右边 content 动态宽度. a name a info Lorem ipsum dolor sit amet, co ...
flex布局下文字超出省略号代替不起作用解决方法
项目中发现,在flex布局下,希望目标元素文字超出省略号时,text-overflow: ellipsis属性无效,结论是设置文字超出省略号的元素,然后网上找了一圈设置父元素width: 0.over ...
Flex布局下,文字超出省略号显示无效解决方案
默认的flex布局下的标题文字超出后省略号显示无效解决办法: 在flex:1的盒子中,设置overflow: hidden; 或 width: 0;即可. <div class=" ...
display:flex布局下white-space:nowrap失效问题解决
文字长度过长显示省略号的样式设置方法众所周知: h3 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis; } 然而有一次,我在 ...
弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题
文字长度过长显示省略号的样式设置方法众所周知:  .css {white-space: nowrap;overflow: hidden;text-overf ...
html flex布局换行,flex布局下换行兼容问题
最近使用flex布局大体上都没问题,就是一些版本都存在一点兼容问题尤其是换行的时候,我们来看下面的Less 文件! 各大浏览器兼容都写好了!但是还是存在换行问题 ,看列子 .flex-block() ...
Flex布局下如何使用text-overflow:ellipsis省略过长文本
问题试想一下我们如何通过Flex布局实现下面这个组件呢? 中间显示的文字内容过长是可以自动省略 Flex布局实现方法一(推荐) HTML: <div class="container ...
css flex布局下
设置主轴方向主轴默认是水平方向, 侧轴默认是垂直方向修改主轴方向属性: flex-direction 属性值作用 row 行, 水平(默认值) column *列, 垂直 row-reverse ...
css3 flex 省略号,flex 布局下 CSS 文本超出单行宽度后显示省略号
布局两栏布局,左边定宽,右边 flex-grow: 1,自动填满剩余空间. image.png {{book.name}} {{book.author}} 给 book-info 设置width: ...

flex 布局下关于容器内成员 flex属性的理解

flex 布局下关于容器内成员 flex属性的理解相关推荐

最新文章

热门文章