Shulou(Shulou.com)06/03 Report--

Editor to share with you what is the use of the flex-direction attribute in css. I hope you will get something after reading this article. Let's discuss it together.

Flex-direction in css is a sub-attribute of the "flexible layout" module, which is used to establish the spindle and define the direction in which flex items are placed in the flex container; the syntax "flex-direction: row | row-reverse | column | column-reverse;".

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

The flex-direction attribute is a child attribute of the Flexible Box (flexible layout) module. It establishes the spindle, which defines the direction in which flex projects are placed in the flex container.

Syntax:

Flex-direction: row | row-reverse | column | column-reverse

Row default value. Displays elastic items horizontally as a line.

Row-reverse and other peers, but in the opposite direction.

Column displays elastic items vertically as a column.

Column-reverse is in the same column, but in the opposite direction.

Note that row and row-reverse are affected by the direction of the flex container. If its text direction is ltr, row represents the horizontal axis from left to right and row-reverse from right to left, and vice versa if the direction is rtl.

Example:

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5.flex-container {padding: 0; margin: 0; list-style: none;-ms-box-orient: horizontal; display:-webkit-box; display:-moz-box; display:-moz-flex; display:-webkit-flex; display: flex;}. Row {- webkit-flex-direction: row; flex-direction: row }. Row-reverse {- webkit-flex-direction: row-reverse; flex-direction: row-reverse;}. Row-reverse li {background: gold;}. Column {- webkit-flex-direction: column; flex-direction: column; float: left;}. Column li {background: deepskyblue;}. Column-reverse {- webkit-flex-direction: column-reverse; flex-direction: column-reverse; float: right;}. Column-reverse li {background: lightgreen }. Flex-item {background: tomato; padding: 5px; width: 50px; height: 50px; margin: 5px; line-height: 50px; color: white; font-weight: bold; font-size: 2mm; text-align: center;}

After reading this article, I believe you have a certain understanding of "what is the use of flex-direction attributes in css". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.