简介
flex
的核心的概念就是容器
和轴
。容器包括外层的父容器
和内层的子容器
,轴包括主轴
和交叉轴
- 任何一个容器都可以指定为Flex布局。
.box{
display: flex;
}
- 行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
- Webkit内核的浏览器,必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
备注:
设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
父容器
容器具有这样的特点:
- 父容器可以统一设置子容器的排列方式,子容器也可以单独设置自身的排列方式。
- 如果两者同时设置,以子容器的设置为准。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start
,结束位置叫做main end
;交叉轴的开始位置叫做cross start
,结束位置叫做cross end
。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size
,占据的交叉轴空间叫做cross size
。
父容器:justify-content
主轴方向子容器对齐方式
flex-start
:起始端对齐flex-end
:末尾段对齐center
:居中对齐space-around
:子容器沿主轴均匀分布,位于首尾两端的子容器到父容器的距离是子容器间距的一半。space-between
:子容器沿主轴均匀分布,位于首尾两端的子容器与父容器相切。
父容器:align-items
交叉轴方向子容器对齐方式
flex-start
:起始端对齐flex-end
:末尾段对齐center
:居中对齐baseline
:基线对齐,这里的 baseline 默认是指首行文字,即 first baseline,所有子容器向基线对齐,交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。stretch
:子容器沿交叉轴方向的尺寸拉伸至与父容器一致。
父容器:align-content
当子容器多行排列时,设置行与行之间的对齐方式。
如果子容器只有一根轴线,该属性不起作用
flex-start
:起始端对齐flex-end
:末尾段对齐center
:居中对齐space-around
:等边距均匀分布space-between
:等间距均匀分布stretch
:拉伸对齐
父容器:flex-direction
主轴方向设置
主轴沿逆时针方向旋转90°
就得到了交叉轴
起始端由flex-start
表示,末尾段由flex-end
表示
- 向右:
flex-direction: row
- 向下:
flex-direction: column
- 向左:
flex-direction: row-reverse
- 向上:
flex-direction: column-reverse
父容器:flex-wrap
决定子容器是否换行排列,不但可以顺序换行而且支持逆序换行
nowrap
:不换行
wrap
:换行
wrap-reverse
:逆序换行
父容器:flex-flow
轴向与换行组合设置。
子容器沿着哪个方向流动,流动到终点是否允许换行
是一个复合属性,相当于flex-direction
与flex-wrap
的组合
row
、column
等,可单独设置主轴方向wrap
、nowrap
等,可单独设置换行方式row nowrap
、column wrap
等,也可两者同时设置
子容器
子容器:flex
子容器是有弹性的(flex 即弹性),它们会自动填充剩余空间,子容器的伸缩比例由 flex 属性确定
flex 的值可以是无单位数字(如:1, 2, 3),也可以是有单位数字(如:15px,30px,60px),还可以是 none 关键字。子容器会按照 flex 定义的尺寸比例自动伸缩,如果取值为none 则不伸缩。
该属性是flex-grow
、flex-shrink
、flex-basis
的简写。默认值:0 1 auto
子容器:align-self
单独设置子容器如何沿交叉轴排列
此属性的可选值与父容器 align-items 属性完全一致,如果两者同时设置则以子容器的 align-self 属性为准。
flex-start
:起始端对齐flex-end
:末尾段对齐center
:居中对齐baseline
:基线对齐stretch
:拉伸对齐
子容器:flex-basis
在不伸缩的情况下子容器的原始尺寸。主轴为横向时代表宽度,主轴为纵向时代表高度。
子容器:flex-grow
子容器弹性伸展的比例。剩余空间按比例分配给子容器。
默认为0,即如果存在剩余空间,也不放大
子容器:flex-shrink
子容器弹性收缩的比例。超出的部分按比例从给子容器中减去。
默认为1。设置为0的话,不缩小
负值无效
子容器:order
子容器的排列顺序,覆盖HTML代码中的顺序,默认值为 0,可以为负值,数值越小排列越靠前。
发表评论