标签：flex 元素 容器 布局 弹性 display 属性

　　可以通过弹性盒指明空间的分布方式、内容的对齐方式和元素的视觉顺序，使内容不再受源码顺序的限制。但弹性盒布局只是视觉上的调整，并不会改变屏幕阅读器对内容的读取顺序。它的最大特点就是，能让元素适应不同的屏幕尺寸和不同的显示设备，让内容随可用空间的大小进行尺寸的增减，尤其适用于响应式网站。

　　在元素上声明display：flex或display：inline-flex便可以激活弹性盒布局，这个元素便成为弹性容器，其子元素成为弹性元素。

• display:flex与display:inline-flex的区别：

　　　　display:flex生成的是块级框，若没有设置宽高则默认占满一行；

　　　　display:inline-flex生成的是行内块级框，其宽高会根据里面的弹性元素进行调整；

　　　　如下图所示：

1.设置弹性容器的属性

（1）调整方向

flex-direction属性：（ row[默认]|row-reverse|column|column-reverse）设置弹性容器主轴的方向；

flex-wrap属性：（nowrap[默认]|wrap|wrap-reverse）当弹性容器主轴放不下时，决定元素是否换行以及换行的方向，实际上影响垂轴方向；

上述两个属性可以合并为

flex-flow属性：（row nowrap[初始值]）

（2）调整内容

justify-content属性：设置弹性容器内所有元素在主轴上如何分布；

align-item属性：设置弹性容器内所有元素在垂轴上的对齐方式；

align-self属性：设置单个元素在垂轴上的对齐方式；

align-content属性：当弹性容器允许换行导致有多个弹性元素行时，该属性设置各个弹性元素行的对齐方式；若不允许换行，则用来指明元素从哪个方向溢出；

标签：flex,元素,容器,布局,弹性,display,属性
来源： https://www.cnblogs.com/evil-shark/p/16064611.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。