认识flexbox布局

fasss 发布于2019-08-30 14:15 / 3130人阅读

摘要：对于原有布局很多都是基于和这样的布局，但是新一代问世后出现了现在风靡的布局方案，其布局理解大大的迎合了现在前端开发中的布局需求什么是布局是的简称，可以直观的理解成弹性布局，是对盒子模型的一种灵活表现。

对于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相同

超融合服务器私有云 flexbox FlexBox详解 flexbox容器认识

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115892.html

bootstrap4源码阅读体会

摘要：通过阅读发现了不少知识的盲点和误解，对有了更深入的理解。总结几点印象较深的体会，分享给大家。但是通过阅读源码改变了这种认识模块化很简单灵活，这是其优点，同时也是一个缺点。欢迎到个人博客参观: 点击这里 bootstrap已经使用了很长时间，但是从来没有好好研究过其设计结构，春节期间闲来无事就阅读了源码。通过阅读发现了不少知识的盲点和误解，对css有了更深入的理解。总结几点印象较深的体...

incredible 2019-08-30 12:45 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
JavaScript五十问——对比来说CSS的Grid与FlexBox（下篇）

摘要：语法如下是简写属性，也可以分别定义行间隔和列间隔。语法如下属性值得含义同这里不再过多说明，读者可以自行验证。前言在上篇——JavaScript五十问——对比来说CSS的Grid与FlexBox（上篇），我介绍了Flex的属性与使用，今天我们来总结一下Grid的具体使用方法，最后会结合Flex与Grid布局讲一讲二者的联系与不同。需要注意得是，Grid布局与我们之前所熟悉的css布...

Moxmi 2019-08-30 15:55 评论0 收藏0
深入新版BS4源码探索flex和工程化sass奥秘

摘要：这个接受三个参数表示栅格数目默认为默认为表示断点设置，这是一个全局变量，为类型。你可能已经听说了一个大新闻：Bootstrap4 合并了代号为#21389的PR，宣布放弃支持IE9，并默认使用flexbox弹性盒模型。这标志着：1）前端开发全面步入现代浏览器的时代进一步来临；2）样式处理也再一次面向未来，拥抱更加灵活的弹性盒模型－Flex布局。这篇文章会带你深入Bootstrap最...

evin2016 2019-08-21 11:30 评论0 收藏0
深入新版BS4源码探索flex和工程化sass奥秘

摘要：这个接受三个参数表示栅格数目默认为默认为表示断点设置，这是一个全局变量，为类型。你可能已经听说了一个大新闻：Bootstrap4 合并了代号为#21389的PR，宣布放弃支持IE9，并默认使用flexbox弹性盒模型。这标志着：1）前端开发全面步入现代浏览器的时代进一步来临；2）样式处理也再一次面向未来，拥抱更加灵活的弹性盒模型－Flex布局。这篇文章会带你深入Bootstrap最...

silencezwm 2019-08-30 15:52 评论0 收藏0