大家好，今天给各位分享深入浅出：全面解析Flex布局的语法要领的一些知识，其中也会对进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
image.png布局传统的解决方案是基于盒模型，依赖于display属性+position属性+float属性。对于那些特殊的布局来说非常不方便。例如，垂直居中并不容易实现。
image.png 2009年，W3C提出了一种新的解决方案——Flex布局，可以简单、完整、响应式地实现各种页面布局。目前，所有浏览器都支持它，这意味着现在可以安全地使用此功能。
bg2015071003.jpgFlex布局将成为未来布局的首选解决方案。 Flex布局将成为未来布局的首选解决方案。本文介绍其语法，下一篇给出常见布局的Flex编写方法。
一、Flex 布局是什么？
Flex是Flexible Box的缩写，意思是“灵活布局”，用于为盒状模型提供最大的灵活性。
任何容器都可以指定为Flex 布局。盒子{
显示：柔性；
}内联元素也可以使用Flex 进行布局。盒子{
display: 内联柔性；
}具有Webkit核心的浏览器必须添加-webkit前缀。盒子{
显示：-webkit-flex； /* Safari */
显示：柔性；
}注意，设置为Flex布局后，子元素的float、clear、vertical-align属性将失效。
二、基本概念
使用Flex 布局的元素称为Flex 容器（flex 容器），简称“容器”。它的所有子元素都会自动成为容器成员，称为Flex items（弹性项目），简称“items”。
image.png容器默认有两个轴：水平主轴（main axis）和垂直交叉轴（cross axis）。主轴的起始位置（与边界相交）称为主起点，结束位置称为主终点；交叉轴的起始位置称为交叉起点，结束位置称为交叉终点。
默认情况下，项目沿主轴排列。单个项目占用的主轴空间称为主尺寸，单个项目占用的横轴空间称为交叉尺寸。
三、容器的属性
在容器上设置以下6 个属性。
flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content
3.1 flex-direction属性
flex-direction 属性决定主轴的方向（即项目的排列方向）。盒子{
弯曲方向： 行|行反转|专栏|列反转；
}image.png 它可能有4 个值。
row（默认）：主轴是水平的，起点在左端。 row-reverse：主轴水平，起点在右端。柱：主轴垂直，起点位于上边缘。 column-reverse：主轴垂直，起点在下边缘。
3.2 flex-wrap属性
默认情况下，项目排列在一条线上（也称为“轴”）。 flex-wrap 属性定义了如果一个轴无法容纳的话如何换行。
图片.png.box{
flex-wrap: nowrap | Flex-wrap: nowrap |包裹|反转换行；
}它可能需要三个值。
（1）nowrap（默认）：不换行。
image.png (2)wrap：换行，第一行在顶部。
image.png (3)wrap-reverse：换行，第一行在下面。
image.png
3.3 flex-flow
flex-flow 属性是flex-direction 属性和flex-wrap 属性的缩写。默认值为row nowrap。盒子{
flex-flow:||;
}
3.4 justify-content属性
justify-content 属性定义项目在主轴上的对齐方式。盒子{
justify-content: 弹性启动| justify-content:弯曲端|中心|之间的空格|周围空间；
}image.png 可能取5个值，具体对齐方式与轴的方向有关。以下假设主轴是从左到右。
flex-start (默认): 左对齐flex-end: 右对齐center: 居中space- Between: 两端对齐，项目之间的间距相等。 space-around：每个项目两侧的间距相等。因此，项目之间的空间是项目与边框之间的空间的两倍。
3.5 align-items属性
align-items 属性定义项目如何在横轴上对齐。盒子{
对齐项目： 弹性启动| 对齐项目：弯曲端|中心|基线|拉紧；
}image.png 可能需要5 个值。具体的排列方式与交叉轴的方向有关。下面假设交叉轴是从上到下。
flex-start：对齐交叉轴的起点。 flex-end：对齐交叉轴的终点。 center：对齐交叉轴的中点。基线： 项目第一行文本的基线对齐方式。拉伸（默认值）：如果该项目没有设置高度或设置为auto，它将占据容器的整个高度。
3.6 align-content属性
align-content 属性定义多个轴的对齐方式。如果项目只有一个轴，则此属性无效。盒子{
对齐内容： 弹性启动|弯曲端|中心|之间的空格|周围空间|拉紧；
}image.png 该属性可能有6 个值。
flex-start：与交叉轴的起点对齐。 flex-end：与横轴的终点对齐。 center：与交叉轴的中点对齐。 space-after：与交叉轴两端对齐，轴之间的间隔均匀分布。 space-around：每个轴两侧等距。因此，轴之间的距离是轴与框架之间的距离的两倍。拉伸（默认）：轴占据整个交叉轴。
四、项目的属性
项目上设置了以下6 个属性。
orderflex-growflex-shrinkflex-basisflexalign-self
4.1 order属性
order 属性定义项目的排列顺序。值越小，排名越高。默认值为0。物品{
订单：
}image.png
4.2 flex-grow属性
flex-grow 属性定义项目的放大比例。默认为0，即有剩余空间则不放大。物品{
弹性增长： /* 默认0 */
}image.png 如果所有项目的flex-grow 属性都为1，它们将平均划分剩余空间（如果有）。如果一个item的flex-grow属性为2，而其他item都为1，则前者占用的剩余空间是其他item的两倍。
4.3 flex-shrink属性
flex-shrink 属性定义项目的收缩率。默认为1，即如果空间不足，则item会缩小。物品{
弹性收缩： /* 默认1 */
}image.png 如果所有item的flex-shrink属性为1，当空间不足时，它们都会按比例缩小。如果其中一项的flex-shrink 属性为0，其他项为1，则当空间不足时，前者不会收缩。
负值对该属性无效。
4.4 flex-basis属性
flex-basis 属性定义分配多余空间之前项目的主要大小。浏览器使用该属性来计算主轴上是否有多余的空间。它的默认值为auto，即项目的原始大小。物品{
弹性基础：|汽车； /* 默认自动*/
可以设置为与width或height属性相同的值（如350px），item将占据固定的空间。
4.5 flex属性
flex 属性是flex-grow、flex-shrink 和flex-basis 的缩写。默认值为0 1 自动。最后两个属性是可选的。物品{
flex: 无| ["弹性增长""弹性收缩"？ ||"弹性基础"]
}此属性有两个快捷值：auto(1 1 auto) 和none (0 0 auto)。
建议首先使用该属性，而不是分别编写三个单独的属性，因为浏览器会推断出相关值。
4.6 align-self属性
align-self 属性允许单个项目以不同于其他项目的方式对齐，从而覆盖align-items 属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，则相当于拉伸。物品{
对齐-self: 自动|弹性启动|弯曲端|中心|基线|拉紧；
}image.png 该属性可能有6 个值。除auto外，其他与align-items属性完全相同。
【深入浅出：全面解析Flex布局的语法要领】相关文章：
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
终于来了！我一直想学 flex 布局，这篇教程正好能帮我入门。
有6位网友表示赞同！
看标题感觉内容很干货，期待学习 flex 的语法规则~
有16位网友表示赞同！
我听说 flex 布局很强大，可以轻松实现网页布局，现在就来好好看看吧。
有13位网友表示赞同！
之前尝试过 flex 布局，但总觉着不太理解，希望这篇教程能解释得更清楚。
有6位网友表示赞同！
想做一些精美的页面效果，觉得 flex 布局很有用，所以要去学习一下哦~
有14位网友表示赞同！
好耶！终于有了学习 flex 语法的地方，之前网上找的资料太复杂了。
有16位网友表示赞同！
这个教程能解决哪些常见的问题呢？比如如何实现水平排列啊垂直排列啊什么的。
有16位网友表示赞同！
看了很多视频教程，还是觉得文字讲解更直观易懂，希望这篇教程能有详细示例讲解哦。
有19位网友表示赞同！
学习 flex 布局可以让我前端开发的技能变强，这真棒！
有10位网友表示赞同！
准备做一个网店，想用 flex 布局来优化页面布局，这份教程来得太及时了！
有5位网友表示赞同！
期待这篇教程能帮我更深入地理解 flex 的一些高级用法。
有8位网友表示赞同！
学习新的网页布局技术总是令人兴奋，Flex 布局听起来很酷!
有19位网友表示赞同！
希望能学习到一些使用 flex 布局解决常见网页布局问题的技巧。
有14位网友表示赞同！
准备把 flex 布局的语法记录下来做个笔记，方便以后复习理解。
有16位网友表示赞同！
希望这篇教程能提供不同浏览器下 flex 布局的表现对比，避免出现兼容性问题。
有17位网友表示赞同！
了解 flex 布局可以让我在项目开发中更灵活地设计页面。
有14位网友表示赞同！
学习新的知识总是充满挑战和乐趣，期待这场 flex 布局之旅！
有7位网友表示赞同！
这篇教程是不是讲解了 flex 的属性值以及如何设置呢？
有14位网友表示赞同！
用 flex 布局设计页面应该会更加简洁高效吧？期待学习~
有15位网友表示赞同！