【归纳】flex布局

Posted 2023-03-09

参考技术A 说到flex布局，在我之前的影响中，只知道这是一种较传统布局较方便的布局，这种布局对我来说是全新的。在flex布局出现之前，我们使用的传统布局主要有以下几种：

这些传统的布局方式虽然可以满足我们的很多需求，但是也并不方便，比如实现垂直居中。而现在我们就要开始接触flex布局这种新的布局方式了。flex也可称为“弹性布局”，flex布局有以下几个特点：

接下来就将对flex布局的几个重要知识点进行归纳。

采用flex布局的元素，称为flex容器（flex container）。它的所有子元素自动成为容器成员，称为flex项目（flex item）。

如上图所示，该flex容器在纵横有两根轴，其中横向的称为主轴（main axis），纵向的称为侧轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。子元素默认是沿主轴排列的。子元素在主轴方向的宽度叫做main size，在侧轴方向的高度叫做cross size。

flex container（flex容器）有如下六个属性：

该属性主要有以下值：

该属性主要有以下值：

默认值为row nowrap，可以以如下方法设定该属性：

该属性主要有以下值：

该属性主要有以下值：

该属性主要有以下值：

flex item（子元素）有如下六个属性：

该属性默认值为0。
如果所有子元素的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个子元素的flex-grow属性为2，其他子元素都为1，则前者占据的剩余空间将比其他项多一倍。

该属性默认值为1。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子元素的本来宽度。

默认值为0 1 auto。可以以如下方式设定该属性：

数值越小，排列越靠前，默认为0。

即不使用父元素决定的对齐方式，自身设定一个对齐方式。可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

flex 布局可以简便、完整、响应式地实现各种页面布局。下面就简要地记录几个flex布局的技巧

如果内容被修剪，需要浏览器显示滚动条，以便查看剩余内容，可以使用 over-flow:auto;
实现手机上中下布局：

以上就是我此次关于flex学习的一些记录。可以看出，这次学习是围绕着阮一峰的一篇关于flex的博客展开的，他的博客对我此次学习flex布局以及此次的flex博客编写起到了一定的帮助。除此之外，我在这里推荐两个关于flex学习的小游戏，寓教于乐，十分有趣。

博客原地址： http://franko.top/1809/20180925A/