5.31学习总结

标签：总结 flex direction reverse column 学习 5.31 webkit row

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; margin: 0px; padding: 0px; color: gray;"> lightgrey; }
尝试一下 »

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

实例

.flex-container { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; width: 400px; height: 250px; margin: 0px; padding: 0px; color: gray;"> lightgrey; }
尝试一下 »

 

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

实例

.flex-container { display: -webkit-flex; display: flex; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; width: 400px; height: 250px; margin: 0px; padding: 0px; color: gray;"> lightgrey; }

标签：总结,flex,direction,reverse,column,学习,5.31,webkit,row
From： https://www.cnblogs.com/clh628/p/17471980.html