CSS3 flex布局之快速实现BorderLayout布局


Posted in HTML / CSS onDecember 03, 2015

学习完flex的布局模式之后,我们趁热打铁,来实现一个BoxLayout布局.什么是BoxLayout布局?那我们先上一个图看看

CSS3 flex布局之快速实现BorderLayout布局

BoxLayout布局写过后端UI代码的编程者应该不陌生了,写前端的代码的也同样很熟悉,包括html的框架frame.但以往的CSS中使用float浮动来进行控制,控制起来相对来说是复杂一些,也需要加入更多的标签和代码.

看完这个界面,我们就可以着手写出标签的代码布局:

复制代码
代码如下:

.<div class="parent">
. <header>北</header>
. <aside class="left">东</aside>
. <div class="center">中</div>
. <aside class="righ">西</aside>
. <footer>南</footer>
.</div>
<code class="cls hljs cs">
代码很简单,就只有二级关系,当然也可以将parent这一父级去掉,将body来当做父级,除非有必要.</code>

那我们开始用CSS来实现BorderLayout,这里同样定义父级parent为flex容器,方向为从左至右,可以换行.

复制代码
代码如下:

..parent{
. display: flex;
. flex-direction: row;
. flex-wrap: wrap;
. text-align: center;
.}

接着设置flex项的布局模式,header,footer我们将其设置为flex-basis:100%;因为他们占据整行,而两个aside的宽度相等,center比两边的aside要宽,所以我们用flex-grow来设置他们的占据比例.
 

复制代码
代码如下:

.header, footer{
. flex-basis: %;
.}
..center{
. flex-grow: ;
.}
.aside{
. flex-grow:;
.}
<code class="cls hljs cs">
这样就实现了BorderLayout布局,是不是非常简单.不要忘记了,要给他们设定相应的高度,和背景色,不然看到的是一片白,以为没反应呢!我是这样设置的,作为参考</code>
..parent{
. display: flex;
. flex-direction: row;
. flex-wrap: wrap;
. text-align: center;
.}
.header,footer,aside,.center{
. padding: px;;
.}
..center,aside{
. min-height: px;
.}
.header, footer{
. flex-basis: %;
. min-height: px;
.}
.header{
. background-color: cadetblue;
.}
.footer{
. background-color: darkgrey;
.}
..center{
. flex-grow: ;
.}
.aside{
. flex-grow:;
. background-color: bisque;
.}
<code class="cls hljs cs">
最后测试OK!
</code>

解析四大Flex4布局方式

本文向大家介绍一下四个Flex4布局类的用法,它们分别是:BasicLayout、HorizontalLayout、TileLayout、VerticalLayout。

在学习Flex4的过程中,你会遇到Flex4布局的概念, 这里和大家分享一下,在FlexSDK4(Gumbo)的spark组件库里面增加了一个page:spark.layouts。其中包括了比较重要的四个Flex4布局类(class),请看下文详细介绍。

四种Flex4布局类概述

在FlexSDK4(Gumbo)的spark组件库里面增加了一个page:spark.layouts。其中包括了比较重要的四个Flex4布局类(class),分别是:BasicLayout、HorizontalLayout、TileLayout、VerticalLayout。

1、BasicLayoutFlex4布局:

(默认属性,当不指定定位后,则是绝对定位布局)

这是spark组件默认FlexSDK3的布局方式,即绝对定位布局。在FlexSDK3里面对应的是:layout="absolute"

2、HorizontalLayoutFlex4布局:

这是spark组件库里面的水平布局方式。在里面对应的是:layout="horizontal"

3、VerticalLayoutFlex4布局:

这是spark组件库里面的竖直布局方式。在FlexSDK3里面对应的是:layout="vertical"

4、TileLayoutFlex4布局:

这是spark组件库新增的布局方式,即格子布局方式。TileLayout布局方式可以说是HorizontalLayout和VerticalLayout结合的方式。

三水点靠木提醒大家还有一点是需要注意的:

paddingLeft、paddingRight、paddingTop、paddingBottom
这四个属性已经转移到了HorizontalLayout、VerticalLayout里面。这点也与FlexSDK3有些区别。也就是说,在spark组件中的容器,已经不具备paddingLeft、paddingRight、paddingTop、paddingBottom属性了。

HTML / CSS 相关文章推荐
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 #HTML / CSS
CSS3 display知识详解
Nov 25 #HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 #HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 #HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 #HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 #HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 #HTML / CSS
You might like
php htmlspecialchars加强版
2010/02/16 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
初学JavaScript第二章
2008/09/30 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
python从入门到精通(DAY 3)
2015/12/20 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
python opencv之SURF算法示例
2018/02/24 Python
Python 忽略文件名编码的方法
2020/08/01 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
绝对经典成功的大学生推荐信
2013/11/08 职场文书
写给保洁员表扬信
2014/01/08 职场文书
20岁生日感言
2014/01/13 职场文书
网络编辑岗位职责
2014/03/18 职场文书
资产运营委托书范本
2014/10/16 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python