Valclass

Display

Utilities for controlling the display box type of an element.

Class	Properties
v-d-flex	display: flex;
v-d-block	display: block;
v-d-grid	display: grid;
v-d-flexbox	display: flexbox;
v-d-inline-grid	display: inline-grid;
v-d-inline-flex	display: inline-flex;
v-d-inline-block	display: inline-block;
v-d-inline	display: inline;
v-d-table	display: table;
v-d-inline-flexbox	display: inline-flexbox;
v-d-inline-table	display: inline-table;
v-d-table-column-group	display: table-column-group;
v-d-table-footer-group	display: table-footer-group;
v-d-table-header-group	display: table-header-group;
v-d-table-row	display: table-row;
v-table-cell	display: table-cell;
v-table-column	display: content-box;
v-none	display: none;
v-d-flow-root	display: flow-root;

flex

							

						<--add a display class to body tag-->
						+ <body class="display">


						<div class="v-d-flex">
							<div ></div>
							<div ></div>
							<div ></div>
						</div>

display flex version

block

							

						<--add a display class to body tag-->
						+ <body class="display">


						<div class="v-d-block">
							<div ></div>
							<div ></div>
							<div ></div>
						</div>

display-block version

inline

							

						<--add a display class to body tag-->
						+ <body class="display">


						<div class="v-d-inline">
							<div ></div>
							<div ></div>
							<div ></div>
						</div>

display-inline version

table-row

Lorem, ipsum.

Lorem ipsum

Lorem.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit.

Lorem, ipsum.

							

						<--add a display class to body tag-->
						+ <body class="display">


						<div>
							<div class="v-d-table">
								<div  class="v-d-table-row" ></div>
								<div  class="v-d-table-row" ></div>
								<div  class="v-d-table-row" ></div>
							</div>

							<div class="v-d-table">
								<div  class="v-d-table-row" ></div>
								<div  class="v-d-table-row" ></div>
								<div  class="v-d-table-row" ></div>
							</div>
						</div>

display-table version

inline-flex

							

						<--add a display class to body tag-->
						+ <body class="display flex">

						<div class="v-d-inline-flex">
							<div  class="v-flex-1" ></div>
							<div  class="v-flex-1" ></div>
							<div  class="v-flex-1" ></div>
						</div>

display-inline-flex version

inline-block

							

						<--add a display class to body tag-->
						+ <body class="display">

							<div>
								<div  class="v-d-inline-block" ></div>
								<div  class="v-d-inline-block" ></div>
								<div  class="v-d-inline-block" ></div>
							</div>

display-inline-block version

inline-grid

							

						<--add a display class to body tag-->
						+ <body class="display grid">

							<divclass="v-d-inline-grid v-template-column-3">
								<div></div>
								<div></div>
								<div></div>
							</div>

							<divclass="v-d-inline-grid v-template-column-3">
								<div></div>
								<div></div>
								<div></div>
							</div>

display-inline-grid version