前言
随着 Web 发展的日趋成熟和网站风格的多样化，原有的排版方式已经不能满足现代化网站的需求。尤其是在移动端的布局排版上，传统的盒状模型排版已经无法适应多变的屏幕尺寸，特别是长宽比例不定的设备。Flexbox 布局作为 CSS3 的一个模块，规定了一种更加灵活、高效的盒模型布局。
开始使用 Flexbox
要使用 Flexbox 布局，首先需要对其进行一定的了解。Flexbox 盒模型允许将一个容器分成行或列，使得容器内的子元素可以任意方向分布和排布。这种分布和排布的方式需要使用到 display: flex 属性。例如：
---------- - -------- ----- -
以上代码会将 .container 容器内的所有子元素转换成 flex 元素。
Flexbox 容器和子元素
Flexbox 布局中，有两个主要的概念，容器和子元素。容器用来包含所有的子元素，并定义了它们的布局方式，包括子元素的排列方向、排列顺序等。子元素则是放置在容器内的一个个独立的元素。
容器一般会有以下属性：
display：设置容器为 flex 容器；flex-direction：设置子元素的排列方向，包括水平 （row）和垂直 （column）两种方式；flex-wrap：当子元素内容超出容器时，是否换行；justify-content：设置子元素在容器内的水平对齐方式，包括起始、结束、居中、空间平分等几种方式；align-items：设置子元素在容器内的垂直对齐方式，包括起始、结束、居中等几种方式；align-content：当子元素内容超出容器时，容器内所有子元素的垂直对齐方式，包括起始、结束、居中、分散等几种方式。
子元素一般会有以下属性：
flex-grow：设置子元素放大的比例，用来填满父容器剩余的空间；flex-shrink：设置子元素缩小的比例，在容器宽度缩小时细节的处理；flex-basis：设置子元素的初始宽度或高度，此值与flex-grow和flex-shrink配合使用；flex：此属性可综合flex-grow、flex-shrink和flex-basis三个属性取代。
Flexbox 属性详解
下面我们依次对上述各属性进行详细介绍。
display: flex
使用 display: flex 可以将一个容器转换成 flex 容器。
例如：
---------- - -------- ----- -
上述代码就将 .container 容器内的所有子元素转化为 flex 元素了。
flex-direction
flex-direction 属性用于指定子元素的排列方向，主要包括以下四个值：
row：子元素沿着父容器的水平方向排列（默认值）；row-reverse：与row相同，但子元素的顺序为反向排列；column：子元素沿着父容器的垂直方向排列；column-reverse：与column相同，但子元素的顺序为反向排列。
例如：
---------- - --------------- ------- -
上述代码会将容器内的子元素沿垂直方向排列。
flex-wrap
flex-wrap 属性用于指定当子元素超出容器宽度时是否换行，主要包括以下三个值：
nowrap：不换行（默认值）；wrap：换行；wrap-reverse：换行，但子元素的顺序为反向排列。
例如：
---------- - ---------- ----- -
上述代码会将容器内的子元素放到下一行。
justify-content
justify-content 属性用于指定子元素在父容器中的水平对齐方式，主要包括以下五个值：
flex-start：向左对齐（默认值）；flex-end：向右对齐；center：居中对齐；space-between：两端对齐，子元素间间隔平均分配；space-around：子元素间间隔平均分配，元素与父容器的左右间隔也平均分配。
例如：
---------- - ---------------- -------------- -
上述代码会将容器内的子元素分散排列。
align-items
align-items 属性用于指定子元素在父容器中的垂直对齐方式，主要包括以下五个值：
flex-start：开始对齐（默认值），子元素的顶部向上对齐；flex-end：结束对齐，子元素的底部向下对齐；center：居中对齐；baseline：子元素的基线对齐；stretch：子元素占满父容器的高度。
例如：
---------- - ------------ ------- -
上述代码会将容器内的子元素纵向居中排列。
align-content
align-content 属性用于指定当子元素内容超出容器时的垂直对齐方式，主要包括以下五个值：
flex-start：开始对齐，子元素的顶部向上对齐；flex-end：结束对齐，子元素的底部向下对齐；center：居中对齐；space-between：两端对齐，子元素间间隔平均分配；space-around：子元素间间隔平均分配，元素与父容器的顶部和底部间隔也平均分配。
例如：
---------- - -------------- -------------- -
上述代码会将容器内的子元素分散排列，并占满整个容器。
Flexbox 示例
下面我们来看一个简单的 Flexbox 示例：
---------- - -------- ----- --------------- ---- ---------------- ------- ------------ ------- - ----- - ---------- -- ------- ----- ----------------- ----- -
上述代码会将包含 .item 子元素的 .container 容器设置为 flex 布局，并让子元素左右居中。同时，所有的 .item 元素都会等分剩余的空间。这意味着，无论容器多宽，所有的子元素都会均分容器的宽度，每个子元素之间的间距为 10px，并且背景颜色为 #ccc。
结论
本篇文章详细介绍了 Flexbox 布局的相关属性和用法，希望对读者有所帮助。在实际项目开发中，合理地应用 Flexbox 布局可以大大减少代码量和复杂度，同时提高页面效果和用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672a0abeddd3a70eb6cf06ff