Layout
display
Utilities for controlling the display box type of an element.
Quick reference
Every class applies on React Native
block
display: block;
display: flex
contents
display: contents;
display: contents
flex
display: flex;
flexDirection: row
display: flex
flow-root
display: flow-root;
display: flex
grid
display: grid;
display: flex
hidden
display: none;
display: none
inline
display: inline;
display: flex
inline-block
display: inline-block;
display: flex
inline-flex
display: inline-flex;
flexDirection: row
alignSelf: flex-start
display: flex
inline-grid
display: inline-grid;
display: flex
inline-table
display: inline-table;
display: flex
line-clamp-1
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
numberOfLines={1}
ellipsizeMode={tail}
The React Native column is what AstraWind resolves each class to, computed live on this page with the current color scheme. Classes with no native equivalent are accepted without effect, and AstraWind warns about them in development. See
Compatibility.