谈谈关于Flex布局的一些简单问题
2017-08-27 15:25
495 查看
目前刚参加工作不久,能力不足,经常会踩到一些简单的坑,记录下来,防止自己再重犯。
首先想写写Flex布局(弹性布局),因为在项目中用得挺频繁的,对一些基本的概念和实践做个小结 (主要是摘抄Mozilla的文档 : )
Flex布局概念
对布局比较了解的同学可能会发现,块级布局更侧重于垂直方向,行内布局更侧重于水平方向,与此相对的,Flex布局是通过调整其内元素的宽高,实现自动填充的一种能力。Flex容器扩展其内元素来填充可用空间,或将其收缩来避免溢出。
来看张flex-direction为row的一个Flex容器:
其内的flex item将根据row的模式沿主轴水平排列,方向为元素的文本流方向。
弹性容器(Flex container)
包含着弹性项目的父元素。通过设置display属性值为flex或inline-flex即可定义弹性容器。
弹性项目(Flex item)
弹性容器的每个子元素都称为弹性项目。
轴(Axis)
每个弹性框布局包含两个轴。弹性项目依次排列的那根轴称为主轴(main axis),同时垂直于主轴的那根轴称为侧轴(cross axis)。
flex-direction 确立主轴
justify-content 定义了在当前行上,弹性项目沿主轴如何排布
align-items 定义了在当前行上,弹性项目沿侧轴默认如何排布
align-self 定义了单个弹性项目在侧轴上应当如何对齐,这个定义会覆盖由align-items所确定的默认值
方向(Direction)
描述了弹性项目排布的起点与终点。
如order属性可将元素与序号关联起来,数值越小越靠前,依次决定哪些元素排在前面。
Tips:一些不会对Flex布局产生影响的属性:
由于Flex布局使用了不同的布局算法,某些属性在弹性容器上没有意义。
多栏布局模块的column-*属性对弹性项目无效
float与clear对弹性项目无效。使用float将使元素的display属性计为block
vertical-align对弹性项目的对齐无效
下面举一个经典的圣杯布局(HolyGrailLayout)来加深理解
这里展示的正是浏览器窗口的页面布局必须为智能手机窗口优化的场景。不仅元素的尺寸需要缩减,其呈现顺序也需要改变。Flex布局让这变得很简单。
首先想写写Flex布局(弹性布局),因为在项目中用得挺频繁的,对一些基本的概念和实践做个小结 (主要是摘抄Mozilla的文档 : )
Flex布局概念
对布局比较了解的同学可能会发现,块级布局更侧重于垂直方向,行内布局更侧重于水平方向,与此相对的,Flex布局是通过调整其内元素的宽高,实现自动填充的一种能力。Flex容器扩展其内元素来填充可用空间,或将其收缩来避免溢出。
来看张flex-direction为row的一个Flex容器:
其内的flex item将根据row的模式沿主轴水平排列,方向为元素的文本流方向。
弹性容器(Flex container)
包含着弹性项目的父元素。通过设置display属性值为flex或inline-flex即可定义弹性容器。
弹性项目(Flex item)
弹性容器的每个子元素都称为弹性项目。
轴(Axis)
每个弹性框布局包含两个轴。弹性项目依次排列的那根轴称为主轴(main axis),同时垂直于主轴的那根轴称为侧轴(cross axis)。
flex-direction 确立主轴
justify-content 定义了在当前行上,弹性项目沿主轴如何排布
align-items 定义了在当前行上,弹性项目沿侧轴默认如何排布
align-self 定义了单个弹性项目在侧轴上应当如何对齐,这个定义会覆盖由align-items所确定的默认值
方向(Direction)
描述了弹性项目排布的起点与终点。
如order属性可将元素与序号关联起来,数值越小越靠前,依次决定哪些元素排在前面。
Tips:一些不会对Flex布局产生影响的属性:
由于Flex布局使用了不同的布局算法,某些属性在弹性容器上没有意义。
多栏布局模块的column-*属性对弹性项目无效
float与clear对弹性项目无效。使用float将使元素的display属性计为block
vertical-align对弹性项目的对齐无效
下面举一个经典的圣杯布局(HolyGrailLayout)来加深理解
<!DOCTYPE html> <html lang="en"> <head> <style> #main 4000 { min-height: 800px; margin: 0px; padding: 0px; display: flex; flex-direction: row; } #main > article { margin: 4px; padding: 5px; /* flex属性分别是flex-grow、flex-shrink以及flex-basis属性的简写 */ flex: 3 1 60%; order: 2; } #main > nav { margin: 4px; padding: 5px; flex: 1 6 20%; order: 1; } #main > aside { margin: 4px; padding: 5px; flex: 1 6 20%; order: 3; } header, footer { display: block; margin: 4px; padding: 5px; min-height: 100px; } /* 窄到已不足以支持三栏 */ @media all and (max-width: 640px) { #main,#page { flex-direction: column; } #main > article, #main > nav, #main > aside { /* 恢复到文档内的自然顺序 */ order: 0; } #main > nav, #main > aside, header, footer { min-height: 50px; max-height: 50px; } } </style> </head> <body> <header>header</header> <div id="main"> <article>article</article> <nav>nav</nav> <aside>aside</aside> </div> <footer>footer</footer> </body> </html>
这里展示的正是浏览器窗口的页面布局必须为智能手机窗口优化的场景。不仅元素的尺寸需要缩减,其呈现顺序也需要改变。Flex布局让这变得很简单。
相关文章推荐
- 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行
- 谈谈关于数据加密,解密及签名的一些问题
- flex弹性盒子布局中,关于flex-grow布局问题设置
- FLEX布局的一些问题和解决方法
- 自定义viewgroup实现自动换行的布局,同时解决自定义布局在wrapcontent下高度不能自适应的问题,plus一些关于Component重写的基础知识
- jsp中的一些关于注释表达式的简单问题
- 有关于用css来进行网页布局的一些问题week4
- 关于android 代码生成布局中遇到的一些问题
- 关于一些简单的排序问题
- ABAP--关于ABAP Dictionary的一些简单问题
- 关于AngularJS 1.x 从Flex程序员角度谈谈我的一些看法(二)
- 关于IIS布局设置问题的一些解决(window2003 server)
- 关于RadioGroup切换数据和布局的一些小问题
- 关于js中小问题与一些简单函数的用法
- 关于 Maya Python API 中的简单类型的一些问题
- 简单谈谈关于C++中大随机数的问题
- 关于openoffice/libreoffice+swftools+jodconverter+flexpaper预览文件的一些问题
- 最近遇到不少客户提出关于PP账户名字需要更改,如何更改的问题。因此在此做个简单的总结,希望能帮到一些朋友!
- 关于tensorflow使用的一些简单的问题
- ABAP--关于ABAP Dictionary的一些简单问题