Question - Alignment inside a stack layout component

[avnerbarr]

Component in a collection view cell - I want to align a label on the left side and an image on the right side:

--------------------------------------------------------
--- Label_text------------------------ image----
-------------------------------------------------------
--------------------------------------------------------

I believe I need to use the stack layout component but I'm not sure what the flags should be:
+(instancetype)newWithModel:(ItemModel *)model {
CKStackLayoutComponent *stack = [CKStackLayoutComponent newWithView:{
[UIView class],
{
{@selector(setBackgroundColor:),[UIColor redColor]} // want to see that the container is being streched
}
} size:{} style:{
.alignItems = CKStackLayoutAlignItemsStretch,
.direction = CKStackLayoutDirectionHorizontal,
}children:{
{
.component = [CKLabelComponent newWithLabelAttributes:{
.string = @"Label",
.color = [UIColor whiteColor]
}viewAttributes:{}]
},
{
.component = [CKImageComponent newWithImage:image],
.alignSelf = CKStackLayoutAlignSelfEnd // shouldn't this align it to the end of the box?
}
}];
return [super newWithComponent:stack];
}

[adamjernst]

Not quite. In flexbox, align-items and align-self apply to the cross axis (opposite of the flex/stack axis). So in this case, AlignSelfEnd means "align to the end, i.e. bottom, in the vertical dimension."

Your question is actually exactly the same as #62. You're running into a shortcoming: what you really want is justify-content: space-between; but we don't support it yet. See #62 for a workaround, and #63 tracks fixing the shortcoming.

[avnerbarr]

Great. Got it to work.