flex 常用布局自我记录

Posted 2021-02-18 cdj61

常用知识点

 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：拉伸对齐