flex item default All In One

flex item default All In One

flex item default 初始值 === flex: 0 1 auto;

https://drafts.csswg.org/css-flexbox-1/#propdef-flex-grow

https://drafts.csswg.org/css-flexbox-1/#propdef-flex-shrink

https://drafts.csswg.org/css-flexbox-1/#propdef-flex-basis

flex-grow

Initial:0

omitted： 1

flex-shrink

Initial:1

omitted： 1

flex-basis

Initial:auto

omitted： 0

https://drafts.csswg.org/css-flexbox-1/#propdef-flex


/* flex container */.flex-container {
background: #ccc;
border: 1px solid orange;
width: 80vw;
height: 100px;
margin: 10px auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}/* flex-item */.flex-item {
background: #fff;
width: 200px;
height: 80px;
margin-top: 10px;
border: 1px solid red;
text-align: center;
}.default {
/* flex: 0 1 auto; */
}.test {
/* flex: 0 1 auto; */
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}

MDN

https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

/* 关键字值 */
flex: auto;
flex: initial;
flex: none;/* 一个值, 无单位数字: flex-grow */
flex: 2;/* 一个值, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;/* 两个值: flex-grow | flex-basis */
flex: 1 30px;/* 两个值: flex-grow | flex-shrink */
flex: 2 2;/* 三个值: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;/*全局属性值 */
flex: inherit;
flex: initial;
flex: unset;

W3C

https://www.w3.org/TR/css-flexbox-1/

https://drafts.csswg.org/css-flexbox-1/#flex-property

https://drafts.csswg.org/css-flexbox-1/#propdef-flex

flex item default 初始值 === flex: 0 1 auto;

https://drafts.csswg.org/css-flexbox-1/#propdef-flex-grow

https://drafts.csswg.org/css-flexbox-1/#propdef-flex-shrink

https://drafts.csswg.org/css-flexbox-1/#propdef-flex-basis

refs

https://css-tricks.com/almanac/properties/f/flex/

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---