scu-flex

Flex
1
2
3
 
<scu-flex>
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</scu-flex>
Flex Justify End
1
2
3
 
<scu-flex justify-content="flex-end">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</scu-flex>
Flex Space Evenly
1
2
3
 
<scu-flex 
justify-content="space-evenly"
align-items="stretch">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</scu-flex>
Flex Spacing
1
2
3
 
<scu-flex 
padding="20px"
gap="40px">
<div class="child">1</div>
<div class="child" style="flex: 1;">2</div>
<div class="child">3</div>
</scu-flex>

scu-member-profile

Properties

Property Attribute Description Type Default
alignItems align-items FlexAlignItems.baseline | FlexAlignItems.center | FlexAlignItems.flexEnd | FlexAlignItems.flexStart | FlexAlignItems.inherit | FlexAlignItems.initial | FlexAlignItems.stretch FlexAlignItems.flexStart
direction direction FlexDirection.horizontal | FlexDirection.vertical FlexDirection.h
gap gap string "0px"
justifyContent justify-content FlexJustifyContent.center | FlexJustifyContent.flexEnd | FlexJustifyContent.flexStart | FlexJustifyContent.inherit | FlexJustifyContent.initial | FlexJustifyContent.spaceArround | FlexJustifyContent.spaceBetween | FlexJustifyContent.spaceEvenly FlexJustifyContent.flexStart
padding padding string "0px"

Built with StencilJS