码迷,mamicode.com
首页 > 其他好文 > 详细

flex 常用布局自我记录

时间:2020-05-20 12:02:09      阅读:50      评论:0      收藏:0      [点我收藏+]

标签:单位   lin   pac   分布   ali   str   拉伸   nbsp   基线   

常用知识点

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

 

flex 常用布局自我记录

标签:单位   lin   pac   分布   ali   str   拉伸   nbsp   基线   

原文地址:https://www.cnblogs.com/cdj61/p/12922757.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!