flex布局-CSS中flex的属性

flex布局-CSS中flex的属性 ,对于想学习百科知识的朋友们来说，flex布局-CSS中flex的属性是一个非常想了解的问题，下面小编就带领大家看看这个问题。

原文标题：CSS中flex的属性

概述

css中的flex的作用是设置宽度，它有三个属性，flex-basis，flex-grow，flex-shrink.

1.作用：设置宽度

2.属性：

flex-grow　扩展比率

flex-shrink 收缩比率

flex-basis 伸缩基准值

flex默认值为:0 1 auto , 即flex-grow:0; flex-shrink:1; flex-basis:auto;

三个属

芸芸的舒心生活165

性的作用：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的，且这三个属性都是在子元素上设置的。

flex-basis

设置元素的宽度，虽然width也可以设置元素的宽度，但flex-basis会覆盖width的值。它规定的是子元素的基准值，是否溢出的计算与此属性相关，它规定的范围取决于box-sizing。默认值为：auto取值情况：

auto:首先检索该元素的主尺寸，如果主尺寸不为auto,则使用值采取主尺寸的值，如果是auto,使用content

content:该子元素的内容自动布局，有的用户代理没有实现content值，等效的替代方案是flex-basis和主尺 寸都取auto.

百分比：根据伸缩父容器的主尺寸计算，如果父容器的主尺寸取决于子元素，则计算结果和设为auto的一样.

补充：flex-basis与width的区别

如果没有设置flex-basis属性，flex-basis的大小为项目width的大小。

如果没有设置width属性，flex-basis的大小就是项目内容content的大小。

使用max-width、min-width来限制flex-basis：

四十二岁的女人性生活

itp{

flex-basis:250px;

max-width:100px;

}

it

山西省农村生活污水排放标准

p{

flex-basis:100px;

min-width:250px;

}

flex-grow

当父元素的宽度 ＞ 所有子元素的宽度的和时，即父元素有剩余空间，子元素分配父元素的剩余空间。默认值：0 ，表示该子元素不索取父元素的剩余空间。若值 ＞ 0，表示索取，值越大，索取的越多。

flex-shrink

当父元素的宽度 ＜ 子元素的宽度之和时，即子元素超出父元素，子元素缩小自己的宽度。默认值：1 ，父元素宽度 ＜ 子元素宽度之和，子元素宽度缩小。值越大，减小得越厉害。若值为0，表示不减小。

3.flex三个属性常见的取值：

flex flex-grow flex-shrink flex-basis 备注

默认值 0 1 auto

none 0 0 auto

auto 1 1 auto

1(非负) 1 1 0% 视为flex-grow的值

24px(长度) 1 1 24px 视为flex-basis的值

0%(百分比) 1 1 0% 视为flex-basis的值

2 3(两个非负) 2 3 0% 视为flex-grow、shrink的值

23 32px 23 1 32px 视为flex-grow、basis的值,flex-shrin取1

原文出处：http://bkw.iwtmm.com/post/20482

以上是关于flex布局-CSS中flex的属性的介绍，希望对想学习百科知识的朋友们有所帮助。

本文标题：flex布局-CSS中flex的属性；本文链接：http://yszs.weipeng.cc/zs/164892.html。