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 相关文章推荐
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 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判断正常访问和外部访问的示例
2014/02/10 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
js随机生成一个验证码
2017/06/01 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
从Python程序中访问Java类的简单示例
2015/04/20 Python
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
工作自荐信
2013/12/11 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
派出所所长先进事迹
2014/05/19 职场文书
科学发展观演讲稿
2014/09/11 职场文书
台风停课通知
2015/04/24 职场文书
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL
php解析非标准json、非规范json的方式实例
2022/05/10 PHP