上一篇介绍了flexbox的属性和例子。本文通过flex布局的几个案例来体验flex布局的特点带来的便利和问题~Formattingcontext当我们为父容器属性设置flex时，flex容器会在容器内创建一个新的flexformattingcontext。在这种情况下，float和clear将不起作用，vertical-align将不再对flex元素起作用。在实际开发中，我们在使用行内元素（inline、inline-block）时，有时会看到元素之间出现奇怪的空隙，而且字体越大，空隙越大。原来这个间隙是我们写源码的时候标签换行造成的，没有换行就不会出现这种情况。大多数情况下，我们在写代码的时候，习惯于用编辑器来格式化代码。格式化后，这些标签会换行并造成间隙。这在需要像素级恢复的项目中可能有点尴尬。以前常见的做法是在父元素中设置font-size:0来消除空隙，然后再设置子元素的字体大小。这样做有点痛苦，所以在flex的上下文中，默认情况下会清除这些间隙。[codepen]本例Demo的圣杯布局通常我们在整体布局设计上更多的是使用flex布局，比如：大屏布局：小屏布局：[codepen]本例Demo：flex圣杯布局早期的在互联网上，由于用户网络的限制，经常会出现显示了html内容但页面样式还没有加载的情况，这会导致用户无法先看到自己想看到的内容。因此，MatthewLevine在2006年提出了圣杯布局的概念，将用户希望看到的内容移到HTML源代码中的次要内容的前面。上面的示例demo是使用flex布局实现的HolyGrail布局。虽然Main在HTML源码中位于另外两条内容之上，但是可以通过order属性调整元素的顺序。此外，您还可以使用媒体查询（@media）来制作响应式页面。当屏幕宽度小于640px时，只需要修改几个flex属性就可以改变布局的排列方式，非常灵活。如果你用过react/vue主流UI库，你会发现它们使用的布局容器也是用flex布局实现的，比如ElementUI、AntDesign等。Grid布局Grid布局也可以通过flex来实现：下面的demo中，HTML源码中的所有元素都处于同一层级，通过调整flex属性实现跨行或跨列的效果。也可以通过flex实现网格布局：在下面的demo中，HTML源码中的所有元素都处于同一层级，通过调整flex属性实现跨行或跨列的效果。[codepen]flexgridlayoutjustify-content最后一列不整齐CSSflexlayoutlist最后一行左对齐的N种方法--ByZhangXinxu大多数情况下justify-content用于要求子元素散开，但是最后一列元素不够的时候散开会很奇怪，所以我们可以这样做：[codepen]flex解决justify-content尾部不整齐的问题动画在MDNAnimatable上列出CSS属性，可以使用Animations或Transitions进行动画处理的属性包括flex属性。所以版面设计也可以结合动画：由于平台不支持codepen的插入，并且不允许上传超过10M的图片（虽然有记录gif），动画效果只能在demo~最后通过了上面的几种情况吧？是不是对flex布局的灵活性有了更深的感受？上面的大多数演示都借鉴了现有的想法。大家有什么好的想法可以自己尝试或者分享给大家~参考：MDN|还有别的办法吗？张新旭|使CSSflex布局列表最后一行左对齐的N种方法Pixiv背景图例：ちょけ|アリスミクと白うさぎAzit|初音ぽむ|雨墨|8.31秋野|つもりつもるきマチ。原文来自：FlexboxLayoutPracticalUseCases|anran758的博客目前信鸽群云集了前端、java、Python等不同语言的博主，而且大部分都有写博客的习惯。欢迎对web领域感兴趣的，或者正在写博客的同学一起讨论~
