flex: 1到底是啥

Posted 2023-05-03

参考技术A 先说结论
flex：1即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。

flex属性是flex-grow, flex-shrink, flex-basis三个属性的缩写
推荐使用此简写属性，而不是单独写这三个属性。

flex-grow：定义项目的的放大比例；

flex-shrink：定义项目的缩小比例；

flex-basis： 定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间，

所以flex属性的默认值为：0 1 auto （不放大会缩小）

flex为一个非负数字n：该数字为flex-grow的值,

flex为两个非负数字n1，n2： 分别为flex-grow和flex-shrink的值，

flex为一个长度或百分比L：视为flex-basis的值，

flex为一个非负数字n和一个长度或百分比L：分别为flex-grow和flex-basis的值，

【归纳】flex布局

参考技术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/