Flex 布局教程:实例篇

编程之家收集整理的这篇文章主要介绍了Flex 布局教程:实例篇编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Flex 布局教程:实例篇

作者: 阮一峰

日期: 2015年7月14日

上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。

你会看到,不管是什么布局,Flex往往都可以几行命令搞定。

我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp文章Solved by Flexbox

一、骰子的布局

骰子的一面,最多可以放置9个点。

下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo。

如果不加说明,本节的HTML模板一律如下。

<div class="Box">
  <span "item></span>
</div>

上面代码中,div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目。如果有多个项目,就要添加多个span元素,以此类推。

1.1 单项目

首先,只有左上角1个点的情况。Flex布局默认就是首行左对齐,所以一行代码就够了。

.Box {
  display: flex;
}

设置项目的对齐方式,就能实现居中对齐和右对齐。

; justify-content: center}

: flex-end}

设置交叉轴对齐方式,可以垂直移动主轴。

align-items

}

1.2 双项目

: space-between

flex-direction: column@H_502_181@

} .item:nth-child(2) align-self

1.3 三项目

.item:nth-child(3) 1.4 四项目

flex-wrap: wrapalign-content

HTML代码如下。

"column> >

CSS代码如下。

.column flex-basis: 100% 1.5 六项目

HTML代码如下。

"row> .row:flex.row:nth-child(2).row:nth-child(3) 1.6 九项目

}

二、网格布局

2.1 基本网格布局

最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放。

HTML代码如下。

"Grid"Grid-cell>....Grid .Grid-cell flex: 1 2.2 百分比布局

某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。

HTML代码如下。

"Grid-cell u-1of4"Grid-cell u-1of3>
.Grid-cell.u-full : 0 0 100%.Grid-cell.u-1of2 : 0 0 50%.Grid-cell.u-1of3 : 0 0 33.3333%.Grid-cell.u-1of4 : 0 0 25% 三、圣杯布局

圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。

HTML代码如下。

<body "HolyGrail<header</header"HolyGrail-body<main "HolyGrail-content</main<nav "HolyGrail-nav</nav<aside "HolyGrail-ads</aside<footer</footer</body.HolyGrail min-height: 100vhheader,footer .HolyGrail-body .HolyGrail-content .HolyGrail-nav,.HolyGrail-ads { /* 两个边栏的宽度设为12em */ : 0 0 12em.HolyGrail-nav /* 导航放到最左边 */ order: -1}

如果是小屏幕,躯干的三栏自动变为垂直叠加。

@media (max-width: 768px) { { ; ; } : auto} 四、输入框的布局

我们常常需要在输入框的前方添加提示,后方添加按钮。

HTML代码如下。

"InputAddOn"InputAddOn-item<input "InputAddOn-field<button </button.InputAddOn .InputAddOn-field 五、悬挂式布局

有时,主栏的左侧或右侧,需要添加一个图片栏。

HTML代码如下。

"Media<img "Media-figure" src"alt<p "Media-body</p.Media : flex-start.Media-figure margin-right: 1em.Media-body 六、固定的底栏

有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用Flex布局,让底栏总是出现在页面底部

HTML代码如下。

"Site"Site-content.Site .Site-content 七,流式布局

每行的项目数固定,会自动分行。

CSS的写法。

.parent width: 200pxheight: 150pxbackground-color: blackflex-flow: row wrap.child Box-sizing: border-Box: white: 50pxborder: 1px solid red}

(完)

总结

以上是编程之家为你收集整理的Flex 布局教程:实例篇全部内容,希望文章能够帮你解决Flex 布局教程:实例篇所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的Flex相关文章

获取网络发布的webservice wsdl: http://www.flash-mx.com/ws/months.cfc?wsdl   GetMonths.mxml   <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"         layout="
在开发四国军棋的游戏中,通过 flex联机游戏开发- 四国军棋游戏(五)-提炼棋类开发api,我们提炼出了第一个关于棋类游戏开发的api-FlexChessAPI,这个api设计的方针就是基于状态机与事件驱动的flex主要机制,使开发工作简洁易行。现在,我们第一次使用这个api来开发一款中国象棋游戏,对一个成熟的开发工作者来说,我相信,你大概只需要半天时间就可以让这个象棋游戏运作起来。 现在,我们
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="#FFFFFF" applicationComplete="registerGlobalKeyHandler()">
flex4 beta发布了,它是自flex3以来的重大改革。flex4 beta 提供了一种新的组件和皮肤的架构。作为一个flex3的开发者,当你用flex4 beta编译你的flex3应用时你应该不会遇到太大的挑战,因为flex4 beta的一个目标就是保持与flex3的兼容。在这篇文章里我会提供关于flex4 beta主体带的一个大概的浏览,介绍一下Flex3到Flex4架构上的区别,以及在组
一 超酷皮肤主题推荐: 1. kingnarestyle: 下载地址:http://code.google.com/p/kingnarestyle/ 2.Carbon: 下载地址:http://www.fillcolors.com/post.cfm/carbon 3.Aqua: 下载地址:http://www.fillcolors.com/post.cfm/aqua 4.Rainbow: 下载地址
      昨天下载了一个新版本flex 4.1 sdk 包含升级adobe air 2.0 的版本的sdk ,当我换成了这个版本sdk 发现当存在文本的时候,垂直的布局方式存在一些差异。4.0版本则没有事情。不知道究竟发生了什么事情?做了一个简单的实验。看看差别究竟在哪里?    但是反而在同学间又没有这样的问题存在,十分究竟。记录一下。   <s:Group> <s:Grou
     类成员有四种修饰符: public  internal  dynamic(实现运行时添加类和属性的方法  dynamic class Foo)和final。 类成员可以有:public ,private, internal, protected     as文件的组织结构: package 中包含一个和文件名相同的public类,在package外有几个不是public的类,作为辅助类
还原问题:   request.setCharacterEncoding("UTF-8");   response.setContentType("text/html;charset=UTF-8");   request.setCharacterEncoding("UTF-8");       response.getOutputStream().println("中文");     java.i
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注