弹性盒子

Posted 2020-12-28 -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        中间基线对齐

 

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