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样式linear-gradient的使用实例
Jan 16 HTML / CSS
css3 iphone玻璃透明气泡完美实现
Mar 20 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
Mar 31 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 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+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
js实现表格单列按字母排序
2020/08/12 Javascript
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python记录详细调用堆栈日志的方法
2015/05/05 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
python numpy库np.percentile用法说明
2020/06/08 Python
python如何删除列为空的行
2020/07/17 Python
一道SQL存储过程面试题
2016/10/07 面试题
房产公证书范本
2014/04/10 职场文书
2014年计生标语
2014/06/23 职场文书
岗位安全生产责任书
2014/07/28 职场文书
教师暑期培训感言
2014/08/15 职场文书
先进工作者推荐材料
2014/12/23 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书