【前端】Flex布局简直太简单了,一秒就懂!两秒就精通!!

.flex-box {
    display:flex;                     /*显示方式:flex*/
    display: -webkit-flex;            /*针对webkit内核的浏览器*/
    flex-wrap: nowrap;                /*换行方式:         不换行nowrap换行warp;反转换行wrap-reverse;*/
    flex-direction:row;               /*水平垂直排列:     水平row;row-reverse;垂直column;column-reverse;*/
    justify-content: flex-start;      /*元素水平排列方式: 居左flex-start;居右flex-end;水平居中center;间隔居中space-around;间隔最大化space-between;*/
    align-items: stretch;             /*元素对齐方式:      纵向拉伸stretch;顶部对齐flex-start;底部对齐flex-end;垂直居中center;基线对齐baseline;*/
    align-content: stretch;           /*行元素对齐方式:    默认stretch;置顶flex-start;置底flex-end;间隔居中space-around;间隔最大化space-between;*/

}
.flex-box>.flex-item{
    order:0;                          /*排列顺序:         数值,默认0*/
    flex-grow:0;                      /*放大比例:         默认0,即如果存在剩余空间,也不放大。*/
    flex-shrink:1;                    /*缩小比例:         默认1,如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。*/
    flex-basis:auto;                  /*元素主轴:          默认auto。会根据flex-direction定义的主轴(水平或者垂直),定义项目本来的大小,跟width或者height一样。*/
    flex:0 1 auto;                    /*简写:              推荐,以上三个的缩写,默认 0 1 auto;  flex-grow;flex-shrink;flex-basis;*/
    align-self:auto;                  /*元素垂直对齐方式:  可覆盖align-items;默认auto;置顶flex-start;置底flex-end;垂直居中center;基线baseline;垂直拉伸stretch;*/
}

举个栗子!


一劳永逸的搞定 flex 布局
Flex 布局教程:实例篇
3分钟看懂flex布局

我来吐槽

*

*