css教程 2012-08-16
CSS Flexible Box Layout 是一直比较新的布局方式,现在支持比较好的浏览器是firefox,chrome。所以下面的例子只可以在firefox,chrome下面运行才可以看到效果。
Flexbox 为 display 属性赋予了一个新的值(即 box 值),还为我们提供了 8 个新的属性:
box-orient
box-pack
box-align
box-flex
box-flex-group
box-ordinal-group
box-direction
box-lines
常用 Flexbox 样式属性
用于框的样式
display: box
该显示样式的新值可将此元素及其直系子代加入弹性框模型中。Flexbox 模型只适用于直系子代。
box-orient
值:horizontal | vertical | inherit
框的子代是如何排列的?还有两个值:inline-axis(真正的默认值)和 block-axis,但是它们分别映射到水平和垂直方向。
box-pack
值:start | end | center | justify
设置沿 box-orient 轴的框排列方式。因此,如果 box-orient 是水平方向,就会选择框的子代的水平排列方式,反之亦然。
box-align
值:start | end | center | baseline | stretch
基本上而言是 box-pack 的同级属性。设置框的子代在框中的排列方式。如果方向是水平的,该属性就会决定垂直排列,反之亦然。
用于框的子代的样式
box-flex
值:0 | 任意整数
该子代的弹性比。弹性比为 1 的子代占据父代框的空间是弹性比为 2 的同级属性的两倍。其默认值为 0,也就是不具有弹性。
上面的 box-flex-group、box-ordinal-group、box-direction 和 box-lines 属性我就不介绍了,因为老实说,您的大部分 Flexbox 作品都未必会用到这些。
下面是做实验的一个小例子,用flex box layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <style type="text/css"> * { border: none; margin: 0; padding: 0; } h1 { font: bold 20px Tahoma; } h2 { font: bold 14px Tahoma; } header, section, footer, aside, nav, article, hgroup { display: block; } body { width: 100%; display: -webkit-box; -webkit-box-pack: center; /*设置沿 box-orient 轴的框排列方式。因此,如果 box-orient 是水平方向,就会选择框的子代的水平排列方式,反之亦然。*/ -webkit-box-align: center; } #wrapper { max-width: 1000px; margin: 20px 0px; display: -webkit-box; /*可将此元素及其直系子代加入弹性框模型中式显示*/ -webkit-box-orient: vertical; /*框的子代是如何排列的?还有两个值:inline-axis(真正的默认值)和 block-axis,但是它们分别映射到水平和垂直方向。*/ -webkit-box-flex: 1; /*该子代的弹性比。弹性比为 1 的子代占据父代框的空间是弹性比为 2 的同级属性的两倍。其默认值为 0,也就是不具有弹性。*/ } #top_header { background: yellow; border: 3px solid black; padding: 20px; } #top_menu { border: red; background: #ccc; color: white; } #top_menu li { list-style: none; display: inline-block; padding: 5px; } #new_div { display: -webkit-box; -webkit-box-orient: horizontal; /*框的子代是如何排列的为水平对齐*/ border: 1px solid #ccc; background: #C60; } .main_section { border: 1px solid blue; -webkit-box-flex: 1; /*让当前div和子元素可伸缩*/ margin: 20px; padding: 20px } #side_news { border: 1px solid red; width: 220px; margin: 20px 0px; padding: 30px; background: #66cccc; } #footer { text-align: center; padding: 20px; border-top: 2px solid green } </style> <body> <div id="wrapper"> <header id="top_header"> <div id="logo"> </div> <h1>Welcome to this site!</h1> </header> <nav id="top_menu"> <ul> <li><a href="#">Index</a></li> <li><a href="#">Doc</a></li> <li><a herf="#">About</a></li> </ul> </nav> <div id="new_div"> <article class="main_section"> <header> <hgroup> <h1>Article title</h1> <h2>Sub title of article</h2> </hgroup> </header> <p>This article is mainly used to introcuce html5 programmer.It's very userful to a new coder;</p> <footer> written by robter; </footer> </article> <article class="main_section"> <header> <hgroup> <h1>Article title 2</h1> <h2>Sub title of article2</h2> </hgroup> </header> <p>This article is mainly used to introcuce html5 programmer.It's very userful to a new coder;</p> <footer> written by robter; </footer> </article> <aside id="side_news"> <h4>News</h4> <p> Ncik buy a new dog;He love it very much; </p> </aside> </div> <footer id="footer"> <span>Copyright 2012-8 [email protected]</span> </footer> </div> </body> </html>