Flex布局

Posted 2020-12-13 axiadi

1：找个容器：

.container {
    display: flex | inline-flex;       //可以有两种取值：块元素，行内元素
}

 

2：容器的设置：

.container {
    flex-direction: row | row-reverse | column | column-reverse;                                            //主轴的方向
    flex-wrap: nowrap | wrap | wrap-reverse;                                                                //主轴是否允许折行
    flex-flow: <flex-direction> || <flex-wrap>;                                                             //简写
    justify-content: flex-start | flex-end | center | space-between | space-around;                         //主轴对齐方式
    align-items: flex-start | flex-end | center | baseline | stretch;                                       //辅轴对齐方式
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;                 //主轴折行的场合，多个主轴在辅轴方向上的对齐方式
}

 

3：子元素的设置：

.item {
    order: <integer>;
    flex-basis: <length> | auto;
    flex-grow: <number>;
    flex-shrink: <number>;
    flex: none | [ <‘flex-grow‘> <‘flex-shrink‘>? || <‘flex-basis‘> ]
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}