兼容性
caniuse中的兼容性报告：
Paste_Image.png
总体来说，Flex布局已经得到了所有浏览器（高版本）的支持.
兼容性写法小技巧
flexbox由于历史原因，出现了多个语法版本，我们可以通过使用autoprefixer来跟踪最新的浏览器版本，自动化生产前缀
a { display: flex;}
a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
基本概念
Paste_Image.png
弹性容器：
包含着弹性项目的父元素。通过设置display属性的值为flex 或 inline-flex来定义弹性容器。
弹性项目：
弹性容器的每个子元素都成为弹性项目。
轴：
每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴
主轴:
垂直于主轴的那根轴为侧轴。
和轴相关的属性
1 flex-direction 属性确立主轴
Paste_Image.png
2 justify-content 属性定义了在当前行上弹性项目沿主轴如何排布
Paste_Image.png
flex-start(默认值)：左对齐
flex-end: 右对齐
content: 居中
space-between: 两端对齐，项目之间的间隔都相等
space-around: 每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍
3 align-items 属性定义了在当前行上弹性项目沿侧轴如何排布
Paste_Image.png
flex-start: 交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
baseline:项目的第一行文字的基线对齐
stretch(默认值)：如果项目未设置高度或设suto,将占满整个容器的高度
4 align-self 属性定义了单个弹性项目在侧轴上应当如何对齐，这个定义覆盖由align-items所确立的默认值
Paste_Image.png
该属性可能取6个值，除了auto,其他都与align-items属性完全一致
方位
弹性容器的各个边，描述了弹性条目流的起点与终点。它们具体取决于弹性容器的主轴与测轴以及由writing-mode确立的方向（从左到右，从右到左等等）；
1 order属性将元素与序号组关联起来，并决定哪些元素先出现。数值越小，排列越靠前，默认为0
Paste_Image.png
2 flex-flow属性是flex-direction 和 flex-wrap属性的简写，决定弹性项目如何排布。默认值是row nowrap
行
根据flex-wrap属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。
Paste_Image.png
Paste_Image.png
尺寸
根据弹性容器的主轴和侧轴，弹性项目的宽和高相应称为主轴尺寸与测轴尺寸
min-height 与 min-width属性初始值为0
flex属性是flex-grow, flex-shrink 和 flex-basis属性的简写，确立弹性项目的伸缩性
该属性有两个快捷键：auto(1 1 auto)和 none(0 0 auto)
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关的值。
网友评论