关于flex定位讲解

**
首先我们要知道flex是我们移动端常用布局，当然pc端也可以，接下来我们了解一下flex：

整体分为两部分：

一般情况下语法添加在父容器，即display：flex
默认情况下，在弹性盒子元素中元素容器左右排列，即flex-direction：row
还有就是写在子元素里
接下来我们了解听他的每一个属性
display：flex，这个属性就是改变我们正常盒模型变成弹性盒模型
flex-direction：这个属性是用来子项的整体布局方向，默认值是row 从左到右排列，当值为column 这个代表列从上到下排列
flex-war：warp 换行值，默认nowrap 不换行。
justify-content：决定主轴方向上子项对齐和分布方式，一般常用值space-around：就是每个flex两侧都环绕互不相干，spac-evenly：代表flex两侧空白间距相同，默认值是flex-start，子项都在起始位置对齐。
align-items，flex子项相对于flex容器在侧轴相对方式，也可理解为flex垂直居中的方式，取值：center居中对齐，flex-end底对齐，flex-start，默认值子项拉伸。
align-content：这个值和justify-content相反的操作，并且最小需要两行才能看出效果，值和justify-content相同。
注意：弹性布局的方式是做一维布局，网格适合做二维布局。
作用在子项的css属性：
order
改变某个子项的位置，值越大，越靠后，默认值是0
flex-grow：扩展，注意要想看到扩展必须右空隙，当值为0就是不扩展，当值为1就是把空隙全占满，.5占空隙的一半，也可以理解相当于比例值，当值相同就将空隙等分。
flex-shrink：收缩，默认值为1，当为0时候就不收缩了，会溢出，没有负数
flex-basis这个值和flex-shrink很像设置一个具体值，若空间满了就不会变大了。
逆战2020.3.1

关于flex定位讲解相关推荐

快应用采坑与flex布局讲解
快应用之flex布局在我们常用的布局中有display + position + float进行布局,但是这些布局或多或少都有些麻烦(虽然我最喜欢用position,哈哈啥都能干).但是由于快应用只 ...
地下水数值模拟Visual modflow Flex实例讲解
主要围绕的目前应用较为广泛的Visual Modflow Flex 6.1软件版本开展,结合具体应用场景,实例讲解软件的全流程应用过程,包括数据处理分析.数值模型构建以及模拟结果的输出等. 提升技术人 ...
天津政府应急系统之GIS一张图（arcgis api for flex）讲解（四）地图导航控件模块...
config.xml文件的配置如下: <widget left="10" top="50" config="widgets/Navigation ...
wifi室内定位讲解——K邻近法
摘要对于室内复杂环境来说, 适用于室外定位的 GPS 系统和蜂窝移动网络在室内中的定位精度明显恶化, 无法满足室内用户精确定位的需求.因此, 研究一种适用于室内复杂环境的高精度.环境自适应性强的定位 ...
天津政府应急系统之GIS一张图（arcgis api for flex）讲解（二）鹰眼模块
讲解GIS功能模块实现之前,先大概说一下flexviewer的核心配置文件config.xml,系统额GIS功能widget菜单布局.系统的样式.地图资源等等都是在这里配置的,这里对flexviewe ...
display:flex的讲解
阮一峰:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
《Flex 3权威指南》——Adobe官方培训教材
Adobe官方培训教材手把手教你渐入Flex技术佳境涵盖Flex 3新特性媒体评论这是一部杰作,将Flex开发讲解得通通透透. --Huw Collingbourne, ...
CSS五种水平居中：text-align margin incline-block flex relative
方法一text-align:针对于文字 <!DOCTYPE html> <html lang="en"> <head><meta char ...
css专业名词,CSS进阶系列一（flex布局基础知识——介绍、规范、主要思想、专业术语）...
一.介绍 flex是flexible box的缩写,意为弹性布局.flexible box是CSS3新增加的,用来为盒模型提供最大的灵活性.flex旨在提供一个更加有效的方式来布置,对齐和分布在容器之 ...

关于flex定位讲解

关于flex定位讲解

关于flex定位讲解相关推荐

最新文章

热门文章