CSS3弹性盒子Flex

基础知识和术语

原文链接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

父级（flex容器）的属性

＃显示

这定义了一个flex容器; 内联或块取决于给定的值。它为所有直接的孩子提供了一个弹性环境。

.container {
  display: flex; /* or inline-flex */ }

请注意，CSS列对flex容器没有影响。

＃flex-direction

这建立了主轴，从而定义了柔性物品放置在柔性容器中的方向。Flexbox是（除了可选包装）单向布局概念。将flex项目视为主要布置在水平行或垂直列中。

.container {
  flex-direction: row | row-reverse | column | column-reverse; }

• row（默认）：从左到右在ltr; 从右到左rtl
• row-reverse：从右到左ltr; 从左到右在rtl
• column：相同row但从上到下
• column-reverse：相同row-reverse但从下到上

＃flex-wrap

默认情况下，flex项目都将尝试适合一行。你可以改变它，并允许项目根据需要用这个属性进行包装。

.container{
  flex-wrap: nowrap | wrap | wrap-reverse; }

• nowrap （默认）：所有弹性项目将在一行上
• wrap：flex项目将从上到下包装成多行。
• wrap-reverse：flex项目将从下到上包装成多行。

＃flex-flow（适用于：父Flex容器元素）

这是一个简写flex-direction和flex-wrap属性，它们一起定义了柔性容器的主轴和交叉轴。默认是row nowrap。

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

＃justify-content

这定义了沿主轴的对齐。当一条线上的所有弹性物品都不灵活或灵活但达到其最大尺寸时，它有助于分配剩余空间。当物品溢出时，它也对物品的对齐进行控制。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; }

• flex-start （默认）：项目打包到起始行
• flex-end：项目被打包到结束行
• center：物品沿着这条线居中
• space-between：项目均匀分布在行中; 第一项是在起始行，最后一行是最后一行
• space-around：物品均匀分布在线上，周围有相同的空间。请注意，视觉上空间不相等，因为所有物品在两侧都有相同的空间。第一个项目将在容器边缘有一个空间单位，但下一个项目之间有两个空间单元，因为下一个项目有其自己的间距。
• space-evenly：项目是分布式的，以便任何两个项目之间的间距（以及到边缘的空间）是相等的。

＃align-items

这定义了flex项目沿当前行的横轴放置的默认行为。把它看作是justify-content横轴（垂直于主轴）的版本。

.container {
  align-items: flex-start | flex-end | center | baseline | stretch; }

• flex-start：项目的跨起始边缘边缘放置在交叉起始线上
• flex-end：物品的交叉边缘边缘放置在交叉线上
• center：项目以交叉轴为中心
• baseline：项目对齐，比如他们的基线对齐
• stretch （默认）：拉伸填充容器（仍然尊重最小宽度/最大宽度）

＃align-content

当横轴上有额外的空间时，这会将柔性容器的线justify-content对齐，类似于如何在主轴内对齐单个项目。

注意：只有一行flex项目时，此属性不起作用。

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

• flex-start：将行打包到容器的起始处
• flex-end：将行打包到容器的末端
• center：包装在容器中心的线条
• space-between：线条均匀分布; 第一行是容器的开始，而最后一行是末尾
• space-around：在每条线周围均匀分布均匀空间的线
• stretch （默认）：线拉伸占据剩余空间

 

 

children的属性
（弹性项目）

＃order

默认情况下，Flex项目按源代码顺序排列。但是，该order属性控制它们出现在柔性容器中的顺序。

.item {
  order: <integer>; /* default is 0 */ }

＃flex-grow

这定义了Flex项目在必要时增长的能力。它接受作为比例的无单位价值。它规定了该项目应该占用的柔性容器内的可用空间量。

如果所有项目都flex-grow设置为1，则容器中剩余的空间将平均分配给所有孩子。如果其中一个孩子的值为2，剩余空间将占用其他空间的两倍（或至少会尝试）。

.item {
  flex-grow: <number>; /* default 0 */ }

负数无效。

＃flex-shrink

这定义了Flex项目在必要时收缩的能力。

.item {
  flex-shrink: <number>; /* default 1 */ }

负数无效。

＃flex-basis

这将在分配剩余空间之前定义元素的默认大小。它可以是一个长度（例如20％，5rem等）或关键字。该auto关键字的意思是“看看我的宽度或高度属性”（暂时由main-size关键字完成，直到弃用）。该content关键字的意思是“它根据项目的内容大小” -此关键字不能很好地支持呢，所以很难进行测试，并更难知道它的兄弟max-content，min-content和fit-content做。

.item {
  flex-basis: <length> | auto; /* default auto */ }

如果设置为0，则不会考虑内容的额外空间。如果设置为auto，多余空间将根据其flex-grow值分配。

＃flex

这是速记flex-grow, flex-shrink和flex-basis组合。第二个和第三个参数（flex-shrink和flex-basis）是可选的。默认是0 1 auto。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

建议您使用此速记属性，而不是设置单个属性。简而言之，智能地设置其他值。

＃align-self

这允许align-items为各个弹性项目覆盖默认对齐方式（或由其指定的对齐方式）。

请参阅align-items说明以了解可用值。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch; }

请注意float，clear并且vertical-align对Flex项目没有影响。（无效！！）