Flex品牌究竟代表着什么？

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、解决元素居中问题

好处里面垂直居中一个块内容。