Hello小伙伴们,好久不见,想必这段时间连翻的ES6让大家感觉有些烦躁,我们今天再来讲一讲CSS吧!大家听过Flex布局吗?这个可是响应式布局的利器呢~
现在我们就来讲讲Flex吧~今天主要谈谈容器:
Flex基础知识
Flex布局到底是个啥,Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何盒子都可以成为容器,但是一旦成为容器,其子元素的一些布局就丧失了作用,比如float、clear、vertical-align等属性。
我们说到了容器,容器就是装东西的,这里装的就是item,元素成为容器了,其子元素就成为item了~
定义flex布局:
容器
容器总共有6个属性:就是在我们摆放东西的时候我们会想,怎么个排放顺序,怎么个排放方向等,这里也是一样。
1)flex-direction:决定主轴的方向(即项目的排列方向)
flex-direction: row | row-reverse | column | column-reverse;
分别表示:主轴为水平方向,起点在左 | 起点在右 | 主轴为垂直方向,起点在上 | 起点在下
2)flex-wrap:定义如果一条轴线排不下,如何换行
flex-wrap: nowrap | wrap | wrap-reverse;
分别表示:不换行 | 换行,第一行在上 | 换行,第一行在下
3)flex-flow:flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
flex-flow: <flex-direction> || <flex-wrap>;
4)justify-content:定义了项目在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
分别表示:左对齐 | 右对齐 | 居中 | 两端对齐,item之间间隔相等 | 每个项目两侧间隔相等
5)align-items:定义项目在交叉轴上如何对齐
align-items: flex-start | flex-end | center | baseline | stretch;
分别表示:交叉轴起点对齐 | 终点对齐 | 中点对齐 | item第一行文字基线对齐 | 项目未设置高度,则占满整个容器高度
6)align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
与上个有些相似~~不过有些不同的属性:
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。