首页 > 其他 > 详细

弹性盒子

时间:2018-08-05 22:23:27      阅读:183      评论:0      收藏:0      [点我收藏+]

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

在父级里设:

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

            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        中间基线对齐

 

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

弹性盒子

原文:https://www.cnblogs.com/-Lucas-/p/9427395.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!