CSS中display属性的Flex布局

最新推荐文章于 2024-09-14 13:04:57 发布

崔世勋

最新推荐文章于 2024-09-14 13:04:57 发布

阅读量1.2k

点赞数

分类专栏： JS/nodejs/前台框架

JS/nodejs/前台框架专栏收录该内容

53 篇文章 0 订阅

订阅专栏

Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性

display: flex将对象作为弹性伸缩盒展示，用于块级元素。

display: inline-flex将对象作为弹性伸缩盒展示，用于行内元素。

基本概念

采用Flex布局的元素，称为Flex容器，简称“容器”。它的所有子元素自动成为容器成员，称为flex item。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size.

以下6个属性设置在容器上

1.flex-direction{row|row-reverse|column|column-reverse}

row(默认)沿水平主轴由左向左排列，row-reverse由右向左，column由上向下。

2.flex-wrap{nowrap|wrap|wrap-reverse}

nowrap（默认）不换行，wrap换行（第一行在上方）。

3.flex-flow{flex-direction||flex-wrap}

将上述两个方法的值用||连接即可。

4.justify-content{flex-start|flex-end|center|space-between|space-around}

item在水平方向的对齐方式。

flex-start在主轴上由左或上开始排列，flex-end在主轴上由右或下开始排列，center在主轴上居中排列，space-between在主轴上左右两端或者上下两端开始排列，space-around每个item两侧的间隔相等，所以item之间的间隔比项目与边框的间隔大一倍。

5.align-items{flex-start|flex-end|center|baseline|stretch}

用于指定垂直方向的对齐方式。

stretch默认值，当flex子项未设置高度或者调度值为auto时，stretch起作用，将flex子项高度设置为行高度。这里需要注意，在只有一行的情况下，行的高度为容器的高度，即flex子项高度为容器的高度。

6.algin-content{flex-start|flex-end|center|space-between|space-around|stretch}

该属性只作用于多行的情况下，用于多行的对齐方式。

stetch默认值，当flex子项未设置高度或者高度值为auto时，stretch起作用，将flex子项高度设置为行高度。flex-start表示各行与侧轴开始位置对齐，第一行紧靠侧轴开始边界，之后的每一行都紧靠前一行。flex-end表示各行与侧轴的结束位置对齐，最后一行紧靠侧轴结束边界，之后的第一行都紧靠前面一行。center表示各行与侧轴中间对齐。表示两端对齐，中间间距相等，要注意特殊情况，当剩余空间为负数时，效果等同于flex-start。space-around表示各行之间间距相等，中间间距一两端的2倍，要注意特殊情况，当剩余空间为负数时，效果等同于center.