css基础--弹性盒子Flexbox

目录

Flex容器属性

flex-direction属性

flex-wrap属性

flex-flow属性

justify-content属性

align-items属性

align-content属性

子元素（项目）属性

order属性

flex-grow属性

flex-shrink属性

flex-basis属性

flex属性

align-self属性

---

Flex容器属性

        通过将display属性设置为flex，flex容器即可伸缩

    .fatherbox{
        display: flex;
    }

flex-direction属性

        作用：决定flex项目排列方向       

flex-direction: row(默认)|row-reverse|column|column-reverse;

       属性值：

        row(默认值)： 水平排列，左对齐，自左向右排列

        row-reverse：水平排列，右对齐，自右向左排列

        column：垂直排列，自上而下排列

        column-reverse：垂直排列，自下而上排列

flex-wrap属性

        作用：决定flex项目如何换行

flex-wrap: nowrap(默认值)|wrap|wrap-reverse;

        属性值：

        nowrap(默认值)： 不换行

        wrap：换行

        wrap-reverse：换行，行的顺序反向（第一行在下方，最后一行在上方）

flex-flow属性

        作用：综合设置flex-direction属性和flex-wrap属性

flex-flow:(flex-direction)||(flex-wrap);

justify-content属性

        作用：设置flex项目在主轴上对齐方式

justify-content: flex-s