Flexbox 概述
Flexbox 布局是 CSS3 新增加的一种盒模型。它可以使得布局更加灵活，简便以及适应各种屏幕大小和设备。借助 Flexbox 布局，可以容易地对网站的布局进行细微地调整。它所提供的灵活布局的概念让开发人员可以更加专注于页面上的内容本身，减少了页面设计以及开发的难度。
基本概念
容器（container）: Flexbox 的每一个父级元素都可以被视为容器，容器的属性在布局元素的方向、对齐和大小方面具有很大的影响。每一个容器都会包含众多的项目（item）。
项目（items）: Flexbox 中的元素都被认为是一个项目，这些项目都存在于容器之内，每个项目的布局在容器的方向、大小和对齐方面被控制。最终它们形成了“弹性盒模型”。这些项目都有一个默认的大小、空间和方向。
主轴（main axis）: Flexbox 布局中的主轴是沿着容器的方向延伸的。当主轴的方向是从左到右时，主轴是水平的。当主轴的方向是从上到下时，主轴就是垂直的。
交叉轴（cross axis）: 与主轴水平或垂直的一条轴线就是交叉轴。当主轴方向是从左到右或者是从右往左时，交叉轴是垂直的。 当主轴方向是从上到下或者是从下往上时，交叉轴是水平的。
主轴起点（main start）：主轴方向的起始点。
主轴终点（main end）：主轴方向的结束点。
交叉轴的起点与终点：根据浏览器的布局情况而定。
Flexbox 属性
display: 设定是否启用 Flexbox 布局, 可设置为flex或者inline-flex;flex-direction: 设定主轴的方向, 可选项为row（默认值）、row-reverse、column和column-reverse;flex-wrap: 设定 flex 元素是否换行，默认值是 nowrap;flex-flow: 指定 flex-flow 属性相当于同时设置了flex-direction和flex-wrap属性。justify-content: 设定主轴的对齐方式，可设为flex-start,center,flex-end,space-between,space-around和space-evenly;align-items: 设定交叉轴的对齐方式，可设为flex-start,center,flex-end,baseline和stretch;align-content: 设定多行项目在交叉轴上的对齐方式，可设为flex-start,center,flex-end,space-between,space-around和stretch;flex-grow: 设定项目的放大比例，默认值为 0，即如果存在剩余空间也不放大。flex-shrink: 设定项目的收缩比例，默认值为 1，即如果空间不足，该项目将缩小它的大小。flex-basis: 设定的那个弹性项目长度，它可以设置为一个固定的像素值、百分比或一个相对空间。flex: 这是一个复合属性, 同时设置了 flex-grow, flex-shrink 及 flex-basis，且必须按此顺序提供各个值。
代码示例
-- -------------------- ---- ------- ---- ------------------ ---- ----------- --------------- ---- ----------- --------------- ---- ----------- --------------- ---- ----------- --------------- ---- ----------- --------------- ---- ----------- --------------- ---- ----------- --------------- ------展开代码
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- ------- ------------ ------- -------------- ------- - ----- - ------- --- ----- ------ ------ ------ ------- ------ ------- ---- - ------- - ----- -- - ------- - ----- -- - ------- - ----- -- - ------- - ----- -- - ------- - ----- -- - ------- - ----- -- - ------- - ----- -- -展开代码
指导意义
Flexbox 布局以其灵活性，适应性和强大的特性，使开发人员可以创建出更加友好和响应式的页面设计。通过对该布局的深入研究，开发人员可以更好的进行网站的布局设计。目前，Flexbox 布局也正在大量被广泛应用于现代网站设计，同时减少了与响应式设计相关的难度，将用户体验提升到了一个新的水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b98536306f20b3a67f30ca
