前端小白笔记贴-弹性盒子的容器属性

前端小白笔记贴-弹性盒子的容器属性

在这特殊时期,希望在战“疫”一线的你保护好自己。
而我这种在家自我隔离的咸鱼，想来没事做，就写了一下学习笔记，在这里分享一下，有部分是学习以后自己总结的，有错误的希望看到的大佬们帮忙纠正一下。今天写的是容器属性。文章末尾有源代码链接。

容器属性

1.flex-direction属性

flex-direction属性是用来定义弹性布局的主轴方向排列循序
主要属性值有
.box{
flex-direction:row | row-reverse | cloumn | cloumn-reverse；
}

一（默认值）.box{ flex-direction:row; } 定义横轴为主轴，且起点（start）为左方。

二.box{ flex-dirrection:row-reverse; } 定义横轴为主轴，且起点(start)为右方。

三.box{ flex-direction:cloumn; } 定义纵轴为主轴，且起点(start)为上方。

四.box{ flex-direction:column-reverse; } 定义纵轴为主轴，且起点为下方；

2.flex-wrap属性

我们在使用弹性盒子的时候，子元素默认会横排在一行，flex-wrap属性可以设置如何换行。
主要属性值有
.box{
flex-wrap:nowrap | wrap | wrap-reverse;
}

一(默认值).box{ flex-wrap:nowrap; } 定义强制让其子元素不换行。

二.box{ flex-wrap:wrap; } 定义如果剩下的空间不够完整放下一个子元素就换行。

三.box{ flex-wrap:wrap-reverse; } 定义第一行从主轴的起点（start）与副轴的终点（end）开始， 如果剩下的空间不够完整放下一个子元素就换行。

3.flex-flow属性

这里就不做图片展示了，需要注意的是这个属性是flex-flow和flex-wrap属性的复合属性。
全部属性值 .box{
flex-flow: flex-direction属性 & flex-wrap属性 的全部属性值;
}

4.justify-content属性

justify-content属性是定义弹性盒子的子元素在其主轴上的空间分配方式。
主要属性值 .box{
justify-content:flex-start | flex-end | center | space-between | space-around;
}

一（默认值）.box{ justify-content:flex-start； } 定义其子元素以start（起点）方向排列。

二.box{ justify-content:flex-end; } 定义其子元素以end（终点）方向排列。

三.box{ justify-content:center; } 定义其子元素居中排列。

四.box{ justify-content:space-between; } 定义均匀排列每个元素，首个元素放置于starrt(起点)，末尾元素放置于end(终点)。

五.box{ justify-content:space-around; } 均匀分布每个元素在主轴的空间。

5.align-items属性

align-items属性定义子元素在副轴（column）的空间分配方式。
主要属性值有 .box{
align-items:flex-start | flex-end | center | baseline | stretch;
}

一.box{ align-items:flex-start; } 定义其子元素沿副轴起点（start）水平排列。

二.box{ align-items:flex-end; } 定义其子元素沿副轴终点（end）水平(即图中红线)排列。

三.box{ align-items：center； } 定义其子元素沿副轴中线水平排列。

四.box{ align-items:baseline; } 定义其子元素沿第一个子元素的基线（即图中红线）水平排列。

五.box{ align-items:stretch; } 如果子元素未设置高度或设高度为auto，将会使子元素的高度撑满高度。下列图纸中1号和3号是被撑大的，2号和4号才是自身的高度。

6.align-content属性

align-content属性定义了多根轴线的对齐方式，如果只有一根轴线则不起作用。
主要属性.box{
align-content:flex-start | flex-end | center | space-between | space-around | stretch;
}

一.box{ align-content:flex-start; }

定义其子元素从副轴（column）起点（start）填充，可以看到内容是向终点（end）方向溢出的。同理如果容器高度大于内容需要的高度那么多出的空间也是在终点（end）方向。（红色线条为容器边框）

二.box{ align-content:flex-end; }

定义其子元素从副轴（cikumn）终点（end）填充，可以看到内容是向起点（start）方向溢出的。同理如果容器高度大于内容需要的高度那么多出的空间也是在起点（start）方向。

三.box{ align-content:center; }

定义其子元素从副轴中线居中排列，可以看到从起点（start）和终点（end）溢出的元素高度是相等的。同理如果容器高度大于内容需要的高度那么多出的空间也是起点（start）和终点（end）方向剩余的空间相等。

三.box{ align-content:space-around; } 均匀分布每个元素在容器内空间。

最后祝愿大家都身体健康并抓住这个机会充实一下自己！加油！加油！加油！
项目源代码