- Proportionally distribute items
- Easy to use
- Supports min and max stops
- Supports fixed, proportional-values, and parent-based-values.
CustomContainer and CustomItem Extend FlexBoxContainerKind and FlexBoxItemKind respectively
let container = self.addSubView(CustomContainer(frame.size.w,frame.size.h,.flexStart,.flexStart))/*Create FlexBoxContainer*/
container.flexBoxItems = [1,1,1,3].enumerated().map{ (i,grow) in
return container.addSubView(CustomItem(80, 80, "item-" + i.string, grow, nil,i.string))
}
container.flex()/*init layout distribution*/
- Flexible is a protocol which views must adhere to. Basically must have settable/gettable size and position
- FlexBoxItemKind If you want items to flex, then the items must adhere to this protocol
- FlexBoxContainerKind If you want flex items, then the container must adhere to this protocol
- FlexBoxContainer Holds the FlexItems and flex props that these should adhere to
- FlexBoxItem Has a ref to the Flexible instance, and individual flex props that apply
You can implement FlexBoxItemKind and FlexBoxContainerKind
If you can add variables to the class you can implement the FlexBoxItemKind and FlexBoxContainerKind
struct CustomItem:NSImage,FlexBoxItemKind{
/*create vars for initRect,grow,shrink,basis*/
}
struct CustomContainer:NSView,FlexBoxContainerKind{
/*create vars for rect,flexBoxItems,justifyContent,alignItems*/
}
Or you can extend classes with the Flexible protocol and then decorate with FlexBoxItem and FlexBoxContainer
extension NSImage:Felxible{
var flexSize {/*add getter and setter here*/}
var flexPoint{/*add getter and setter here*/}
}
- Implementing min max support
- Implementing shrink
- Interactive resize-demo
- Overflow support
- Add protocols to support FlexBox w/o decoration
- Column support (FlexBoxContainer it self must be able to flex I think)
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://cssreference.io/flexbox/
https://yoksel.github.io/flex-cheatsheet/#flex-grow
https://chriswrightdesign.com/experiments/flexbox-adventures/