# LayoutFlexRow

LayoutFlexRow divides a horizontal space into 3 sections, where you can place contents at left, right and the remaining space.

paddingTop : 5

paddingBottom : 5

paddingLeft : 5

paddingRight : 5

gap : 5

verticalAlign

reset

left + remain + right

left

remain

right

left + remain

left

remain

remain + right

remain

right

left + right

left

right

# Usage

Place your contents inside 3 slots of LayoutFlexRow
1. left
2. remain
3. right
The content in the remain slot will fill the remaining horizontal space
Any content not wrapped in the <template> tags will be placed in the remain slot
You may use all the 3 slots or just 2 of them

😊

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<LayoutFlexRow
	padding-x="5"
	padding-y="5"
	gap="5"
	vertical-align="center"
	style="border: 1px solid;"
>
	<template #left>
		😊
	</template>
	<template #remain>
		<div style="background-color: #dddddd;">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		</div>
	</template>
	<template #right>
		<button>👍</button>
	</template>
</LayoutFlexRow>
<LayoutFlexRow
	padding-x="5"
	padding-y="5"
	gap="5"
	vertical-align="center"
	style="border: 1px solid;"
>
	<template #left>
		😊
	</template>
	<template #remain>
		<div style="background-color: #dddddd;">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		</div>
	</template>
	<template #right>
		<button>👍</button>
	</template>
</LayoutFlexRow>

# Props

padding props

Property	Description	Type	Default	Value
gap	gap size between slots	Number, String	0	spacing scale
verticalAlign	vertical align contents	String	stretch	top, center, bottom, stretch

← LayoutFlexColumn LayoutGrid →