css Flexbox属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css Flexbox属性相关的知识,希望对你有一定的参考价值。

.flex-container {
    display: flex;

    align-content: flex-start;
    /*  flex-start: Lines are packed at the top of the container.
        flex-end: Lines are packed at the bottom of the container.
        center: Lines are packed at the vertical center of the container.
        space-between: Lines display with equal spacing between them.
        space-around: Lines display with equal spacing around them.
        stretch: Lines are stretched to fit the container. */    
    
    flex-direction: column;
    /* column-reverse, row, row-revers, column */
    
    flex-wrap: nowrap;
    /* wrap, wrap-reverse, nowrap */
    
    flex-flow: column wrap;
    /* shorthand for flex-direction AND flex-wrap */
    /* <flex-direction> <flex-wrap> */

    justify-content: space-between;
    /* flex-start, flex-end, center, space-around, space-between; */

    align-items: center;
    /* flex-start, flex-end, center, baseline, stretch */
}

以上是关于css Flexbox属性的主要内容,如果未能解决你的问题,请参考以下文章

Flexbox:Autoprefixer 添加了一个破坏 Safari 的 css 属性

CSS3 Flexbox属性可视化指南

css3弹性盒模型(Flexbox)

CSS Flexbox

在 CSS Flexbox 中,为啥没有“justify-items”和“justify-self”属性?

在 CSS Flexbox 中,为啥没有“justify-items”和“justify-self”属性?