flex弹性布局：(1)其容器能调节子节点宽或高，以适应不同屏幕。(2)可以将一个元素当做容器，其子元素自动成为子容器。(3)水平主轴和垂直交叉轴。
设定主轴方向flex-direction：(1)默认row，主轴为水平方向，起点在左边。(2)row-reverse主轴为水平方向，起点在右边。(3)主轴为垂直方向，起点在上面。(4)主轴为垂直方向，起点在下面。
2024年09月16日
flex弹性布局：(1)其容器能调节子节点宽或高，以适应不同屏幕。(2)可以将一个元素当做容器，其子元素自动成为子容器。(3)水平主轴和垂直交叉轴。
设定主轴方向flex-direction：(1)默认row，主轴为水平方向，起点在左边。(2)row-reverse主轴为水平方向，起点在右边。(3)主轴为垂直方向，起点在上面。(4)主轴为垂直方向，起点在下面。
2024年09月16日
CSS（层叠样式表）是一种用于描述HTML或XML（包括各种XML方言，如SVG或XHTML）文档的视觉表现的样式语言。CSS描述了元素应该如何在屏幕、纸张、语音或其他媒体上显示。本文将深入探讨CSS的核心概念和语法，为初学者和有经验的开发者提供一个参考。
选择器是CSS中的基础概念，它们用于指定我们想要样式化的HTML元素。
2024年09月16日
效果图:
如果没有animation-direction: alternate;属性的话, 那么每次完成动画帧, 就会立刻恢复到起始位置, 中间没有缓冲过程, 看起来就很生硬
2024年09月16日
实例
由右至左，显示一个div box的子元素：
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-direction:row-reverse;
/* Firefox */
display:-moz-box;
2024年09月16日
实例
先执行一遍动画，然后再反向执行一遍动画：
animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari 和 Chrome */
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
2024年09月16日
一、用的少并不代表没有用
至少，在我接触的这么多项目里，没有见到使用过CSS direction属性做实际开发的。
为什么呢？是因为direction长得丑吗？
虽然说direction确实其貌不扬，但是CSS并不是一个看脸卖萌的世界。
那是因为兼容性吗？
那更不是了，在那个“美女”确实是美女的年代，包括IE6在内的浏览器，CSS direction就已经被支持。
那究竟是什么原因呢？
2024年09月16日
实例
设置文字方向"right-to-left":
div
{
direction:rtl;
}
属性定义及使用说明
direction属性指定文本方向/书写方向。
| 默认值： | ltr |
|---|---|
| 继承： | yes |