flex 常用布局自我记录

常用知识点

display: flex;
    父容器:justify-content属性用于定义如何沿着主轴方向排列子容器。
    justify-content:flex-start:起始端对齐  左对齐
    justify-content:flex-end:末尾段对齐 右对齐
    justify-content:center:居中对齐 左右
    justify-content:space-around:子容器沿主轴均匀分布,位于首尾两端的子容器到父容器的距离是子容器间距的一半。
    justify-content:space-between:子容器沿主轴均匀分布,位于首尾两端的子容器与父容器相切。左右靠边中间居中

    父容器:align-items属性用于定义如何沿着交叉轴方向分配子容器的间距。
    align-items:center; //居中对齐 垂直
    align-items:flex-start; //起始端对齐  顶部
    align-items:flex-end;  //末尾段对齐 底部
    align-items:baseline; //基线对齐 默认是指首行文字 顶部
    align-items:stretch;  //子容器沿交叉轴方向的尺寸拉伸至与父容器一致

    子容器:在主轴上如何伸缩:flex
    可以是无单位数字(如:1, 2, 3),也可以是有单位数字(如:15px,30px,60px)
    还可以是none关键字,取值为none则不伸缩。
    单独设置子容器如何沿交叉轴排列:align-self,此属性的可选值与父容器align-items属性完全一致,如果两者同时设置则以子容器的align-self属性为准。
    align-self:flex-start:起始端对齐
    align-self:flex-end:末尾段对齐
    align-self:center:居中对齐
    align-self:baseline:基线对齐
    align-self:stretch:拉伸对齐

相关推荐