就目前为止，CSS的Grid和Flexbox结合将是解决布局的最佳方案。虽然浏览器对CSS Grid和Flexbox的属性未完全支持，但对于实现布局而言，这已是一种非常完美的结合。如果CSS Box Alignment Module Level3能得到更好的支持的话，那么对于Web的布局将是一种福音。就前面学习的CSS Grid和CSS Flexbox，我们对CSS的Flexbox和Grid有了很深入的了解。特别是在《使用CSS Grid和Flexbox制作Card》一文中，已经见识到了CSS Grid和Flexbox结合对布局的巨大优势。那么这篇文章，将再一次向大家展现CSS Grid和Flexbox的强大之处。那是因为他们的结合将解决布局的实际问题。

@js_tut的新书《CSS Visual Dictionary》里面的插画非常有意思。他在Medium上把盒模型、Flexbox、Grid三个部分放了一些出来。我觉得他提供的插画非常形象的阐述了这几个部分的知识点。今天把 Flexbox部分的插图直接拿来使用了，通过这些插图再次向大家阐述CSS Flexbox相关的知识。

整个Web在不断的演进，那么为Web服务的理念与技术等等也在不断的进行演化。那么我们今天要聊的话题，Web布局中最为优秀的两种布局方式：Flexbox布局和CSS Grid布局。有关于这两方面的知识，其实在W3cplus上已经有很多相关的内容。由于这两种布局方式对Web布局带来了很多改变，而且两者都有其自身的优势。正因为如此，很多同学总是会类似的一个问题：应该使用Flexbox还是Grid来进行布局？那么我们从这篇文章开始，将会分几篇文章一起来介绍Flexbox布局和CSS Grid布局两者的差异性？我们又应该如何的选择，才能更适合我们项目的布局？希望接下来的内容对大家有所帮助。

到目前为止，Flexbox布局应该是目前最流行的布局方式之一了。而Flexbox布局的最大特性就是让Flex项目可伸缩，也就是让Flex项目的宽度和高度可以自动填充Flex容器剩余的空间或者缩小Flex项目适配Flex容器不足的宽度。而这一切都是依赖于Flexbox属性中的flex属性来完成。一个Flex容器会等比的按照各Flex项目的扩展比率分配Flex容器剩余空间，也会按照收缩比率来缩小各Flex项目，以免Flex项目溢出Flex容器。但其中Flex项目又是如何计算呢？他和扩展比率或收缩比率之间又存在什么关系呢？在这篇文章中我们将一起来探来。

CSS的flex-basis是Flexbox属性flex的简写属性之一。大部分同学在很多时候都认为flex（当然也包括flex-basis）属性非常的简单，但事实上并非如此，如果你阅读过《聊聊Flexbox布局中的flex的演算法》和《深入理解 flex 布局以及计算》会发现这flex并不容易。在W3C规范中flex-basis是一个基准值，它接受width和height相同的值。如果你熟悉的话，width和height是隶属于**CSS Intrinsic & Extrinsic Sizing Module Level 3**规范，而且该规范除了width、height属性之外还有min-width（或min-height）、max-width（或max-height）、min-content、max-content和fit-content等。那么问题就来了，在Flexbox布局中，flex-basis和CSS Intrinsic & Extrinsic Sizing Module Level 3提到的各属性有何差异呢？这就是今天将要和大家一起探讨的。如果你感兴趣，欢迎继续往下阅读。

CSS布局发展至今可以说变化非常的大，其中Flexbox布局已经取代了以前最为流行的浮动布局。这里所说的Flexbox布局指的就是 CSS Flexible Box Module Level 1（简称Flexbox，弹性布局）。Flexbox模块的出现让Web的布局变得极为简单。虽然Flexbox给Web布局带来了很多优势，而且让布局变得简单，但就Flexbox模块本身来说是非常复杂。在这一章节中，我将和大家一起来探讨CSS的Flexbox 模块相关的知识。

在《图解CSS：Flexbox布局(Part1)》中主要和大家聊了Flexbox布局模块中的技术术语以及运用于Flex容器上的相关属性。在第二部分，主要和大家介绍运用于Flex项目中的属性，比如align-self、order和flex。这一部分也是Flexbox布局中相当复杂的一部分，因为flex的flex-basis、flex-grow和flex-shrink属性的计算非常复杂，也直接影响到Flex项目的尺寸大小。如果你对这部分感兴趣的话，请继续往下阅读。

随着Web技术不断的革新，CSS近几年也变得多年前要更强大。在Web开发中，CSS是不可或缺的一部分，对于很多Web开发者来说，有很多CSS属性不知道，或者说他们知道，但忘记在最恰当的时候使用最适合的CSS属性。而且时至今日，其中有一些CSS的属性可以让开发者能节约更多的时间。比如说，在Web布局中，现代CSS特性就可以更好的帮助我们快速实现，例如等高布局，水平垂直居中，经典的圣杯布局、宽高比例、页脚保持在底部等。在本文中，我将会介绍一些不同的CSS属性来实现这些效果，希望大家会感兴趣。更希望对大家今后的工作有所帮助。

Flexbox布局 已是目前最为流行的Web布局方式之一，它给Web开发者在完成页面或组件的UI布局带来了极大的灵活性和便利性。但也是因为它有极大的灵活性，里面隐藏了一些不为人知的细节，如果不是对Flexbox极为熟悉或者对其规范极为了解的话，其中有很多细节将会被遗漏，而这些细节又会让你在使用的感到困惑，甚至是带来一定的麻烦。这次在优化imgcook的Flexbox布局时，重新阅读了一次Flexbox的规范，发现自己曾忽略了部分重要信息。为此在这篇文章中，将Flexbox布局，CSS的书写模式，逻辑属性，对齐方式结合在一起整理了一篇笔记，希望对于想了解或使用Flexbox碰到痛楚的同学有所帮助。

十年前的 CSS 媒体查询 特性给 Web设计和开发带来新的变革，十年后的今天，CSS的容器查询 给 Web 设计和开发又进一步的带来质的变革。虽然CSS容器查询特性很强大，但它还只是部分主流浏览器的实验属性。因此要用到生产中还有要能要走一段漫长的路。不过，庆幸的是，现代的一些 Web 技术（比如，Flexbox、Grid、媒体查询和比较函数等）让我们离容器查询特性更近一步。今天我们来看看，这些现代Web技术是如何让我们离容器查询更近一步。