跟Joy姐学前端 css-day07

flex布局

1.容器 container （父元素）

/* 设置弹性容器 display: flex 设置块级的弹性元素 inline-flex 行内弹性元素 （弹性容器的子元素是弹性元素 但只管子元素不管后代元素 一个元素可以同时是弹性容器和弹性元素）

            flex-diretion 指定容器中弹性元素的排列方式
                row 默认值 弹性元素在容器中水平排列
                row-reverse 水平反向排列
                column 垂直方向排列
                column-reverse 垂直反向排列
            主轴 弹性元素的排列方向
            侧轴（辅轴） 与主轴垂直的就是侧轴
            
            flex-wrap 是否换行
                wrap  nowrap
            justify-content 分配主轴上的空白空间
                flex-start 主轴起边
                flex-end 主轴终边
                center 居中
                space-around 把空白空间分布到元素的两侧
                space-between 把空白空间分布到元素之间 元素两端对齐
                space-evenly 把空白空间分布到元素单侧
             align-items 元素在辅轴方向如何对齐
             align-content 元素在辅轴上空白空间的分布

2.项目items（子元素）

弹性元素的属性

1. flex-grow 弹性增长系数 默认是0 （可以为任意非负值） 当父元素有多余的空间，元素会按照比例分配空间

   1. flex-shrink 缩减系数 默认值1（可以为任意非负值） 当父元素空间不足以容纳所有的子元素时，元素会进行收缩 3.flex-basis 主轴方向的基础长度 默认值是auto 表示参考元素本身的宽高 如果传了具体值 就以该值为准 以上3个属性可以简写为flex

            
            
            flex： 增长      缩减    基础长度
                    0        1        auto     flex：initial 默认值
                    1        1        auto     flex: auto 用的多
                    0        0        auto     flex：none
                    1        1        0%       flex：1
                    0        1        0%       flex：0
                    
            flex：initial 适合小控件元素的分布布局
            flex：auto 适用于基于内容动态适配的布局
            flex：1 适合于等分布局

小结：说实话，之前就对flex布局早有耳闻，但苦于一直看不懂，理不清里面的关系，经过Joy老师分模块抽丝剥茧后，我觉得它们在我脑海中被码的整整齐齐的，真的很感恩遇到Joy姐，我的良师益友。

PS: 如果你跟我一样，苦于自学无门，可以来找Joy姐，直播上课，监督制作业，一对一答疑解惑，来一起学习吧，我的咨询老师是她itLee7777，v号。