We've updated our documenation to align with our other frameworks. Our new documenation will
live here and these pages will be removed.
Rows
Rows horizontally layout content and are direct children of containers.
Denali’s layout components are built using flexbox to help you layout content with ease. Unfamiliar with flexbox? Read this guide before getting started.
Basics
Rows can be implemented using the class .row. By default rows are set to flex-direction:row and flex-wrap:wrap. This means that all elements placed in a row will line up horizontally from left to right and that they will wrap when they become too large to fit the row width.
<divclass="container">
This is a row
<divclass="row has-bg-grey-400 p-10 br-4"><divclass="col has-bg-violet-500 p-10 br-4">Flex:auto column 1</div><divclass="col has-bg-violet-500 p-10 br-4">Flex:auto column 2</div></div></div>
Row Element Direction
If you’d like to line up elements within a row from right to left, you can do so by adding the class .reversed to your row. Adding .reversed will also cause wrapped elements to line up from right to left.