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之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
May 15 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 HTML / CSS
CSS list-style-type属性使用方法
May 21 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/08/09 PHP
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python web框架中实现原生分页
2019/09/08 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
python如何删除列为空的行
2020/07/17 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
linux面试题参考答案(4)
2014/09/21 面试题
北京振戎融通Java面试题
2015/09/03 面试题
幼儿生日活动方案
2014/08/27 职场文书
离婚协议书范本2014
2014/10/27 职场文书
北京青年观后感
2015/06/15 职场文书
二十年同学聚会感言
2015/07/30 职场文书
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript