d性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。
其中flex-flow是flex-direction和flex-wrap属性的简写方式，语法如下：
flex-flow: ||
flex-direction: row(初始值) | row-reverse | column | column-reverse
flex-wrap: nowrap(初始值) | wrap | wrap-reverse
flex-direction定义了d性项目在d性容器中的放置方向，默认是row，即行内方向(一般而言是由左往右，但注意这个和书写模式有关)。
flex-wrap定义是否需要拆行以使得d性项目能被容器包含。*-reverse代表相反的方向。
两者结合起来即flex-flow属性就确定了d性容器在main axis和cross axis两个方向上的显示方式，下面的例子很直观的说明了各个属性值的区别：
.flex-container { display: flex}.flex-container.first { flex-flow: row}/* Initial value. Main-axis is inline, no wrap. */.flex-container.second { flex-flow: column wrap-webkit-flex-flow: column wrap}/* Main-axis is block-direction (top to bottom) and lines wrap in the inline direction (rightwards). */.flex-container.third { flex-flow: row-reverse wrap-reverse}/* Main-axis is the opposite of inline direction (right to left). New lines wrap upwards. *//* other styles just for format */ul { padding: 0}li { list-style: none}.flex-container { background: deepskybluewidth: 200pxheight: 200pxmargin: 5px auto}.flex-container.first { height: 100px}.flex-item { background: tomatopadding: 5pxwidth: 80pxheight: 80pxmargin: 5pxline-height: 80pxcolor: whitefont-weight: boldfont-size: 2emtext-align: center}h1 { font-size: 22pxtext-align: center}.flex-demo { display: flex}上例中的第1个d性项列表使用了默认属性也就是row且不拆行，d性项的宽度在需要的时候会被压缩。
第2个列表使用了column wrap，表示主轴方向是从上往下，而行拆分的方向是行内方向(向右)。
而第3个列表使用了row-reverse wrap-reverse，表示主轴方向是行内相反方向(从右到左)，新行向上拆分。
HTML5新增的全局属性，是指可以对任何元素都使用的属性。功能如下所示。属性
描述
HTML5新增
accesskey
规定访问元素的键盘快捷键
class
规定元素的类名（用于规定样式表中的类）。
contenteditable
规定是否允许用户编辑内容。
是
contextmenu
规定元素的上下文菜单。
是
dir
规定元素中内容的文本方向。
draggable
规定是否允许用户拖动元素。
是
dropzone
规定当被拖动的项目/数据被拖放到元素中时会发生什么。
是
hidden
规定该元素是无关的。被隐藏的元素不会显示。
是
id
规定元素的唯一 ID。
lang
规定元素中内容的语言代码。
spellcheck
规定是否必须对元素进行拼写或语法检查。
是
style
规定元素的行内样式。
tabindex
规定元素的 tab 键控制次序。
title
规定有关元素的额外信息。
<head><meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<table width="998" border="0">
<tr>
<td style="font:'宋体'">字体控制为宋体</td>
</tr>
</table>
</body>
</html>
---------这就是一个简单的html页面，然后其中的font body table tr td层级关系，正常情况下，不需要考虑body的，因为他是整个页面容器，其他显示内容均在body之中，tr td就是行列的，需要注意的是，先行（tr）再列（td）
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）