Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
flex-box in ComponentKit
Search
X140Yu
January 02, 2018
Programming
2
170
flex-box in ComponentKit
记录一次公司内部的分享
X140Yu
January 02, 2018
Tweet
Share
More Decks by X140Yu
See All by X140Yu
命令行工具安利
x140yu
1
110
Functional Reactive Programming in Swift
x140yu
1
410
Other Decks in Programming
See All in Programming
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
300
Deep Dive into Kotlin Flow
jmatsu
1
340
Cache Me If You Can
ryunen344
2
1.4k
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
860
Testing Trophyは叫ばない
toms74209200
0
880
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
Laravel Boost 超入門
fire_arlo
3
220
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
240
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
RDoc meets YARD
okuramasafumi
4
170
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Docker and Python
trallard
45
3.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
We Have a Design System, Now What?
morganepeng
53
7.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Thoughts on Productivity
jonyablonski
70
4.8k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Producing Creativity
orderedlist
PRO
347
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
How STYLIGHT went responsive
nonsquared
100
5.8k
Transcript
flex-box X140Yu @ Zhihu 2018-01-02
Table of content • basic flex-box concepts • flex-box in
ComponentKit • other layout Components
What is flex-box? • a layout mode • flex "->
flexible • In CK’s world, boxes are components • Defines the relationship between boxes
What can flex-box do • A Live Demo
container & item container item ❌ container item no relationship
direction • vertical • horizontal .direction = .horizontal main axis(主轴)
cross axis (交叉轴)
container struct CKStackLayoutComponentStyle { }; CKStackLayoutDirection direction; CKStackLayoutAlignItems alignItems; CKStackLayoutJustifyContent
justifyContent; CGFloat spacing;
CKStackLayoutDirection direction; typedef NS_ENUM(NSUInteger, CKStackLayoutDirection) { CKStackLayoutDirectionVertical, CKStackLayoutDirectionHorizontal, }; .vertical
.horizontal
container struct CKStackLayoutComponentStyle { }; CKStackLayoutDirection direction; CKStackLayoutAlignItems alignItems; CKStackLayoutJustifyContent
justifyContent; CGFloat spacing;
CGFloat spacing; spacing spacing
container struct CKStackLayoutComponentStyle { }; CKStackLayoutDirection direction; CKStackLayoutAlignItems alignItems; CKStackLayoutJustifyContent
justifyContent; CGFloat spacing;
CKStackLayoutAlignItems alignItems; CKStackLayoutJustifyContent justifyContent; main axis cross axis .direction =
.horizontal justifyContent alignItems
CKStackLayoutJustifyContent justifyContent; typedef NS_ENUM(NSUInteger, CKStackLayoutJustifyContent) { CKStackLayoutJustifyContentStart, CKStackLayoutJustifyContentCenter, CKStackLayoutJustifyContentEnd, };
.start .end .center main axis .direction = .vertical
CKStackLayoutAlignItems alignItems; typedef NS_ENUM(NSUInteger, CKStackLayoutAlignItems) { CKStackLayoutAlignItemsStart, CKStackLayoutAlignItemsEnd, CKStackLayoutAlignItemsCenter, CKStackLayoutAlignItemsStretch,
}; .start .center .end .stretch .direction = .vertical cross axis
<code>
1 2 3 1 2 3 1 2 3 1
2 3
item a.k.a child struct CKStackLayoutComponentChild { CKComponent *component; CGFloat spacingBefore;
CGFloat spacingAfter; BOOL flexGrow; BOOL flexShrink; CKRelativeDimension flexBasis; CKStackLayoutAlignSelf alignSelf; };
1 2 3 struct CKStackLayoutComponentChild { CKComponent *component; CGFloat spacingBefore;
CGFloat spacingAfter; BOOL flexGrow; BOOL flexShrink; CKRelativeDimension flexBasis; CKStackLayoutAlignSelf alignSelf; }; .direction = .vertical
flexShrink 400 200 100 300 600 100 100 200 .flexShrink
= true (length - currentLength) / shrinkCount = shrinkLenght per component (400 - 600) / 2 = -100
flexGrow 175 50 175 .flexGrow = true 400 50 250
100 100 (length - currentLength) / growCount = growLenght per component (400 - 250) / 2 = 75
flexBasis • main-axis only • override height/width • flex(Grow|Shrink) >
flexBasis > (width|height)
alignSelf • same as alignItems but for single item •
cross-axis • default is `auto` • override container’s alignItems property 1 2 3
layout components • CKInsetComponent • CKBackgroundLayoutComponent • CKOverlayLayoutComponent • CKCenterLayoutComponent
• CKRatioLayoutComponent • CKStaticLayoutComponent
CKInsetComponent [CKInsetComponent newWithView:{ [UIView class], {{@selector(setBackgroundColor:), color},} } insets:{20, 30,
20, 30} component:component];
CKOverlayLayoutComponent [CKOverlayLayoutComponent newWithComponent:swiftComponent overlay:maskOverlayComponent]; + "// This component lays out
a single component and then overlays a component on top of it streched to its size
CKBackgroundLayoutComponent [CKBackgroundLayoutComponent newWithComponent:labelComponent background:backgroundComponent]; + Swift Swift "// Lays out
a single child component, then lays out a background component behind it stretched to its size.
CKRatioLayoutComponent [CKRatioLayoutComponent newWithRatio:0.5 size:{} component:imageComponent]; "// ratio = height /
width 100 200
CKStaticLayoutComponent "// A component that positions children at fixed positions.
[CKStaticLayoutComponent newWithChildren:{ { .component = yellowComponent, .position = {100, 200}, }, }]; 100 200
Thanks for watching!