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新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
css3的图形3d翻转效果应用示例
Apr 08 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 HTML / CSS
canvas实现烟花的示例代码
Jan 16 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
CSS代码检查工具stylelint的使用方法详解
Mar 27 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输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
Python fileinput模块使用实例
2015/05/28 Python
简单了解python模块概念
2018/01/11 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
Pytorch转tflite方式
2020/05/25 Python
python 制作磁力搜索工具
2021/03/04 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
中国央视网签名寄语
2014/01/18 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
工商局个人工作总结
2015/03/03 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
教学副校长工作总结
2015/08/13 职场文书
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis