弹性盒基本属性

练好弹性盒就得会练骰子

下面是一些弹性盒的属性

 

弹性盒：
        控制子元素布局方式：display：flex 使当前父元素变成弹性盒控制子元素

        主轴排列方向：（属性给父元素加）
            flex-direction:row    默认轴X轴
            flex-direction:row-reverse    主轴横向的相反方向
            flex-direction:column    改变主轴（纵轴为主轴）
            flex-direction:column-reverse    主轴纵向的相反方向
            
        主轴对齐方式：（属性给父元素加）
            justify-content:flex-star    默认
            justify-content:flex-end    主轴末端
            justify-content:center        居中
            justify-content:space-between    两端对齐头尾没有间距
            justify-content:space-around    自动对齐中间有间距
        
        侧轴对齐方式：（属性给父元素加）
            algin-items:flex-star    默认
            algin-items:flex-end    末端
            algin-items:center    居中
            
        控制子元素换行（属性给父元素加）
            flex-wrap:wrap    换行中间没有间距
            flex-wrap:wrap-reverse    反向排序换行中间有间距上面的元素到底下
            flex-wrap:no-wrap    不换行
            
        行与行之间的对齐方式 必须先添加flex-wrap:wrap;
            align-content:flex-star    顶端开始
            align-content:flex-end      换行到末端中间没有间距
            align-content:center        居中
            align-content:space-around    居中状态间距自动分配
            align-content:space-between    上贴上下贴下中间有间距
            
        控制子元素侧轴对齐方式（属性给操作的子元素加）
            align-self:auto    默认值
            align-self:center    侧轴居中
            align-self:flex-end    侧轴末端
            align-self:flex-star    侧轴顶端
            align-self:strech    控制的子元素不能添加高度否则实现不了拉伸
            align-self:order    数值（接受负值）加在子元素后
            
        剩余空间自动分配
            给需要添加元素的元素添加flex：1 会自动撑开其他元素保持本身
            flex-shrink    当数值为0，不在收缩
            flex-shrink：1    使宽度不在超出
            
        设置单位 vw
            设计图为640px：html{font-size：31.25vw}
            设计图为750px：html{font-size:26.67}
        
        设置像素px转为rem
            量出的尺寸 / 100 =     rem
        没有引入插件➗200
        
        移动端准备工作：（需要设置的公共样式）
            .clear_fix:after{content:'.';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
            html,body{height:100%;}
            body{display:flex;flex-direction:column;}
            html{font-size:26.67vw;}
            *{box-sizing:border-box;}(怪异盒)
            
            
        属性：order()像素越大越往后排(加在子元素上的)
        
        属性：flex-shrink:0; 移动端主轴溢出