学习记录 flex布局（弹性盒子）flex-direction

基于学习的软件：

VSCodeUserSetup-x64-1.52.1.exe

Flex翻译为“弹性“，通过给元素设置display属性，属性值为flex或者inline-flex。
使其变成弹性容器，容器中的直系子元素就会变为弹性元素。

学习思维导图： 

 display: flex;

设置纵向：flex-direction: column; 

flex-direction: column-reverse;  纵向从下往上

 

设置横向：flex-direction: row; 

 横线自左往右： flex-direction: row-reverse; 

 从头开始排列 ：   justify-content: flex-start;

     

还有一些其他的可以试一试哦

 

 /*从尾部开始 */
        /* justify-content: flex-end; */
        /* 中心 */
        /* justify-content: center; */
        /* 各行之间留有空白的容器内 */
        /* justify-content: space-between; */
        /* 位于各行之前、之间、之后都留有空白的容器内 */
        /* justify-content: space-around; */
        /* 设置该属性它的默认值 */
        /* justify-content: initial; */
        /* 从父元素继承该属性 */
        /* justify-content: inherit; */
        /* 两边贴边，中间元素平分剩余空间 */
        /* justify-content: space-between; */

 欢迎补充！