| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
eetv6430
8年前发布

iOS开源:CSSLayout - Flexbox 布局

   <h2>FlebBoxLayout</h2>    <h2>Overview</h2>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/96d358a6ca68fdb39bb5a075f9d5bf31.gif"></p>    <h2>Example</h2>    <p>To run the example project, clone the repo.</p>    <h2>Installation</h2>    <p>FBLayout is available through <a href="/misc/goto?guid=4958869288453138992" rel="nofollow,noindex">CocoaPods</a> . To install it, simply add the following line to your Podfile:</p>    <pre>  pod "FlexBoxLayout"</pre>    <h2>Usage</h2>    <p>These are some flexbox introduce <a href="/misc/goto?guid=4958970342053652120" rel="nofollow,noindex">FlexBox(Chinese)</a> , <a href="/misc/goto?guid=4958874471790150347" rel="nofollow,noindex">A Complete Guide to Flexbox</a> and <a href="/misc/goto?guid=4958961193533886958" rel="nofollow,noindex">A Visual Guide to CSS3 Flexbox Properties</a> 。</p>    <h3>Flexbox container properties</h3>    <p>flex-direction</p>    <p>This property specifies how flex items are laid out in the flex container, by setting the direction of the flex container’s main axis. They can be laid out in two main directions, like rows horizontally or like columns vertically.</p>    <pre>  FBFlexDirectionRow;</pre>    <p><img src="https://simg.open-open.com/show/202478bf364f2eb47163cf8bc6f02a56.jpg"></p>    <pre>  FBFlexDirectionRowReverse;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/df4ba4a4bd033de6eca1dc3467354096.jpg"></p>    <pre>  FBFlexDirectionColumn;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/ae420fe5c225fc39169171f58249ce77.jpg"></p>    <pre>  FBFlexDirectionColumnReverse;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/cbdcbade72e3bb388b05b0bf16d2a8f3.jpg"></p>    <p>flex-wrap</p>    <p>The initial flexbox concept is the container to set its items in one single line. The flex-wrap property controls if the flex container lay out its items in single or multiple lines, and the direction the new lines are stacked in.Supports only 'nowrap' (which is the default) or 'wrap'</p>    <pre>  FBWrapNoWrap;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/45467867776983d1a1aea870d9764ee9.jpg"></p>    <pre>  FBWrapWrap;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/4c81495bedb777a606572430d1bf44ac.jpg"></p>    <p>justify-content</p>    <p>The justify-content property aligns flex items along the main axis of the current line of the flex container. It helps distribute left free space when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.</p>    <pre>  FBJustifyFlexStart;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/20185f5e397729d6838dce876d2496c5.jpg"></p>    <pre>  FBJustifyCenter;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/59f3b9624f6e5f56ea2f865e00c38054.jpg"></p>    <pre>  FBJustifyFlexEnd</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/b58e49e14dec0998d1ad3debfbc3ec7b.jpg"></p>    <pre>  FBJustifySpaceBetween;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/11d01509cd1d06b1f97541e0f2d09322.jpg"></p>    <pre>  FBJustifySpaceAround;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/dacff1804349f7978992efd1dd48cbb1.jpg"></p>    <p>align-items</p>    <p>Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. This property sets the default alignment for all flex items, including the anonymous ones.</p>    <pre>  FBAlignFlexStart;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/b18802a51abc880805d9bf5e1cd17f1d.jpg"></p>    <pre>  FBAlignCenter;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/1109b60b32838f34be65f5c2514bc439.jpg"></p>    <pre>  FBAlignFlexEnd;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/7dfbeffa2f1e31eed2a94a811fae9a65.jpg"></p>    <pre>  FBAlignStretch;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/8cff2ec017354f5f352cea721c4d2b93.jpg"></p>    <p>align-content</p>    <p>The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.</p>    <pre>  FBAlignFlexStart;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/fb243e59663671068934acb954dcb1f6.jpg"></p>    <pre>  FBAlignCenter;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/40b878c8567ee6c4180bbec6bd68ef1c.jpg"></p>    <pre>  FBAlignFlexEnd;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/ba0abc4f737dd590e9b3cb4277b9ad8f.jpg"></p>    <pre>  FBAlignStretch;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/0ace2ca4e1203be1efd0fe3a2b499e7e.jpg"></p>    <h3>Flexbox item properties</h3>    <p>flex-grow</p>    <p>This property specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed.</p>    <pre>  FlexGrow;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/1210cc24a004ee92878e068450bc1611.jpg"> <img src="https://simg.open-open.com/show/5baaedef8d910c8b21fd5b739d3d3e43.jpg"></p>    <p>flex-shrink</p>    <p>The flex-shrink specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.</p>    <p>By default all flex items can be shrunk, but if we set it to 0 (don’t shrink) they will maintain the original size</p>    <pre>  FlexShrink;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/4d69bdb818680f94fbd1968eb66786ab.jpg"></p>    <p>flex-basis</p>    <p>This property takes the same values as the width and height properties, and specifies the initial main size of the flex item, before free space is distributed according to the flex factors.</p>    <pre>  FlexBasis:350;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/60133f8fa5bff488fc436b047dfe3b31.jpg"></p>    <p>align-self</p>    <p>This align-self property allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. Refer to align-items explanation for flex container to understand the available values.</p>    <pre>  FBAlignFlexStart;</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/4b2487d2a99276158c5cac1ae2b1d705.jpg"></p>    <h3>UIView + FBLayout Usage</h3>    <pre>  UIScrollView *contentView = [UIScrollView new];    contentView.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height-44);    [self.view addSubview:contentView];        UIView *child1 = [UIView new];    child1.backgroundColor = [UIColor blueColor];      [child1 fb_makeLayout:^(FBLayout *layout) {      layout.width.height.equalTo(@100);    }];      UIView *child2 = [UIView new];    child2.backgroundColor = [UIColor greenColor];    [child2 fb_makeLayout:^(FBLayout *layout) {      layout.equalTo(child1);    }];        UILabel *child3 = [UILabel new];    child3.numberOfLines = 0;    child3.backgroundColor = [UIColor yellowColor];    [child3 fb_wrapContent];    [child3 setAttributedText:[[NSAttributedString alloc] initWithString:@"testfdsfdsfdsfdsfdsfdsafdsafdsafasdkkk" attributes:@{NSFontAttributeName :[UIFont systemFontOfSize:18]}] ];      [contentView addSubview:child1];    [contentView addSubview:child2];    [contentView addSubview:child3];        FBLayoutDiv *div1 = [FBLayoutDiv layoutDivWithFlexDirection:FBFlexDirectionColumn                                                   justifyContent:FBJustifySpaceBetween                                                       alignItems:FBAlignCenter                                                         children:@[child1, child2,child3]];          [div1 fb_makeLayout:^(FBLayout *layout) {      layout.margin.equalToEdgeInsets(UIEdgeInsetsMake(20, 0, 0, 0));      layout.width.equalTo(@(150));    }];        UIView *child5 = [UIView new];    child5.backgroundColor = [UIColor blueColor];      child5.CSSStyles = @{FBWidthAttributeName:@(50),                         FBHeightAttributeName:@(50),                         FBMarginAttributeName:[NSValue valueWithUIEdgeInsets:UIEdgeInsetsMake(0, 0, 10, 0)],                         FBFlexGrowAttributeName:@1.0};      UIView *child6 = [UIView new];    child6.backgroundColor = [UIColor greenColor];    [child6 fb_makeLayout:^(FBLayout *layout) {      layout.equalTo(child5);      layout.flexGrow.equalTo(@(2.0));       layout.margin.equalToEdgeInsets(UIEdgeInsetsMake(10, 10, 10, 10));    }];        UIView *child7 = [UIView new];    child7.backgroundColor = [UIColor yellowColor];    [child7 fb_makeLayout:^(FBLayout *layout) {      layout.equalTo(child5);    }];      UIView *child8 = [UIView new];    child8.backgroundColor = [UIColor blackColor];      [child8 fb_makeLayout:^(FBLayout *layout) {      layout.equalTo(child5);    }];      FBLayoutDiv *div2 =[FBLayoutDiv layoutDivWithFlexDirection:FBFlexDirectionColumn                                                  justifyContent:FBJustifySpaceAround                                                      alignItems:FBAlignCenter                                                        children:@[child5,child6,child7,child8]];    [div2 fb_makeLayout:^(FBLayout *layout) {      layout.margin.equalToEdgeInsets(UIEdgeInsetsMake(20, 0, 0, 0));      layout.width.equalTo(@(150));    }];      [contentView addSubview:child5];    [contentView addSubview:child6];    [contentView addSubview:child7];    [contentView addSubview:child8];      FBLayoutDiv *root = [FBLayoutDiv layoutDivWithFlexDirection:FBFlexDirectionRow                                                   justifyContent:FBJustifySpaceAround                                                       alignItems:FBAlignCenter                                                         children:@[div1,div2]];      contentView.fb_contentDiv = root;    [root fb_asyApplyLayoutWithSize:[UIScreen mainScreen].bounds.size];</pre>    <h3>FBLayoutDiv</h3>    <p>FBLayoutDiv is virtual view, split view to a different area, avoid too much view.</p>    <pre>  FBLayoutDiv *div1 = [FBLayoutDiv layoutDivWithFlexDirection:FBFlexDirectionColumn                                                 justifyContent:FBJustifySpaceBetween                                                     alignItems:FBAlignCenter                                                       children:@[child1, child2,child3]];    FBLayoutDiv *div2 =[FBLayoutDiv layoutDivWithFlexDirection:FBFlexDirectionColumn                                                justifyContent:FBJustifySpaceAround                                                    alignItems:FBAlignCenter                                                      children:@[child5,child6,child7,child8]];  root.fb_children = @[div1,div2];</pre>    <h3>UITableView+FBLayout</h3>    <p>UITableView+FBLayout is category of UITableView. It support auto cell height of FBLayout and easy use.</p>    <pre>  [self.tableView fb_setCellContnetViewBlockForIndexPath:^UIView *(NSIndexPath *indexPath) {      return [[FBFeedView alloc]initWithModel:weakSelf.sections[indexPath.section][indexPath.row]];    }];      ....      - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {      return [self.tableView fb_heightForIndexPath:indexPath];    }      - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {      return [self.tableView fb_cellForIndexPath:indexPath];    }</pre>    <h3>UIScrollView+FBLayout</h3>    <p>It support auto content size</p>    <pre>  FBLayoutDiv *root = [FBLayoutDiv layoutDivWithFlexDirection:FBFlexDirectionRow                                                   justifyContent:FBJustifySpaceAround                                                       alignItems:FBAlignCenter                                                         children:@[div1,div2]];      contentView.fb_contentDiv = root;</pre>    <h2>Author</h2>    <p>qiang.shen</p>    <h2>License</h2>    <p>FBLayout is available under the MIT license. See the LICENSE file for more info.</p>    <p> </p>    <p> </p>    <p> </p>    
 本文由用户 eetv6430 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1486697053579.html
iOS开发 移动开发 flexbox