You are here: Reference > JavaScript > client-side > style handling > properties > layoutFlow

layoutFlow style property

Browser support:
Specifies or returns the flow and direction of the content in an element.
This property is deprecated, use the writingMode property instead.


You can find the related objects in the Supported by objects section below.
This property is read/write.
CSS page for this property: layout-flow

Possible values:

The type of this property is string.
 One of the following values: 
Default. Content flows from left to right.
Content flows from top to bottom.
Default: horizontal.

Example HTML code 1:

This example illustrates the use of the layout-flow property:
        .example {
            layout-flow: vertical-ideographic;
    <div class="example">vertical-ideographic</div>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the layoutFlow property in JavaScript:
    <script type="text/javascript">
        function ChangeLayout (selectTag) {            
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the selected options values
            var selectState = selectTag.options[whichSelected].text;

            var div = document.getElementById ("myDiv");

            if ('layoutFlow' in {
       = selectState;
            } else {
                alert ("Your browser doesn't support this example!");
    <div id="myDiv" class="example">Change the value of layout-flow property</div>
    <br />
    <select onchange="ChangeLayout (this);" size="2">
        <option selected="selected" />horizontal
        <option />vertical-ideographic
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content