CSS详解系列:01-Flex基本概念

fox/ 2023年12月29日/ CSS教程/ 浏览 873

Flexbox 布局也叫 Flex 布局,弹性盒子布局。


它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来,更简便、完整、响应式地实现各种页面布局。


它的主要思想是使父元素能够调整子元素的宽度、高度、排列方式,从而更好的适应可用的布局空间。


1. 基本概念

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


我们接下来,会逐一介绍flex的相关属性,及相关应用场景



您可以通过将元素的 display 属性设置为 flex(生成块级 flex 容器)或 inline-flex(生成类似 inline-block 的行内块级 flex 容器)。当一个元素设置了 Flex 布局以后,其子元素的 float、clear 和 vertical-align 等属性将失效。行内元素也可以使用 Flex 布局。Webkit 内核的浏览器,必须加上-webkit前缀。


设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。当布局涉及到不定宽度,分布对⻬的场景时,我们可以优先考虑弹性盒布局。

发表评论

暂无评论,抢个沙发...

客服 工单