flex属性详解0，1，auto分别啥意思

Posted 2023-05-03

参考技术A 1.当flex取值为none时，则计算值为0 0 auto，如下两种写法是等同的

2.当flex取值为auto时，则计算值为1 1 auto，如下两种写法是等同的

3.当flex取一个非负数字时，为flex-grow的值，flex-shrink取1，flex-basis取0%，如下两种写法是等同的

4.当flex取一个长度或者百分比时，为flex-basis的值，flex-grow取1，flex-shrink取1，如下两种写法是等同的

5.当flex取值为两个非负数字时，则分别为flex-grow、flex-shrink的值，flex-basis为0%。如下两种写法是等同的

6.当flex取值为一个非负数字和长度或百分比时，分别为flex-grow、flex-basis的值，flex-shrink取1。如下两种写法是等同的

三个参数分别对应的是 flex-grow, flex-shrink 和 flex-basis，默认值为 0 1 auto。
1.flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
2.flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
3.flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。

1.宽度

2.内置调节大小的关键字

3.根据内容自动调节大小

4.全局值

求教css中元素的auto属性值是啥意思，比如margin:0 auto表示啥？

把一个属性的值设置为auto，就是让各个浏览器对该属性使用各自的默认值。

定义一个方向为auto，让浏览器自动选择合适的margin（页边距）大小；

margin:0 auto可以实现水平居中，其相当于margin：0，auto，0，auto

margin:auto = margin:auto auto auto auto;

margin:0 auto = margin:0 auto 0 auto;

margin:n m p q表示该元素上外边bai距为n，右外边距为m，下外边距为p，左外边距为q，即 margin:上 右 下 左 ，逆时针一圈。

扩展资料：

“margin:20px;”表示四个方向的外边距都是20px；

“margin:20px 40px;”表示top为20px，right为40px；由于bottom和left缺省，所以自动将它们分别设为20px和40px。转化为第4种写法为：“margin:20px 40px 20px 40px;”。

“margin:20px 40px 60px;”表示top为20px，right为40px，bottom为60px；由于left缺省，所以自动将它设为40px。转化为第4种写法为：“margin:20px 40px 60px 40px;”。

参考资料来源：百度百科-margin

参考技术A 定义一个方向为auto，让浏览器自动选择合适的margin（页边距）大小；
margin:0 auto可以实现水平居中，其相当于margin：0，auto，0，auto 参考技术B 把一个属性的值设置为auto，就是让各个浏览器对该属性使用各自的默认值。 参考技术C 首先你要知道,margin后面是有4个参数的。例如：margin:1px 1px 1px 1px
分别表示 上、右、下、左。如果只写2个参数的话，比如：margin：1px 2px
那么着是代表 上下都为1px 左右都为2px.
至于居中，很明显，margin:0 auto 是标准的写法！明白？？ 参考技术D css中的auto是自动适应的意思，而在css中auto往往都是默认值。

正如margin:0 auto，意思就是上下边距为0，左右边距为auto，就是自动适应。
但是，如果要使用他的话，就必须给标签配上指定的宽度，如下：
<div class="center">居中</div>
<style type="text/css">
.center
width:200px;

height:200px;

margin:0 auto;

background-color:yellow;


</style>

另外，margin:0 auto 和 margin: 0 auto 0 auto 的效果是相同的。
都是指的上下边距为0，左右边距自动适应宽度相等。