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 xxx@gmail.com</span> </footer>
</div>
</body>
</html>
分享到：
相关推荐
Flexbox in CSS Understanding CSS Flexible Box Layout 英文epub 本资源转载自网络，如有侵权，请联系上传者或csdn删除 本资源转载自网络，如有侵权，请联系上传者或csdn删除
Flexbox in CSS Understanding CSS Flexible Box Layout 英文无水印pdf pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络，如有侵权，请联系上传者或csdn删除 本资源转载自网络...
Flexbox in CSS Understanding CSS Flexible Box Layout 英文azw3 本资源转载自网络，如有侵权，请联系上传者或csdn删除 本资源转载自网络，如有侵权，请联系上传者或csdn删除
新增了CSS Flexible Box Layout Properties参考； 更新了text-decoration参考； 新增了text-decoration-line、text-decoration-color、text-decoration-style参考； 新增了ime-mode参考； 新增了CSS3速查表参考； 新...
高度基于标准CSS API的自适应React Flexbox（CSS灵活框布局模块）网格系统。 特征 简单API基于 ，无需学习新语法。 使用自定义生成的组件样式 根据响应断点轻松更改网格设置 安装 yarn add react - flexa 用法 ...
新增了CSS Flexible Box Layout Properties参考；更新了text-decoration参考；新增了text-decoration-line、text-decoration-color、text-decoration-style参考；新增了 ime-mode参考；新增了CSS3速查表参考；新开了...
[不推荐使用]罗盘箱 使用和而不是指南针-flexbox可获得更好和最新的结果 mixins的集合，为提供。 安装 从此存储库下载并在导入之后将_flexbox.scss导入您的sass文件中。 @import 'compass', 'path-to/flexbox' ;...
FlexboxLayout 是 Android 上实现了类似 CSS Flexible Box Layout Module 效果的界面排版。示例代码：FlexboxLayout flexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout); flexboxLayout....
CSS3 is the latest version of Cascading Style Sheets, the language that in the hands of a skilled designer turns the ugly duckling of unadorned ... CSS Flexible Box Layout
FlexboxLayout这个项目将CSS Flexible Box Layout Module引入至 Android中。
FlexboxLayout FlexboxLayout是一个库项目，将CSS Flexible Box Layout Module的类似功能引入了Android。 安装向您的build.gradle文件中添加以下依赖项：depende FlexboxLayout FlexboxLayout是一个库项目，将CSS ...
新增了CSS Flexible Box Layout Properties参考；更新了text-decoration参考；新增了text-decoration-line、text-decoration-color、text-decoration-style参考；新增了ime-mode参考；新增了CSS3速查表参考；
FlexboxLayout是一个库项目，将CSS Flexible Box Layout Module的类似功能引入了Android。 从1.1.0版开始，该库有望与AndroidX一起使用。 如果您使用1.1.0或更高版本，则应迁移到AndroidX。 有两种在布局中使用...
Layout designers rejoice: now you can greatly simplify the task of laying out your web page or application with Flexbox, the CSS Flexible Box Module. In this concise guide, author Estelle Weyl shows ...
If you’re a web designer or app ...Flexible box layout The new Grid layout system 2D and 3D transforms, transitions, and animation Filters, blending, clipping, and masking Media and feature queries
IE10能为Windows 7用户带来更快更流畅的浏览体验，完善了硬件加速和Chakra JavaScript引擎。... 另外，Windows 7版IE10还...据说网络开发员最常用的两款CSS3指令即Gradients和Flexible Box Layout都已经成为IE10的组件。
文章介绍了如何使用css3设计下一代网站.This book tries to present you with a snapshot of what can be done today...of the new CSS features such as background gradients, Flexible Box Layout, or CSS filters.
该页面主要用到的技术： ...在技术上，响应式网页设计通常采用css媒体查询、JavaScript的屏幕分辨率监测、css的流动布局及百分比布局、弹性图片、以及css3新增的弹性盒子布局（Flexible Box Layout）和网格布局
Use six CSS3 Box Models Create rounded corners, shadows, gradients, sprites, and transparency Replace text with images without affecting accessibility Style text with fonts, highlights, decorations, ...
IE10正式中文版是微软IE10浏览器的最新版本，IE10与IE9一样建立在硬件加速图形工具软件之上...本站将提供ie10中文版官方下载,据说网络开发员最常用的两款CSS3指令即Gradients和Flexible Box Layout都已经成为IE10的组件