摘要：对于原有布局很多都是基于和这样的布局，但是新一代问世后出现了现在风靡的布局方案，其布局理解大大的迎合了现在前端开发中的布局需求什么是布局是的简称，可以直观的理解成弹性布局，是对盒子模型的一种灵活表现。
对于css原有布局很多都是基于float和display:table这样的布局，但是新一代CSS3问世后出现了现在风靡的flex布局方案，其布局理解大大的迎合了现在前端开发中的布局需求！
什么是Flex布局？
Flex 是Flexible Box Model的简称，可以直观的理解成“弹性布局”，是对盒子模型的一种灵活表现。
可以动态修改子元素的宽度和高度！
参考W3Cschool教程解释！
兼容性支持
-------------------------------------------开始学习！-------------------------------------------------------------
弹性盒子的父元素称为 弹性容器 flex container
弹性盒子的子元素称为 弹性子元素 flex item
还有两个概念即主轴、侧轴 如下图：
（子元素沿着主轴依次排列，侧轴与主轴相互垂直）
弹性容器属性
fle-direction:row|row-reverse|column|column-reverse /*设置主轴方向确定弹性盒子子元素的排列方向*/
row（默认值）
row-reverse
column
column-reverse
flex-wrap:nowrap|wrap|wrap-reverse /*当子元素超出容器范围时是否换行*/
nowrap（默认值）
warp
wrap-reverse
flex-flow:[flex-direction]||[flex-wrap] /*设置弹性子元素排列方式*/ justify-content:flex-start|flex-end|center|space-between|space-around /*弹性盒子内子元素在主轴上的对齐方式*/
flex-start（紧贴开始侧）
flex-end（紧贴结束侧）
center（居中对齐）
space-beteen（两端对齐两次紧贴）
space-around（均匀分布两侧有距离，左侧距离是中间距离的0.5倍）
align-items:flex-star|flex-end|center|baseline|stretch /*设置弹性盒子子元素在侧轴的对齐方式，与justify-content属性类似 */
stretch（默认、高度自动延伸）
flex-star（从侧轴开始）
flex-end（从侧轴结束）
baseline（元素内容基线对齐）
center（居中对齐，侧轴中部）
align-content:flex-start|flex-end|center|space-between|space-around|stretch /*侧轴有空白且有多行时，设置弹性盒子元素在侧轴上的对齐方式*/
flex-start（元素多个且换行）
flex-end
center
space-between
space-around
stretch（高度铺满屏幕）
弹性盒子-子元素属性
order:子元素排列顺序，数值小的排在前面，可以为负值（子元素上设置）
flex-grow:设置子元素的扩展比例，不允许负值，默认为0（元素扩展）
flex-shrink:设置子元素的收缩比例，不允许负值，默认为1（宽度收缩） flex-basis:弹性子元素的收缩基准值，不允许负值
flex-none:none:复合属性设置弹性子元素的分配空间
align-self:auto|flex-start|flex-end|center|baseline|srtech
多带带设置弹性子元素在侧轴上的对齐方式，与align-items相同
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115892.html
摘要：通过阅读发现了不少知识的盲点和误解，对有了更深入的理解。总结几点印象较深的体会，分享给大家。但是通过阅读源码改变了这种认识模块化很简单灵活，这是其优点，同时也是一个缺点。 欢迎到个人博客参观: 点击这里 bootstrap已经使用了很长时间，但是从来没有好好研究过其设计结构，春节期间闲来无事就阅读了源码。通过阅读发现了不少知识的盲点和误解，对css有了更深入的理解。总结几点印象较深的体...
摘要：语法如下是简写属性，也可以分别定义行间隔和列间隔。语法如下属性值得含义同这里不再过多说明，读者可以自行验证。 前言 在上篇——JavaScript五十问——对比来说CSS的Grid与FlexBox（上篇），我介绍了Flex的属性与使用，今天我们来总结一下Grid的具体使用方法，最后会结合Flex与Grid布局讲一讲二者的联系与不同。 需要注意得是，Grid布局与我们之前所熟悉的css布...
摘要：这个接受三个参数表示栅格数目默认为默认为表示断点设置，这是一个全局变量，为类型。 你可能已经听说了一个大新闻：Bootstrap4 合并了代号为#21389的PR，宣布放弃支持IE9，并默认使用flexbox弹性盒模型。这标志着：1）前端开发全面步入现代浏览器的时代进一步来临；2）样式处理也再一次面向未来，拥抱更加灵活的弹性盒模型－Flex布局。 这篇文章会带你深入Bootstrap最...
摘要：这个接受三个参数表示栅格数目默认为默认为表示断点设置，这是一个全局变量，为类型。 你可能已经听说了一个大新闻：Bootstrap4 合并了代号为#21389的PR，宣布放弃支持IE9，并默认使用flexbox弹性盒模型。这标志着：1）前端开发全面步入现代浏览器的时代进一步来临；2）样式处理也再一次面向未来，拥抱更加灵活的弹性盒模型－Flex布局。 这篇文章会带你深入Bootstrap最...
阅读 2604·2021-11-15 11:38
阅读 2620·2021-11-04 16:13
阅读 17993·2021-09-22 15:07
阅读 1016·2019-08-30 15:55
阅读 3266·2019-08-30 14:15
阅读 1665·2019-08-29 13:59
阅读 3210·2019-08-28 18:28
阅读 1575·2019-08-23 18:29
