CSS Flexible Box Module Level 1(简称flexbox，弹性盒，https://www.w3.org/TR/css-flexbox-1/)，它把以往艰巨的布局任务变得极为简单，例如很多类型的页面、小组件、应用和图库。有了弹性盒，通常不再需要使用CSS框架。
弹性盒是一种简单而强大的布局方式，我们通过弹性盒指明空间的分布方式、内容的对齐方式和元素的视觉顺序，把不同的组件放置在页面中。内容可以轻易横向或纵向排布，还可以沿一个轴布局，或者折断成多行。
弹性盒模型布局最突出的一个特点可能是，能让元素对不同的屏幕尺寸和不同的显示设备做好适应准备。弹性盒在响应式网站中表现极好，因为内容能根据可用空间的大小增减尺寸。
flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
- 当为父盒子设为flex布局后，子元素的float、clear和vertical-align属性将失效。
- 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
总结flex布局原理：
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
1. 常见父容器属性
以下6个属性是对父元素设置的
- flex-direction: 设置主轴的方向
- justify-content: 设置主轴上的子元素排列方式
- flex-wrap: 设置子元素是否换行
- align-content: 设置侧轴上的子元素的排列方式（多行）
- align-items：设置侧轴上的子元素排列方式（单行）
- flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
2. flex-direction设置主轴方向⭐
主轴与侧轴
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴
- 默认主轴方向是x轴方向，水平向右
- 默认侧轴方向是y轴方向，水平向下
属性值
flex-direction 属性决定主轴的方向（即项目的排列方向）
注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
注意：之后的案例没有特别说明的情况下，只以flex-direction：row为主轴
3. flex-wrap设置子元素是否换行⭐
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的
4.flex-flow
flex-flow 属性是flex-direction 和flex-wrap属性的复合属性
flex-flow: ||
5. justify-content 设置主轴上的子元素排列方式⭐
justify-content 属性定义了项目在主轴上的对齐方式
注意： 使用这个属性之前一定要确定好主轴是哪个
6. align-items 设置侧轴上的子元素排列方式(单行)⭐
该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用
7. align-content 设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的
8. align-content和align-items区别
- align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸
- align-content适应于换行(多行)的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
- 总结就是单行找align-items 多行找align-content
1. 常见子项目属性
以下几个属性是对子项目设置的
- flex-grow定义项目的放大比例
- flex-shrink定义项目的缩小比例
- flex-basis定义了在分配多余空间之前，项目占据的主轴空间（main size）
- flex属性是上面三个属性的复合属性，一般不单写上面三个，而是使用复合属性
- order实行定义子项的排列顺序(前后顺序)
- align-self控制子项自己在侧轴的排列方式
2. flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为n，其他项目都为1，则前者占据的剩余空间将比其他项多n倍。
3. flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
注意：在计算过程中均将margin值和边框忽略，添加这两个值是为了方便观察
同时，如果所有弹性元素都允许缩小，缩减的量根据缩减因子按比例分配。这意味着，在同辈弹性元素中，缩减因子越大的弹性元素缩减量越大。如下：
计算过程：
父容器宽750px，子项目宽均为300px，“缺失的空间”为300*3 - 750 =150px,我们可知缩减因子总和为1+2+3 = 6，因此每一份缩减因子将减少150/6 = 25px，所以第一个子项目减少1 * 25 = 25px, 第二个子项目减少 2 * 25 = 50px, 第三个子项目减少 3 * 25 = 75px
4. flex-basis属性
flex-basis属性定义了弹性元素的初始或默认尺寸，即根据增长因子和缩减因子分配多余或缺少的空间之前，弹性元素的大小。
- content
效果如下:
注意：content这个属性值不会忽略flex-shink这个属性,如果设置flex-shink且内容太长，盒子会被缩小，但内容不会，所以内容会超出盒子，不经常使用。
- auto
效果如下：
效果如下：
注意：
- 此属性值优先级高于本身的width和height属性，会忽略width值和height值。
- 此属性不能忽略min-width、min-height、max-width和max-height。因此假如一个元素上声明了flex-basis:100px和min-width:400px，尽管弹性基准比最小宽度小，但还是以最小宽度为准。
5. flex复合属性⭐
用于设置一个元素的, , 和 。这三个属性共同决定了元素如何在flex容器中增长、缩小和设置基础大小。
- initial
initial是css中的全局关键字，任何属性都能使用这个关键字表示属性的初始值，即规范定义的默认值。因此，下面两个声明等效。
案例如下：
- auto
flex:auto的效果和flex: initial类似，不过弹性元素的弹性变量是双向的；如果容器的空间放不下全部弹性元素，元素将缩小；如果有额外的空间，弹性元素将增大。主轴方向上的任何多余空间都将分给弹性元素。下面两个声明是等效的。
案例如下：
- none
声明了flex：none的弹性元素不具有弹性。弹性元素既不增大也不缩小。下面两个声明是等效的。
案例如下：
- 数字值
如果flex属性只有一个值，而且是正数，那个值将用作增长因子，而缩减因子默认为0，基准也默认为0。下面两个声明是等效的。
此时，目标弹性元素具有弹性，即可以增大。而缩减因子是什么值都没有意义，因为弹性基准为0，弹性元素只能从哪个基准开始增大。
案例如下：
注意：不建议通过flex-grow、flex-shink、flex-basis单个属性定义增长因子、缩减因子和基准，而是建议通过flex复合属性中统一定义，单个说明只是为了说明它的作用。
6. order属性
数值越小，排列越靠前，默认为0。
注意：和 z-index 不一样。
案例如下：
注意：这只是视觉上的调整，弹性盒相关的属性不会改变屏幕阅读器对内容的读取顺序，如下方遍历元素所示，元素的遍历顺序依旧为1-9，而不是4,1,2,3,6,7,8,9,5
7. align-self控制子项自己在侧轴上的排列方式
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
这篇博客我结合了CSS权威指南，相关视频和其他博主的理解，如果有错误的地方还请指出。此外标题中带有⭐的是比较重要的，掌握后基本上就可以运用强大的flex布局了。
到此这篇grid flex布局（flex布局和grid布局的主要属性）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/rfx/69402.html