当前位置：首页 > news >正文

【css】 flex布局基本知识

news 来源：原创 2025/5/23 14:31:19

Flexible Box 模型，是一种一维的布局模型。一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。

轴线

flex 属性与主轴和交叉轴有关，通过flex-direction定义

主轴由 flex-direction 定义，可以取 4 个值：

row
row-reverse：交换起始线和终止线位置
column
column-reverse

flex容器

将一个容器设置display:flex后，其直系子元素会变成flex元素，有以下初始行为：

flex-direction:row, 子元素排列成一行
子元素从容器的主轴起始线开始排列
元素不会沿主轴拉伸，但会缩小
元素会沿交叉轴拉伸，填满交叉轴;
flex-basis:auto
flex-wrap:nowrap，不换行

如果元素太多，会沿主轴溢出而不是换行；一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小

flex-flow，：flex-firection + flex-flow

flex-direction 和 flex-wrap 组合简写属性
flex-flow第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap.

如下图，容器设置主轴方向为row，wrap（换行）
在这里插入图片描述

flex-firection:主轴方向

主轴的方向也是子元素排列的方向；与主轴垂直的方向是元素拉伸填满的方向
reverse交换起始线和终止线位置，也就是元素从哪里开始排列

row：从左到右
row-reverse：从右到左
column：从上到下
column-reverse：从下到上

flex-wrap：换行/列

对于固定宽/高的子元素，如果设置flex-wrap:nowrap，元素过多会缩小元素以适应容器

flex：

flex可包含以下属性：

flex-grow:
flex-shrink
flex-basis

可以按照顺序设置三个属性值：

.one {flex: 1 1 auto;
}

也可以使用预定义值：

flex: initial：重置为初始值，即0 1 auto，只能收缩不能拉伸
flex: auto：1 1 auto ，可以收缩拉伸
flex: none：0 0 auto 不可伸缩
flex: <positive-number>：即指设置grow，其他两个默认的1和0

flex-grow

规定容器中分配剩余空间的相对比例；
默认为0，
如果所有的兄弟项目都有相同的 flex-grow 系数，那么所有的项目将剩余空间按相同比例分配，否则将根据不同的 flex-grow 定义的比例进行分配。

[取值]

[<'width'>]
width 值可以是 [<length>]，也可以是一个相对于其父弹性盒容器主轴尺寸的[百分数]。负值是不被允许的。默认为 auto。
[content]
基于 flex 的元素的内容自动调整大小。

在这里插入图片描述

flex-shrink

默认为1
与flex-grow相反，flex-shrink处理当容器没有足够空间时缩小子元素
和grow一样，按照值的比例来控制收缩程度

flex-basis

指定了 flex 元素在主轴方向上的初始大小，默认为auto
当元素设置了宽度时，flex-basis的值就等于width
在这里插入图片描述

align-items

控制元素在交叉轴方向对齐
初始值为stretch，即默认拉伸元素到最高元素高度，在交叉轴方向填满父容器

/* 基本关键字 */
align-items: stretch;/* 定位对齐 */
/* align-items 不能设置为 left 和 right */
align-items: center;  //在交叉轴上居中对齐
align-items: start; //与主轴起点或交叉轴起点对齐
align-items: end; //。。。末端对齐
//flex-xx 只能在flex布局中使用；
align-items: flex-start;
align-items: flex-end;/* 基线对齐 */
//所有 flex 元素都对齐，以使它们的 [flex 容器基线]对齐
align-items: baseline;/* 全局值 */
align-items: inherit;
align-items: initial;
align-items: revert;
align-items: revert-layer;
align-items: unset;