文章目录
flex布局是什么?
- Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
- 行内元素也可以使用Flex布局。
/*块级元素*/
.header{
display: flex;
}
/*行内元素*/
.header_1{
display: inline-flex;
}
-
使用flex布局的元素称为(Flex Container)容器,它的所有子元素自动成为容器成员
-
display:flex;从某种意义上来说可以替代 float,即添加后可实现浮动的效果而且不用考虑清楚浮动,大家可以尝试一下
-
需要注意的是,设为flex布局以后,子元素的float、clear和vertical-align属性将失效
容器属性介绍(以下六个属性设置在容器上
)
flex布局里面包含了6个基本的属性,在下面会有详细的介绍。
flex-direction
.header {
flex-direction: row; /*使得元素由左向右横向排列 (默认方式)*/
flex-direction: column; /*使得元素自上而下纵向排列*/
flex-direction: column-reverse; /*使得元素自下而上纵向排列*/
flex-direction: row-reverse; /*使得元素由右向左横向排列*/
}
说到这里就出现就引出了一个问题:假如我给定的子元素的宽度和超过父元素的总和会出现什么情况呢?
例如以下:
.header {
display: flex;
flex-direction: row;
width: 1000px;
height: 400px;
border: black dotted;
margin: 0 auto;
}
.log {
margin: 30px;
width: 500px;
height: 70px;
border: red solid;
}
- 意料之外的是并没有出现我们想要的溢出效果,而是以平分的方式铺满整行。
- 原因:当容器没有足够大的空间来存放所有的子元素时,子元素会按照一定的压缩率被压缩,这个压缩率就是由flex-shrink来设置(flex-shrink默认值为1)
flex-wrap
.header{
flex-wrap: nowrap; /*(默认方式) 不换行 */
flex-wrap: wrap; /* 换行 第一行在上方 */
flex-wrap: wrap-reverse; /* 换行(逆向) 第一行在下方 */
}
同样这里也引出一个问题:用了flex-wrap:wrap;自动换行属性后,两行div中间会不会有空行?
.header {
display: flex;
flex-wrap: wrap;
width: 1000px;
height: 400px;
border: black dotted;
margin: 0 auto;
}
.log {
width: 400px;
height: 70px;
border: red solid;
}
其实是会的,解决方法:
- 取消父容器的初始高度设置,让其高度适应内容
- 父容器添加 align-content:flex-start (后面会有介绍)
flex-flow
.header{
flex-flow : <flex-direction> <flex-wrap>;
flex-flow: column wrap; /*example*/
}
flex-flow可同时对 flex-direction和 flex-wrap进行设置,顺序不限,默认值是row nowrap
。
justify-content
justify-content属性定义了项目在主轴
上的对齐方式。
.json{
justify-content: flex-start; /*(默认值) 左对齐 */
justify-content: flex-end; /* 右对齐 */
justify-content: center; /* 居中对齐 */
justify-content: space-between; /* 两端对齐,项目之间的间隔都相等 */
justify-content: space-around; /* 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。*/
justify-content: space-evenly; /* 均匀排列每个元素,每个元素之间的间隔相等 */
}
假设父容器下有 n 个子容器:
space-between 和 space-evenly 的区别
space-between | space-evenly |
---|---|
容器剩余空间由 (n -1) 个间隙平分 | 容器剩余空间由 (n +1) 个间隙平分 |
此时剩余空间由2个间隙平分 | 此时剩余空间由4个间隙平分 |
align-items
align-items属性定义项目在交叉轴
上如何对齐。1
.json_2{
align-items: stretch; /*(默认值) 如果项目未设置高度或设为auto,将占满整个容器的高度。*/
align-items: flex-start; /* 交叉轴的起点对齐 */
align-items: flex-end; /* 交叉轴的终点对齐 */
align-items: center; /* 交叉轴的中点对齐 */
align-items: baseline; /* 项目的第一行文字的基线对齐 */
align-content
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
。3
.json_3{
align-content: stretch; /* (默认值) 轴线占满整个交叉轴 */
align-content: flex-start; /* 与交叉轴的起点对齐 */
align-content: flex-end; /* 与交叉轴的终点对齐 */
align-content: center; /* 与交叉轴的中点对齐 */
align-content: space-between; /* 与交叉轴两端对齐,轴线之间的间隔平均分布 */
align-content: space-around; /* 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍 */
}
项目属性介绍
flex-basis
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)
.header{
flex-basis: auto; /* 默认值。长度等于灵活项目的长度。如果该项目未指定长度,则长度将根据内容决定。*/
flex-basis: initial; /* 设置该属性为它的默认值 */
flex-basis: inherit; /* 从父元素继承该属性 */
flex-basis: 50px; /* 一个长度单位或者一个百分比,规定灵活项目的初始长度。*/
}
flex-shrink
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
-
flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行
空间收缩
。 -
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
-
比如有 A, B, C的盒子,flex-shrink的默认值均为1,所以将剩余空间分为3分,即 1 : 1 : 14
-
父容器的宽度为1000px,每个子容器的宽度为500px,总和超出父容器 500px,那么500px将有三个容器按比例承担,每个容器承担 500/3px,
-
A 被移除溢出量: 500/3px,
B 被移除溢出量: 500/3px,
C 被移除溢出量: 500/3px
flex-grow
- flex-grow属性定义项目的
放大比例
,默认为0,即如果存在剩余空间,也不放大。 - 如果所有项目的flex-grow属性都为1,则它们将等分
剩余空间
(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
flex
flex属性是flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto。
.header{
flex: auto; /* "1 1 auto" */
flex: none; /* "0 0 auto" */
}
- 建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
order
order属性定义了项目的排列顺序,数值越小,排列越靠前,默认为0。(行优先
)
初始 | 经过改变 |
---|---|
1→ order : 1, 2 → order: 2 ,3 → order: 3 ,4 → order:4 ,5→ order:5 | 1→ order : 4, 2 → order: 2 ,3 → order: 3 ,4 → order:5 ,5→ order:1 |
align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性
.json_6{
align-self: auto; /*(默认值) 继承父元素的align-items属性,如果没有父元素,则等同于stretch*/
align-self: stretch; /* 如果项目未设置高度或设为auto,将占满整个容器的高度 */
align-self: flex-start; /* 交叉轴的起点对齐 */
align-self: flex-end; /* 交叉轴的终点对齐 */
align-self: center; /* 交叉轴的中点对齐 */
align-self: baseline; /* 项目的第一行文字的基线对齐 */
}
本文部分参考:“ https://www.runoob.com/w3cnote/flex-grammar.html ”