css flex布局

发布时间：2025-03-25 09:58:19

8 阅读

0 评论

文章标签： css布局flex

一、Flex布局涉及的基本概念

容器(container)：display被设置为flex、inline-flex的元素被称作为容器。

项目(item)：容器下的直接子元素被称作为项目。

主轴(main axis)：默认主轴是在水平方向，从容器左上角水平往右到达容器边缘。主轴可以通过容器属性flex-direction来设置不同的走向。一旦设置好了主轴，与其垂直的轴则为交叉轴。

交叉轴(cross axis)：默认交叉轴是竖直方向，从容器左上角垂直往下到达容器边缘。

main start：主轴起始位置。

main end：主轴终止位置。

cross start：交叉轴起始位置。

cross end：交叉轴终止位置。

多轴线：当flex-wrap设置换行后，在主轴上放不下会自动换行，这个时候就出现多条轴线。

二、容器属性

所谓容器属性，就是只能作用在容器上的css属性。如下：

2.1、flex-direction，row | row-reverse | column | column-reverse，用于设置容器的主轴方向，即项目的排列方向。

row：默认值，沿水平方向，从左到右。

row-reverse：沿水平方向，从右到左。

column：沿竖直方向，从上到下。

column-reverse：沿竖直方向，从下到上。

2.2、flex-wrap，nowrap | wrap | wrap-reverse。用于设置主轴上排列不下时处理方式。

nowrap：主轴排列不下时不换行。

wrap：主轴排列不下时换行。从左到右排列，排列不下时剩余内容从第二行开始排列。

wrap-reverse：主轴排列不下时换行。从左到右排列，排列不下时剩余内把前行内容往下挤，当前内容排到第一行。

2.3、flex-flow，flex-direction,flex-wrap的复合属性。不用分开写flex-direction，flex-wrap。例如：

style="flex-direction:column;flex-wrap:wrap;"等价于style="flex-flow:column wrap;"

2.4、justify-content，flex-start | flex-end | center | space-between | space-around。设置项目item在容器中的排列方式。

flex-start：默认值。和主轴左对齐。

flex-end：和主轴右对齐。

center：居中对齐。

space-between：两端对齐。

space-around：项目两侧等间距对齐。

2.5、align-items，flex-start | flex-end | center | baseline | stretch 。设置项目在交叉轴上的排列方式。

flex-start：与交叉轴起点对齐。

flex-end：与交叉轴终点对齐。

center：在交叉轴上居中对齐。

baseline：基线对齐。文字一条线上对齐。

stretch：没有指定高度的项目拉伸到和容器一样的长度，填充满整个容器。指定了高度的项目不做拉伸处理。

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：在交叉轴上居中对齐。

space-between：与交叉轴两端对齐，中间等间距。

space-around：主轴等间距对齐。

stretch：默认值，拉伸对齐，所有主轴填充慢整个容器。

三、项目属性

所谓项目属性，就是只能作用在项目上的css属性。如下：

3.1、order：定义单个项目排序位置。默认值为0。数字越写，排列越靠前。

3.2、flex-grow：，default 0。定义项目的放大比例。

3.3、flex-shrink：，default 1。定义项目的缩写比例。

3.4、flex-basis：|auto，default auto。定义项目占据的主轴空间。

3.5、flex：flex-grow、flex-shrink、flex-basis的复合属性。