Flex-direction

by kmouse

HTML

<rml>
	<head>
		<link type="text/rcss" href="/../Tests/Data/style.rcss" />
		<title>CSS Test: flex flow direction</title>
		<link href="https://test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/xhtml1/flex-direction.xht" rel="source" />
		<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu" />
		<link href="http://www.w3.org/TR/css-flexbox-1/#flex-direction" rel="help" />
		<link href="reference/flex_direction-ref.rml" rel="match" />
		<meta content="The flow of flex items in the the flex container should observe the flex-direction property." name="assert" />
		<style>
			.flex-container {
				display: flex;
				margin: 20px;
				background-color: #333;
				max-height: 210px;
				flex-wrap: wrap-reverse;
			}

			.flex-item {
				width: 50px;
				height: 50px;
				margin: 20px;
				background-color: #eee;
				line-height: 50px;
				text-align: center;
			}


			.flex-container.flex-direction-row {
				flex-direction: row;
			}

			.flex-container.flex-direction-row-reverse {
				flex-direction: row-reverse;
			}

			.flex-container.flex-direction-column {
				flex-direction: column;
			}

			.flex-container.flex-direction-column-reverse {
				flex-direction: column-reverse;
			}

		</style>
	</head>

	<body>
		<h1>flex-direction:row</h1>
    <div class="flex-container flex-direction-row" style="height: 100px; overflow: scroll; display: flex; position: relative">        
        <div class="flex-item" style="margin: 50px; width: 150px;">1<div class="flex-item" id="r" style="margin: 0px; position: absolute; right: 0px; top: 0;">Abs</div></div>
        <div class="flex-item" style="margin-top: 160px" id="x">2</div>
        <div class="flex-item" style="margin: auto">3</div>
    </div>

		<h1>flex-direction:row-reverse</h1>
		<div class="flex-container flex-direction-row-reverse" style="height: 200px;justify-content: space-around;">
			<div class="flex-item">1</div>
			<div class="flex-item" style="margin-bottom: auto;">2</div>
			<div...

CSS

.flex-container {
  display: flex;
  margin: 20px;
  background-color: #333;
  /*max-width: 210px;
  min-height: 500px;*/
	max-height: 210px;
  flex-wrap: wrap-reverse;
}

.flex-item {
  width: 50px;
  height: 50px;
  margin: 20px;
  background-color: #eee;
  line-height: 50px;
  text-align: center;
}


.flex-container.flex-direction-row {
  flex-direction: row;
}

.flex-container.flex-direction-row-reverse {
  flex-direction: row-reverse;
}

.flex-container.flex-direction-column {
  flex-direction: column;
}

.flex-container.flex-direction-column-reverse {
  flex-direction: column-reverse;
}