2个概念10种属性教你上手flex布局

两个概念

插图

一. 容器与项目

容器：应用display:flex | inline-flex样式的元素为容器元素,确定了容器元素以后，子元素的float,clear,position属性将会失效，因为（flex布局已经够强大啦，不需要其他属性支持其布局）

项目：容器元素内部的子元素为项目

容器和项目

二. 主轴与交叉轴

主轴：flex-direction: row | column | row-reserver | column-reserve定义的轴为主轴，根据其属性值，可以有一下4种可能性。

主轴和交叉轴

交叉轴：主轴以外的一条轴就默认为交叉轴。

十个属性

10个属性

1. flex-direction:确定容器的主轴

.container {
    flex-direction:row | column | row-reserver  | column-reserve
}

2. flex-wrap:如果项目过多，主轴一行排不下，其排列形式

.container {
    flex-wrap: no-wrap | wrap | wrap-reverse
}

flex-wrap

3. justify-content：主轴对齐方式

.container {
    justify-content:flex-start | flex-end | center | space-between | space-around
}

justify-content

4. align-item: 交叉轴对齐方式

.container {
    justify-content:flex-start | flex-end | center | baseline | stretch
}

align-item

5. align-content: 当项目过多时，主轴上排列不了，多行排列，把多行项目作为一个整体，在交叉轴上的对齐方式。属性特性大体如：align-item

.container {
    align-content:flex-start | flex-end | center | space-between | stretch
}

6. order:项目的排列方式，order值越小排列越前

    .item {
        order:<integer> ||  0
    } 

order

7. flex-grow:在容器有剩余空间的前提下，每个项目对于剩余空间所占比例指数

    .item {
         flex-grow:<integer> ||  0
    } 

flex-grow

8. flex-shrink:在容器空间不足的前提下，每个项目缩放所占比例指数

    .item {
         flex-shrink:<integer> ||  1
    } 

flex-shrink

9. flex-basis:容器的剩余空间就是由该属性计算出，flex-basis表示项目所占空间

    .item {
         flex-basis:<length> | auto
    } 

10. align-self:整个容器由自己的对齐方式，容器里面的项目如果需要个性的对齐方式，可以使用该属性设置

    .item {
         align-self:auto | flex-start | flex-end | center | baseline | stretch
    } 

总结

flex布局十分灵活,可以摆脱之前尴尬的布局局面，了解概念属性就可以愉快布局啦，当然不要忘记起浏览器支持情况。

兼容性

我是懒虫菇凉，如果你也喜欢，就请关注，一起学习吧！