-
Notifications
You must be signed in to change notification settings - Fork 234
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: flexbox #166
Comments
Flexbox algorithm is described in section 9: https://drafts.csswg.org/css-flexbox/#layout-algorithm |
Hi! Before we get too deep into this have you looked at stickers at all? It was built for the Bubble Tea ecosystem and contains both a generic flexbox implementation and a flexbox table. |
I've looked at it, but:
|
FYI, I'm making some progress on this (see master...MichaelMure:lipgloss:flexbox for curiosity and advice), but the CSSWG spec is hardly digestible. |
FYI, I still have some issue with the box model (I ignored the border making the actual size of the box grow for now), but it's close to work! container := NewStyle().
Border(normalBorder).
FlexWrap(FlexWrapWrap).
FlexJustifyContent(FlexJustifyContentSpaceAround).
Width(100)
style1 := NewStyle().
Border(blockBorder, true).
SetString("content 1\n\nfooo")
style2 := NewStyle().
Border(doubleBorder, true).
Padding(2).
SetString("content 2")
style3 := NewStyle().
Width(40).
Border(doubleBorder, true).
SetString("content 3\n\nfoobar\nbarfoo")
style4 := NewStyle().
Width(60).
Border(doubleBorder, true).
SetString("content 4\n\nfoobar\nbarfoo")
fmt.Println(Flexbox(container, style1, style2, style3, style4)) |
Expanding on #162 (comment), I thought that it would make sense as its own issue. Disclaimer: I'm a lipgloss noob.
Here is a proof of concept to illustrate what I'm talking about. Obviously, a lot could be changed or improved.
Botched implementation:
Rendered as:
The text was updated successfully, but these errors were encountered: