flex布局总结

用display:flex或inline-flex来生成flex布局(写在父元素中)默认使子元素横向排列

容器属性都写在父元素中，如:要操作div下a标签的位置，flex属性都写在div中

容器属性(div(父元素))
    1.flex-direction  方向
    2.flex-wrap  换行
    3.flex-flow(1,2的简写)
    4.justifl-content  横向对齐方式 
    5.align-items  竖向对齐方式
    6.align-content   多条轴对齐方式

column-count:4     一列4个子元素

flex-direction:row  横向排列
                     row-reverse   横向反向排列
                     column    竖向排列
                     column-reverse   竖向反向排列

justify-content:flex-start靠左布局  
                       flex-end 靠右布局 
                       center居中  
                       space-between两边对齐
                       space-around间隔相同
                       space-evenly每个元素平局分

 

flex-wrap:wrap   超出容器后换行排列
               nowrap  超出后不换行(默认)
               wrap-reverse  超出后从右开始排列

 

align-items:stretch  拉伸
                  flex-start  上端对齐
                  flex-end   下端对齐
                  center  垂直居中
                  baseline  文本对齐

 

 align-content:flex-start  头部对齐
                      flex-end   下部对齐
                      center   居中对齐
                      space-between  两端对齐
                      space-around  间隔相同
                      stretch  填充

 

项目属性(div下的子元素)
    1.order
    2.flex-grow
    3.flex-shrink
    4.flex-basis
    5.flex(2,3,4的简写)
    6.align-self

多个子元素  flex:3  宽各占三份
    ●order:number   项目排列顺序，数字越小越靠前，默认为0
    ●flex-grow:number   剩余空间按比例分配放大，默认为0，即有容器有剩余空间时该项目不放大
    ●flex-shrink:number  项目的缩小比例，默认为1，即容器空间不足时，该项目缩小
    ●align-self:center 居中  脱离总体对齐方式单独设置属性
    ●flex-basis:100px   最小100px，如果内容过长，width会自适应增大。（如果内容是英文单词(单个单词无空格)或数字，且flex-basis和width同时使用时，采用最大值，且flex-basis自适应无效）

 

 以上内容为本人在b站'耕耕技术宅'up主视频内学习总结，仅做学习交流