摘要：具体的属性说明，请查看网上各大教程。推荐飘零雾雨整理的参考手册。本文是对于我在使用过程中的碰到的一些问题的记录，留下来的印象。它的表现为所有子元素的宽度都是它自身内容即的宽度不使用来改变盒模型，且不换行。具体的解释见上的回答。
具体的属性说明，请查看网上各大教程。推荐飘零雾雨整理的CSS参考手册。
本文是对于我在使用flexbox过程中的碰到的一些问题的记录，留下来的印象。
如下默认的代码结构，当flex-wrapper这个容器设置为display: flex之后，其子元素flex-item即使未显式的声明flex属性，都会默认为flex元素，使用默认值，值为：0 1 auto（该值在 Chrome 55.0.2883.87 m 通过window.getComputedStyle($0, null)["flex"];取得）。
它的表现为所有子元素的宽度都是它自身内容即content-box的宽度(不使用box-sizing来改变盒模型)，且不换行。
https://jsfiddle.net/lyplba/f...
换行先上一个我们以往简单的多列布局（注意：只作为实现，不附加其他条件），会自动换行（其实是被撑下去了），而使用flex布局的形式，你会发现，怎么不会自动换行了？即使你把宽度设为100%也于事无补，flex它会自动均分父容器的宽度，结果就如下示例一样：
float和flex设置的width是一致的，都为25%
https://jsfiddle.net/lyplba/a...
那么，怎么去换行？这时候就是使用flex-wrap的时候了，不单只这个，还涉及到width和flex-basis。这个的话请参考Stackoverflow上的问答。
flex-basis会设置flex元素（不是包裹flex元素的容器，而是该容器内的flex子元素）的宽或者高（取决于flex-direction是row还是column），因此会导致宽度变高度，高度变宽度，确切的情况下才用，不然我个人一般才用width来设置。
通过设置flex-wrap的值为wrap，就可以实现和float一样的效果了，如下：
https://jsfiddle.net/lyplba/o...
文本省略截取当被截取的内容被flex所包含的时候，会发现文本截取无法正常生效。
具体的解释见Stackoverflow上的回答。
更深入的了解为什么即使一个flex元素和一个固定宽度的非flex元素并行的时候，flex元素内容一多就会撑开固定宽度的元素，直至占满，这里有更深入的解释说明为何会这样：Flexbox Implied Minimum Size
结构如下：
这块使用flex布局的结构，会使内部的子元素无法被正常截取
示例结果：
https://jsfiddle.net/lyplba/r...
这个需求特别是在弄用户卡片的时候特别需要这样的设置（是我这边哈~），看如下截图：
可以看到关注按钮在右侧，flex布局的好处之一就是可以非常方便的处理居中问题，假设现在我们把手机号下的日期去掉，按照常规的做法没法居中且还要特别设置或者用其他方法来居中(display: table)之类的。
具体的解决方法还是点这里看 StackOverflow 上的(果然是面向 Google 编程~)
概括flex的优势在于布局方式，任意的上中下、左中右对齐方式、位置调整、自适应那是相当的赞，可以尽可能的减少使用float、position这种不布局方式，使他们回归本质，就像以前的table，关于flex布局个人还是要需要花时间去实战了解。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115477.html
摘要：背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多，投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗，待遇工 背景 个人背景 就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习 前端方向，自学，vue技术栈 时间背景 大概是在11月9日准备...
摘要：背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多，投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗，待遇工 背景 个人背景 就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习 前端方向，自学，vue技术栈 时间背景 大概是在11月9日准备...
摘要：作者陈大鱼头正常流什么是正常流其实就是我们日常所说的文档流。在官方文档里对应的是。然后，包含形成一条线的框的矩形区域称为线盒。基线线盒的高度由的计算结果决定。级层叠上下文被自动视为父级层叠上下文的一个独立单元。自由分配，由具体情况决定。 作者：陈大鱼头 github： KRISACHAN 正常流 什么是正常流？其实就是我们日常所说的文档流。在W3C官方文档里对应的是normal ...
摘要：作者陈大鱼头正常流什么是正常流其实就是我们日常所说的文档流。在官方文档里对应的是。然后，包含形成一条线的框的矩形区域称为线盒。基线线盒的高度由的计算结果决定。级层叠上下文被自动视为父级层叠上下文的一个独立单元。自由分配，由具体情况决定。 作者：陈大鱼头 github： KRISACHAN 正常流 什么是正常流？其实就是我们日常所说的文档流。在W3C官方文档里对应的是normal ...
摘要：另外回答的时候要淡定，一些问题就算不懂也不能慌，要和面试官谈笑风生，然后尽量扯回到自己懂的东西上面大公司比如百度给我的感觉就是很重视基础思维和潜力。 —— 虽然我的offer少，但是我的拒信多啊 这几天终于闲下来，做一点微小的工作，整理了一些之前几家公司的前端面试题和个人经验，想做前端的师弟妹可以参考，也欢迎各同行大神来指教~ （以下问题不分先后，时间久远难免有些遗漏；很多问题面试官都...
阅读 2772·2021-11-24 09:39
阅读 2527·2021-11-23 09:51
阅读 1699·2021-11-17 09:33
阅读 1673·2021-10-22 09:54
阅读 1840·2021-08-16 11:00
阅读 3393·2019-08-30 15:53
阅读 1717·2019-08-30 13:19
阅读 2866·2019-08-30 12:49
