内容简介:本人能力尚缺,经验稍浅,翻译中存在的不足之处望大家批评指正,以便及时更正。邮箱:440981b05j0.cdb@sina.cnGithub:
本人能力尚缺,经验稍浅,翻译中存在的不足之处望大家批评指正,以便及时更正。
邮箱:440981b05j0.cdb@sina.cn
Github: Duggud
文章描述的是CSS flexbox布局综合指南。该完全指南解释了有关flexbox的所有内容,重点介绍了父元素(flex容器)和子元素(flex项目)的所有可能的不同属性。它还包括历史记录,演示,模式和浏览器支持图表。
背景
Flexbox布局(灵活盒子)模块( 截至2017年10月的W3C候选推荐标准 )旨在提供一种更有效的方式来布置,对齐和分配容器中项目之间的空间,即使它们的大小未知或是动态变化的( 这也是“flex”这个词的由来)。
Flex布局的主要思想是使容器能够改变其项目的宽度、高度以及顺序,以最好地填充可用空间(主要是为了适应所有类型的显示设备和屏幕尺寸)。Flex容器扩展项目以填充可用空间,或缩小它们以防止溢出。
最重要的是,与常规布局(基于垂直的块和基于水平的内联块)相反,flexbox布局与方向无关。虽然前者适用于页面,但它缺乏灵活性来支持大型或复杂的应用程序(特别是在方向更改,调整大小,拉伸,缩小等方面)。
注意:Flexbox布局最适合应用程序的组件和小规模布局,而Grid布局则适用于更大规模的布局。
基础与术语
父的属性(弹性容器)
子的属性(弹性项目)display
这定义了一个flex容器;内联或块取决于给定的值。它为所有直接子项目提供了flex上下文。
<!--css--> .container { display: flex; /* or inline-flex */ } 复制代码
注意: CSS列对flex容器没有影响。
order
默认情况下,flex项目按源顺序排列。但是, order属性可以控制它们在Flex容器中的显示顺序。
flex-direction
这将建立主轴(main-axis),从而定义Flex项目放置在Flex容器中的方向。除了可选wrapping外,flexbox采用单向布局概念。可以将flex项看作是水平行或垂直列的布局。
<!--css--> .container { flex-direction: row | row-reverse | column | column-reverse; } 复制代码
- row (默认): ltr 表示从左至右; rtl 表示从右至左;
- row-reverse (反向行: rtl 表示从左至右; ltr 表示从右至左;
- column : 与 row 一样,只是方向从上至下;
- column reserse : 与 row reserse 一样,只是方向从下至上。
flex-wrap
默认情况下,flex项目都会尝试在一行中自适应布局。你可以根据需要利用此属性更改它并允许项目进行换行。
<!--css--> .container{ flex-wrap: nowrap | wrap | wrap-reverse; } 复制代码
- nowrap : 所有的flex项目会在同一行;
- wrap : flex项目将从上到下被换行成多行;
- wrap-reverse :flex项目将从下到上被换行成多行;
更多可视化 flex-wrap 例程可访问 visual demos of flex-wrap here
flex-flow(适用于父flex元素)
这是一个简写的 flex-direction 和 flex-wrap 属性,它们共同定义了flex容器的主轴(main-axis)和交叉轴(across-axis)。默认值为 row nowrap 。
<!--css--> flex-flow: <‘flex-direction’> || <‘flex-wrap’> 复制代码
flex-grow
这定义了flex项在必要时增长的能力。可取无单位值作为比例值。它规定了项目应该占用flex容器内可用空间的数量。如果所有项目都将 flex-grow设置为1,则容器中的剩余空间将平均分配给所有子项目。如果其中一个子项目的值设为2,那么将占用两倍于其他子项目的空间(或者至少会尝试这样做)。
<!--css--> .item { flex-grow: <number>; /* default 0 */ } 复制代码
flex-grow 设置为负值时无效。
flex-shrink
这定义了flex项在必要时收缩的能力。
<!--css--> .item { flex-shrink: <number>; /* default 1 */ } 复制代码
flex-shrink 设置为负值时无效。
flex-basis
这定义了剩余空间分布之前元素的默认大小。它可以是长度(例如20%,5rem等)或关键字。 auto 关键字的意思是“查看我的宽度或高度属性”(这是由 main-size 关键字临时完成的,直到弃用)。 content 关键字的意思是“根据项目的内容调整大小”,这个关键字还没有得到很好的支持,因此很难测试它,也很难知道它的兄弟属性 max-content 、 min-content 和 fit-content 的功能。
<!--css--> .item { flex-basis: <length> | auto; /* default auto */ } 复制代码
如果设置为0,则不考虑内容周围的额外空间。如果设置为auto,则根据其弹性增长值分布额外的空间。点击查看示例图表。
flex
这是 flex-grow 、 flex-shrink 和 flex-basis 组合的简写。第二个和第三个参数( flex-shrink 和 flex-basis )是可选的。默认值是 0 1 auto 。
<!--css--> .item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } 复制代码
建议你使用这个简写属性,而不是设置各个独立属性。简写可以智能地设置其他值。
justify-content
这定义了沿主轴的对齐方式。当一行中的所有flex项无论是不灵活的,或者是灵活的但已经达到自身最大值时,它可以帮助分配剩余的可用空间。此外,当flex项目溢出行时,它还对对齐方式进行了一些控制。
<!--css--> .container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; } 复制代码
- flex-start : flex项目在行开始处紧密排列;
- flex-end :flex项目在行结尾处紧密排列;
- center :flex项目行居中排列;
- space-between :flex项目均匀分布;第一项在起始行,最后一项在结束行;
- space-around :flex项目在行中均匀分布,项目周围的空间相等。注意,咋一看,空间是不相等的,因为 所有的项在两边都有相等的空间 。第一项在容器边缘有一个单位的空间,但是与下一项之间有两个单位的空间,因为下一项有它自身空间。
align-self
这允许为单个flex项目重置默认的对齐方式(或由align-items指定的对齐方式)。
请参阅 align-items 说明以了解可用的值。
<!--css--> .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } 复制代码
注意: float 、 clear 和 vertical-align 对flex项没有影响。
align-items
这定义了flex项在当前行的cross- axis轴(c垂直于main-axis轴)上布局的默认行为。可以将其视为justify-content作用于cross- axis轴的版本。
<!--css--> .container { align-items: stretch | flex-start | flex-end | center | baseline; } 复制代码
- stretch (default): 拉伸以填充容器(仍然遵循最小宽度/最大宽度)
- flex-start : flex项目的横轴方向起始边距(margin)边缘位于横轴起始行处;
- flex-end :flex项目的横轴方向结束边距(margin)边缘位于横轴结尾行处;
- center : flex项目沿横轴居中对齐;
- baseline : flex项目根据 baseline 基线对齐;
align-content
当cross-axis轴存在额外空间时,这会对flex项目沿cross-axis轴进行行对齐,类似于 justify-content 沿main-axis轴对flex项目进行对齐。
注意:当只有flex项目只有一行时,此属性不起作用。
<!--css--> .container { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } 复制代码
- flex-start : 行于flex容器开始处紧密排列;
- flex-end : 行于flex容器末尾处紧密排列;
- center : 行于flex容器居中紧密排列;
- space-between : 行均匀分布;第一行位于容器的开末尾头,而最后一行位于容器的末尾;
- space-around :行均匀分布,每行周围的空间相等;
- stretch (default): 行伸展以占据剩余空间。
例子
让我们以一个非常简单的例子开始,解决一个几乎每天都会遇到的问题:完美居中。如果您使用flexbox,它将变得不能更简单。
<!--css--> .parent { display: flex; height: 300px; /* Or whatever */ } .child { width: 100px; /* Or whatever */ height: 100px; /* Or whatever */ margin: auto; /* Magic! */ } 复制代码
这取决于flex容器中设置为“ auto ”的 margin 会吸收额外的空间。因此,设置垂直边距为 auto 将使项目完美地在两个轴上居中排列。
现在让我们添加更多的属性。考虑一个包含6个项目的列表,它们的尺寸都是固定的,但是可以自动调整大小。我们希望它们均匀地分布在横轴上,以便在调整浏览器大小时一切正常(不使用媒体查询!)。
<!--css--> .flex-container { /* We first create a flex layout context */ display: flex; /* Then we define the flow direction and if we allow the items to wrap * Remember this is the same as: * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /* Then we define how is distributed the remaining space */ justify-content: space-around; } 复制代码
Done.其他都只是一些样式问题。下面是一个测试例程。请访问CodePen,试着调整窗口大小,看看会发生什么。
我们试下别的例子。想象一下,我们的网站顶部有一个靠右对齐的导航,但我们希望它中型屏幕上居中,在小型设备上则呈现为单列导航。这也足够简单。
<!--css--> /* Large */ .navigation { display: flex; flex-flow: row wrap; /* This aligns items to the end line on main-axis */ justify-content: flex-end; } /* Medium screens */ @media all and (max-width: 800px) { .navigation { /* When on medium sized screens, we center it by evenly distributing empty space around items */ justify-content: space-around; } } /* Small screens */ @media all and (max-width: 500px) { .navigation { /* On small screens, we are no longer using row direction but column */ flex-direction: column; } } 复制代码
让我们使用flex项目的灵活性来做更好的实现!比如移动优先的3列布局,具有全宽度的页眉和页脚。与源顺序无关。
<!--css--> .wrapper { display: flex; flex-flow: row wrap; } /* We tell all items to be 100% width, via flex-basis */ .wrapper > * { flex: 1 100%; } /* We rely on source order for mobile-first approach * in this case: * 1. header * 2. article * 3. aside 1 * 4. aside 2 * 5. footer */ /* Medium screens */ @media all and (min-width: 600px) { /* We tell both sidebars to share a row */ .aside { flex: 1 auto; } } /* Large screens */ @media all and (min-width: 800px) { /* We invert order of first sidebar and main * And tell the main element to take twice as much width as the other two sidebars */ .main { flex: 2 0px; } .aside-1 { order: 1; } .main { order: 2; } .aside-2 { order: 3; } .footer { order: 4; } } 复制代码
带前缀的Flexbox
Flexbox需要一些供应商的前缀来支持尽可能多的浏览器。它不仅包括带有供应商前缀的前置属性,实际上还有完全不同的属性和值名称。这是因为随着时间的推移,Flexbox规范已经发生了变化,创建了 "old", "tweener", and "new" 版本。
或许处理这个问题的最好方法是使用新的(也是最终的)语法,并通过Autoprefixer运行CSS, Autoprefixer可以很好地处理回退。
另外,这里有一个Sass @mixin来帮助添加一些前缀,这也让你知晓需要处理的事情:
<!--scss--> @mixin flexbox() { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } @mixin flex($values) { -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; } @mixin order($val) { -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; } .wrapper { @include flexbox(); } .item { @include flex(1 200px); @include order(2); } 复制代码
相关属性
其他资源
- Flexbox in the CSS specifications
- Flexbox at MDN
- Flexbox at Opera
- Diving into Flexbox by Bocoup
- Mixing syntaxes for best browser support on CSS-Tricks
- Flexbox by Raphael Goetter (FR)
- Flexplorer by Bennett Feely
Bugs
Flexbox当然也有bugs。我见过的最好bugs收集是Philip Walton和Greg Whitworth的 Flexbugs 。它是开源的,你可以跟踪所有的数据,所以我认为最好查看一下。
以上所述就是小编给大家介绍的《【译】Flexbox完全指南》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Math Adventures with Python
Peter Farrell / No Starch Press / 2018-11-13 / GBP 24.99
Learn math by getting creative with code! Use the Python programming language to transform learning high school-level math topics like algebra, geometry, trigonometry, and calculus! In Math Adventu......一起来看看 《Math Adventures with Python》 这本书的介绍吧!
RGB转16进制工具
RGB HEX 互转工具
SHA 加密
SHA 加密工具