• 博客园logo
  • 会员
  • 周边
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
*Lucas*
博客园    首页    新随笔    联系   管理    订阅  订阅

弹性盒子

    对于排版,以前用的多的都是,浮动,内外边距和定位。弹性盒子其实很好用,跟大家分享一点基础。

在父级里设:

<!--先把父级属性变成弹性盒子-->

            display:flex;  

flex-direction    项目的排列方向:有以下四种

1,row(默认值):主轴为水平方向,起点在左端。

2,row-reverse:主轴为水平方向,起点在右端。

3,column:主轴为垂直方向,起点在上沿。

4,column-reverse:主轴为垂直方向,起点在下沿。

 

justify-content     水平对齐方式:有以下五种

1,flex-start    从左到右。

2,flex-end      从右到左

3,center              居中

4,space-between           左右两边对齐

5,space-around             均匀分布

 

align-items     垂直方向对齐 :有以下三种

1,flex-start     顶部基线对齐

2,flex-end  底部基线对齐

3,center        中间基线对齐

 

以上都是写在父级里面的。

posted @ 2018-08-05 21:39  *Lucas*  阅读(283)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3