文章
  • 文章
搜索
腾讯广告 >> 最新资讯 >>网站建设 >> flex-direction-网站建设
详细内容

flex-direction-网站建设

flex-direction-网站建设

flex-direction 属性指定了弹性子元素在父容器中的位置。

语法

flex-direction: row | row-reverse | column | column-reverse

flex-direction的值有:

  • row:横向从左到右排列(左对齐),默认的排列方式。

  • row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。

  • column:纵向排列。

  • column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。

以下实例演示了 row-reverse 的使用:

实例

.flex-container {    display: -webkit-flex;    display: flex;    -webkit-flex-direction: row-reverse;    flex-direction: row-reverse;    width: 400px;    height: 250px;    background-color: lightgrey;}


尝试一下 »

以下实例演示了 column 的使用:

实例

.flex-container {    display: -webkit-flex;    display: flex;    -webkit-flex-direction: column;    flex-direction: column;    width: 400px;    height: 250px;    background-color: lightgrey;}


尝试一下 »


以下实例演示了 column-reverse 的使用:

实例

.flex-container {    display: -webkit-flex;    display: flex;    -webkit-flex-direction: column-reverse;    flex-direction: column-reverse;    width: 400px;    height: 250px;    background-color: lightgrey;}


返回顶部 seo seo