flex布局_Flex布局

【摘要】Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。

【作者】星星

【重构建议-田甜-2020-09-29】 附件的有道文档，可能不小心取消分享，造成无法访问，建议做成PDF形成链接，已经完成.

Flex 是 Flexible Box 的缩写，意为"弹性布局"，

Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小他们以防止溢出容器。最重要的是，Flexbox布局方向不可预知，他不像常规的布局（块就是从上到下，内联就从左到右）。flex布局使盒状模型具有最大的灵活性

一、属性设置

主容器的属性

子容器属性

二、踩坑记录

1、父元素设置了display:flex,子元素两列排列，但是在子元素没有设置宽度的时候，子元素内部的元素会将子元素撑开，如图

这时候需要给子元素设置宽度

2、子元素设置的宽度无效

父元素设置了display:flex,第一个子元素设置了宽度，第二个子元素设置了flex:1,第二个元素内容太多时会压缩第一个元素，使得设置的宽度无效

这时候需要给第一个元素设置 flex-shrink: 0;

3、子元素换行后最后一个会不安装顺序排列

这时候需要给父元素添加一个伪元素，设置伪元素占用剩余空间

.flex-wrap::after{

content: "";

flex-grow: 99999;

}

附件：

Flex经典布局附件文档

flex经典布局原始文档

参考：

Flex 布局教程：语法篇

图解CSS3 Flexbox属性

理解Flexbox：你需要知道的一切

深入理解 flex 布局以及计算

欢迎关注 技术团队的知乎账号 我们凭团队实例运作以下专栏， 必须干货！

互联网创业专栏 (我们小伙伴的创业历程)

与您一起聊技术 (APP、微信公众号、小程序、H5 技术总结)

互联网产品研发管理 (我们公司对产品结构的管理思路)

产品君的案例库（产品小伙伴深刻总结）