跳至主要内容

一劳永逸的搞定 flex 布局

原文链接

flex 基本概念

使用 flex 布局首先要设置父容器 display: flex，然后再设置 justify-content: center实现水平居中，最后设置 align-items: center实现垂直居中。
#dad {
    display: flex;
    justify-content: center;
    align-items: center
}


就是这么简单，大功告成。等等，好像哪里不对，justify-content和 align-items是啥？哪里可以看出横向、竖向的语义？是的，flex 的确没有那么简单，这就要从两个基本概念说起了。


说来也不难，flex 的核心的概念就是 容器和 轴。容器包括外层的 父容器和内层的 子容器，轴包括 主轴和 交叉轴，可以说 flex 布局的全部特性都构建在这两个概念上。flex 布局涉及到 12 个 CSS 属性（不含 display: flex），其中父容器、子容器各 6 个。不过常用的属性只有 4 个，父容器、子容器各 2 个，我们就先从常用的说起吧。

1. 容器

容器具有这样的特点：父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准。


1.1 父容器

  • 设置子容器沿主轴排列：justify-content
justify-content属性用于定义如何沿着主轴方向排列子容器。


flex-start：起始端对齐


flex-end：末尾段对齐


center：居中对齐


space-around：子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。


space-between：子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切。


  • 设置子容器如何沿交叉轴排列：align-items
    align-items属性用于定义如何沿着交叉轴方向分配子容器的间距。


flex-start：起始端对齐


flex-end：末尾段对齐


center：居中对齐


baseline：基线对齐，这里的 baseline默认是指首行文字，即 first baseline，所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。


stretch：子容器沿交叉轴方向的尺寸拉伸至与父容器一致。


1.2 子容器

  • 在主轴上如何伸缩：flex


子容器是有弹性的（flex 即弹性），它们会自动填充剩余空间，子容器的伸缩比例由 flex属性确定。
flex的值可以是无单位数字（如：1, 2, 3），也可以是有单位数字（如：15px，30px，60px），还可以是 none关键字。子容器会按照 flex定义的尺寸比例自动伸缩，如果取值为 none则不伸缩。
虽然 flex是多个属性的缩写，允许 1 - 3 个值连用，但通常用 1 个值就可以满足需求，它的全部写法可参考下图。


  • 单独设置子容器如何沿交叉轴排列：align-self


每个子容器也可以单独定义沿交叉轴排列的方式，此属性的可选值与父容器 align-items属性完全一致，如果两者同时设置则以子容器的 align-self属性为准。
flex-start：起始端对齐


flex-end：末尾段对齐


center：居中对齐


baseline：基线对齐


stretch：拉伸对齐


2. 轴

如图所示，轴包括 主轴和 交叉轴，我们知道 justify-content属性决定子容器沿主轴的排列方式，align-items属性决定子容器沿着交叉轴的排列方式。那么轴本身又是怎样确定的呢？在 flex 布局中，flex-direction属性决定主轴的方向，交叉轴的方向由主轴确定。


  • 主轴
主轴的起始端由 flex-start表示，末尾段由 flex-end表示。不同的主轴方向对应的起始端、末尾段的位置也不相同。
向右：flex-direction: row


向下：flex-direction: column


向左：flex-direction: row-reverse


向上：flex-direction: column-reverse


  • 交叉轴
    主轴沿逆时针方向旋转 90° 就得到了交叉轴，交叉轴的起始端和末尾段也由 flex-start和 flex-end表示。
    上面介绍的几项属性是 flex 布局中最常用到的部分，一般来说可以满足大多数需求，如果实现复杂的布局还需要深入了解更多的属性。

flex 进阶概念

1. 父容器

  • 设置换行方式：flex-wrap
    决定子容器是否换行排列，不但可以顺序换行而且支持逆序换行。


nowrap：不换行


wrap：换行


wrap-reverse：逆序换行
逆序换行是指沿着交叉轴的反方向换行。


  • 轴向与换行组合设置：flex-flow
    flow 即流向，也就是子容器沿着哪个方向流动，流动到终点是否允许换行，比如 flex-flow: row wrap，flex-flow是一个复合属性，相当于 flex-direction 与 flex-wrap 的组合，可选的取值如下：
    • row、column等，可单独设置主轴方向
    • wrap、nowrap等，可单独设置换行方式
    • row nowrap、column wrap等，也可两者同时设置
  • 多行沿交叉轴对齐：align-content
    当子容器多行排列时，设置行与行之间的对齐方式。


flex-start：起始端对齐


flex-end：末尾段对齐


center：居中对齐


space-around：等边距均匀分布


space-between：等间距均匀分布


stretch：拉伸对齐


2. 子容器

  • 设置基准大小：flex-basis
    flex-basis表示在不伸缩的情况下子容器的原始尺寸。主轴为横向时代表宽度，主轴为纵向时代表高度。




  • 设置扩展比例：flex-grow
    子容器弹性伸展的比例。如图，剩余空间按 1:2 的比例分配给子容器。




  • 设置收缩比例：flex-shrink
    子容器弹性收缩的比例。如图，超出的部分按 1:2 的比例从给子容器中减去。




  • 设置排列顺序：order
    改变子容器的排列顺序，覆盖 HTML 代码中的顺序，默认值为 0，可以为负值，数值越小排列越靠前。


以上就是 flex 布局的全部属性，一共 12 个，父容器、子容器各 6 个，可以随时通过下图进行回顾。


参考资料：
标签：

评论

发表评论

此博客中的热门博文

Resolving errSecInternalComponent errors during code signing

原文链接 One code signing issue I commonly see, both here on DevForums and in my Day Job™ with DTS, is that the codesign command fails with errSecInternalComponent. This issue crops up in a wide variety of circumstances and the correct fix depends on the specific problem. This post is my attempt to clarify the potential causes of this error and help folks resolve it. If you have any questions or comments about this, please start a new thread, tagging it with Code Signing so that I see it. Share and Enjoy — Quinn “The Eskimo!” @ Developer Technical Support @ Apple let myEmail = "eskimo" + "1" + "@" + "apple.com" Resolving errSecInternalComponent errors during code signing In some circumstances the codesign command might fail with the error errSecInternalComponent. For example: % codesign -s "Apple Development" "MyTrue" MyTrue: errSecInternalComponent This typically affects folks who are signing code in a nonstandard environm...
发表评论
阅读全文

iOS：检测使用VPN或Proxy

参考链接： https://www.jianshu.com/p/c3b950dbf86a https://gist.github.com/PramodJoshi/4faad4c91f7dcb4eb9b06be8390c01db http://noodlecode.net/2018/04/check-if-ios-app-is-connected-to-vpn 第一种方法 需要导入框架CFNetwork 然后，这个方法是mrc的：需要添加-fno-objc-arc的flag 代码如下： + ( BOOL )getProxyStatus { NSDictionary *proxySettings = NSMakeCollectable ([( NSDictionary *) CFNetworkCopySystemProxySettings () autorelease]); NSArray *proxies = NSMakeCollectable ([( NSArray *) CFNetworkCopyProxiesForURL (( CFURLRef )[ NSURL URLWithString: @"http://www.google.com" ], ( CFDictionaryRef )proxySettings) autorelease]); NSDictionary *settings = [proxies objectAtIndex: 0 ]; NSLog ( @"host=%@" , [settings objectForKey:( NSString *)kCFProxyHostNameKey]); NSLog ( @"port=%@" , [settings objectForKey:( NSString *)kCFProxyPortNumberKey]); NSLog ( @"type=%@" , [settings objectForKey:( NSString *)kCFProxyTypeKey]); if ([[settings object...
发表评论
阅读全文

去广告DNS设置，国内ADGuard DNS方案，手机电脑iOS去广告，保护隐私

 原文链接 之前分享过使用mac系统搭建adguard home，这几个月用下来零零散散基本上也被弃用了。主要原因是因为需要保持电脑一直开机。但是我的电脑是笔记本，存在移动各个地域的情况，也就是说只能够屏蔽电脑自身，对于手机而言不太现实。今天偶然发现dnspod推出了高级版的公共解析。dnspod背靠腾讯云，肯定是合法合规的公共解析服务，这个高级版用起来不错。 国内自己搭建解析服务是违法行为，所以这也是为什么使用dnspod的原因。 后台截图 开始使用 首先我们先进入dnspod的公共解析页面，点击开始使用。 专业版公共解析 dnspod会提供几种预设，我们选择「开发者」即可 开发者 然后你就成功的申请到自己个人使用的dns了！ 更新拦截规则 我们可以将常见的广告过滤规则加入到dns中。我们在顶部选项卡中选择「拦截规则」。 拦截规则设置 打开adguard adguard 绑定iOS设备 推荐使用描述文件的方式，删除配置时删除描述文件即可。 描述文件 绑定macOS 推荐使用描述文件的方式，删除配置时删除描述文件即可。 描述文件 mac需要在「系统偏好设置」的「网络」中查看是否正在运行。 代理 如果没有运行需要点击「···」来启动服务。 启动服务 绑定路由器 找到自己路由器的DHCP设置，修改dns，然后记得绑定自己的ip。 修改dns 绑定ip 费用 目前有300万次/月的免费额度，但没有超出之后的价格。300万次一个人比较难用完，可以放心使用。 我个人使用iOS设备两台、智能家居、电脑两台，日均请求数大致2万/日。 判断是否搭建成功 可以通过查看日志的方式，日志大概有半小时到一小时的延迟，请耐心等待。
发表评论
阅读全文