Flexbox是一种一维布局模型，常用于创建响应式设计。它通过flex-direction属性控制主轴方向，如row或column，而align-items属性则处理元素在交叉轴的对齐。此模型简化了元素的定位和空间分配，无需依赖浮动或定位技术。
Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。同时能够跟随网页的大小而进行调整。
基本概念
在 Flexbox 布局模块（问世）之前，可用的布局模式有以下四种：
块（Block），用于网页中的部分（节）
行内（Inline），用于文本
表，用于二维表数据
定位，用于元素的明确位置
Flexbox元素
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
在 Flexbox 模型中，有三个核心概念：
flex 项（注：也称 flex 子元素），需要布局的元素
flex 容器，其包含 flex 项（父元素）
排列方向（direction），这决定了 flex 项的布局方向
Flex 容器
采用了 flexbox 的区域就叫做 flex 容器。设置容器即将容器的 display 属性值改为 flex 或者 inline-flex。容器中的直系子元素就会变为 flex 元素。所有 CSS 属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：
元素排列为一行 (flex-direction 属性的初始值是 row)。
元素从主轴的起始线开始。
元素不会在主维度方向拉伸，但是可以缩小。
元素被拉伸来填充交叉轴大小。
flex-basis 属性为 auto。
flex-wrap 属性为 nowrap。
Flex的轴线
主轴
主轴就像是平面二维直角坐标系上的轴，默认以容器的左上角顶点为原点，以圆点为坐标建立x轴和y轴
最低0.47元/天 解锁文章
扫一扫
145
到【灌水乐园】发言
