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

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

容器属性

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; } 均匀分布每个元素在容器内空间。

在这里插入图片描述
最后祝愿大家都身体健康并抓住这个机会充实一下自己!加油!加油!加油!
项目源代码

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐