FLEX是指Flexible Box Layout，即弹性盒布局，Flex布局为盒状模型提供最大的灵活性，是现代Web开发中常用的页面布局方式之一，以下是它的详细介绍：
核心概念
1、容器与项目
容器：应用了Flex布局的元素被统称为Flex容器。
项目：容器中的子元素则被称作Flex项目。
2、 主轴与交叉轴
主轴：Flex布局默认有两条轴，水平的主轴和垂直的交叉轴，弹性项目 (items)是沿着这个轴线布置的。
交叉轴：它不一定是水平的；它取决于 flex-direction 属性。
常见术语
1、容器和项目 ( container / item)
容器：最外边的容器我们称为container。
项目：container里面的每个小盒子，我们称为items。
2、主轴与交叉轴 ( main-axis / cross-axis)
主轴：flex布局默认有两条轴，水平的主轴和垂直的交叉轴。
交叉轴：它不一定是水平的；它取决于 flex-direction 属性。
3、起始线 (main/cross-start)与结束线（main/cross-end)
起始线：二根线中的一条，对应于主轴和交叉轴的开始位置。
结束线：二根线中的一条，对应于主轴和交叉轴的结束位置。
基本属性
1、display
用法：任何一个容器都可以指定为Flex布局。
作用：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
2、flex
用法：flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
作用：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。
特点
1、自动弹性伸缩
优点：合适适配不同大小的屏幕，和移动端。
2、解决元素居中问题
好处里面垂直居中一个块内容。
相关问题与解答
1、问：Flex布局可以用于哪些场景？
答：Flex布局可以用于多种布局场景，包括使容器的所有子项占用等量的可用宽度/高度，使多列布局中的所有列采用相同的高度，以及在父内容里面垂直居中一个块内容等。
2、Flex布局是否支持跨浏览器？
答：Flex布局需要加-webkit前缀来兼容Webkit内核的浏览器。
图片来源于互联网，如侵权请联系管理员。发布者：观察员，转转请注明出处：https://www.kname.net/ask/161407.html
