flex item default All In One

flex item default All In One flex item default 初始值 === `flex: 0 1 auto;`

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/​​

---