前端布局是前端开发中最基础的技能之一。传统的布局方案主要通过盒模型、浮动、定位等方式来实现，但是这些布局方案并不灵活，而且难以应对不同的布局需求。随着移动设备的普及，响应式布局成为了更加重要的需求，而 CSS Flexbox 布局方案的出现，更是让前端布局得到了革命性的变革。
旧式布局
我们先来看看传统的布局方案。传统的布局方案主要有以下几种：
盒模型布局
盒模型布局是最简单的一种布局方式。网页中的各个元素按照盒子的形式进行排列。盒子包括外边距（margin）、边框（border）、内边距（padding）、内容区域（content）。盒模型布局的特点是布局简单，但是难以精确控制元素之间的间距和位置。
-- -------------------- ---- -------
---- ------------------
---- ------------------
---- ------------------
---- ------------------
------
-------
-----------
------- --- ----- -----
--------- -------
-
-----
------ ------
------- ------
------ -----
----------------- -----
-
--------浮动布局
浮动布局主要是通过控制元素的浮动，让元素在父元素内部浮动，实现排列布局。浮动布局的特点是简单易懂，但是存在高度塌陷、自适应等问题。
-- -------------------- ---- -------
---- ------------------
---- ------------------
---- ------------------
---- ------------------
------
-------
-----------
------- --- ----- -----
--------- -------
-
-----
------ ------
------- ------
------ -----
----------------- -----
-
--------定位布局
定位布局通过控制元素的定位，实现布局排列。定位布局的特点是可以实现精确的控制位置和大小，但是难以复杂布局。
-- -------------------- ---- -------
---- ------------------
---- ------------------
---- ------------------
---- ------------------
------
-------
-----------
------- --- ----- -----
--------- -------
--------- ---------
-
-----
------ ------
------- ------
--------- ---------
----------------- -----
-
------------------
----- --
---- --
-
------------------
----- ------
---- --
-
------------------
----- ------
---- --
-
--------CSS Flexbox 布局
CSS Flexbox 是一种全新的布局方案，它可以轻松实现复杂的布局需求，更加灵活和响应式。CSS Flexbox 布局的特点是可以快速实现不同方向的排列方式，可以轻松的控制元素之间的间距和大小，而且不需要繁琐的设置和计算。
容器和项目
CSS Flexbox 布局使用的基本概念是容器和项目。容器指的是包含项目的元素，项目则是容器内的每一个子元素。
-- -------------------- ---- -------
---- ------------------
---- ------------------
---- ------------------
---- ------------------
------
-------
-----------
-------- -----
------- --- ----- -----
-
-----
------ ------
------- ------
----------------- -----
-
--------主轴和交叉轴
CSS Flexbox 布局中的主轴和交叉轴分别指的是容器的排列方向和交叉方向。默认情况下，主轴的方向是从左到右，交叉轴的方向是从上到下。可以通过 flex-direction 属性来设置主轴的方向。
-- -------------------- ---- -------
---- ---------------- --------
---- ------------------
---- ------------------
---- ------------------
------
-------
-----------
-------- -----
------- --- ----- -----
-
-----
------ ------
------- ------
----------------- -----
-
--------
--------------- -------
-
--------项目属性
CSS Flexbox 布局中的项目属性可以轻松实现元素的对齐和布局。常用的属性包括 flex-grow、flex-shrink、flex-basis、flex、justify-content、align-items、align-self 等。
-- -------------------- ---- -------
---- ------------------
---- ---------- -------------
---- ---------- -------------
---- ---------- -------------
------
-------
-----------
-------- -----
------- --- ----- -----
---------------- --------------
------------ -------
------- ------
-
-----
------ ------
------- ------
----------------- -----
-
-------
----- --
------------- -----
-
-------
----- --
-
-------
----- --
------------ -----
-
--------总结
CSS Flexbox 布局是一种非常强大和灵活的布局方案，可以轻松实现不同方向的排列方式，而且还可以控制元素之间的间距和大小。相比之下，传统的布局方案则存在很多限制和问题，不够灵活和响应式。深入学习和掌握 CSS Flexbox 布局方案，对于前端开发者来说，是非常必要和重要的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a8feeb48841e98945521fe