CSS3 flex shorthand All In One

CSS3 flex shorthand All In One

flex === flex-grow/flex-shrink/flex-basis

.flex-item {
    box-sizing: border-box;
    min-width: 373px;
    height: 408px;
    background: #FFFFFF;
    border-radius: 4px;
    // flex: 1 0 auto;
    flex: 1 0 373px;
    margin-right: 10px;
}

.flex-box {
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

flex API

/* Keyword values */
flex: auto;
flex: initial;
flex: none;

/* One value, unitless number: flex-grow
flex-basis is then equal to 0. */
flex: 2;

/* One value, width/height: flex-basis */
flex: 10em;
flex: 30%;
flex: min-content;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Global values */
flex: inherit;
flex: initial;
flex: revert;
flex: unset;

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

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox#flex_shorthand_versus_longhand

refs

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

---

---

©xgqfrms 2012-2020

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

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---