Flexbox layout #257
Merged
Flexbox layout #257
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mikke89
added
enhancement
…itespace characters at end of string
…ome situations when scrollbars are added
- WIP Start working on flexbox layouting - WIP basic flex layouting - Flexbox algorithm, resolving flexible lengths of items - Flexbox cross sizing - Fix flexbox cross size - Flexbox main axis alignment - Flexbox cross-axis alignment. With that, flexboxes are feature complete but needs cleanup, much more testing, and lots of fixes. - Flexbox warning instead of error - Add visual test for 'flex-direction' - Support for reverse flow direction and reverse wrap - Flexbox wrap on exceeded main max size - Fix auto margins on flex items along cross axis, and wrap reverse should also reverse cross offset within a line - Update and add new flexbox visual test - Fix flexbox reverse offseting - Support absolutely positioned items within flex container - Update flexbox visual test - Fix flexbox overflow sizing - Update flexbox visual tests - Flexbox baseline alignment - Add flexbox scrollbar sample - Add support for scrollbars in flex container - Fix some compiler warnings - Update and add new flexbox visual tests - Cleanup flexbox layout and use common methods with table - Flex layout use formatting context mode for LayoutDetails::BuildBox, fix final todos from flexbox layout - Format flex layout - Fix pixel rounding issues in flexbox layout - Small fix for flex layout pixel rounding - Flex layout avoid 0/0 float math - Update flex visual sample - Flex layout: Set a definite width when finding the vertical content size. - Update flex sample with animation - Add visual test for flex container height constraints - Flex container now respects min-/max- constraints
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
It's been some time in the making now. This has perhaps been the most requested feature yet (see #182), so I'm happy to present this. Finally
display: flexis ready for a wider audience!In case you want to read up on what flexbox layout is, see eg. flexbox layout at MDN for an introduction.
I've generally followed the CSS specification, although there are some minor differences. Not everything makes sense for RmlUi, and there are some details I've dropped for the sake of simplicity.
I encourage everyone to test and report back. I'm especially eager to rule out bugs in real world usage. Or just to see you guys have fun with it, screenshots are appreciated!
See the WIP flexbox documentation. It lists all the related properties and differences from CSS. It still needs a more detailed description of the properties, but you will get far with looking at CSS guides. There are also several examples in the Visual Tests sample.
Screenshots
Known limitation
display: flexdoesn't currently work properly on elements that are absolutely positioned or floated. This is the same situation as for tables, instead please wrap the flex container inside another div.I also need to clean up the commit history quite a bit.