flex

2017-12-13

关于flex相关内容的整理

关于flex主要属性的简单介绍：

https://juejin.im/entry/58aabdf92f301e006c35b9fd

https://juejin.im/entry/58ad046a128fe1006a5795c4

弹性容器(flex container)属性

display

使用flex布局必须设置。

可选值：flex/inline-flex

flex会使容器成为块级元素。inline-flex会使容器成为内联元素。（来自这里）

注：旧语法中值为box，且需要加上对应前缀，移动端若无效果可能为语法支持原因。（来自这里）

flex-direction

设置主轴方向，主轴方向指定了元素的排列方向。默认为row，从左到右。

可选值：row/column/row-reverse/column-reverse

row即为默认值，从左到右。row-reverse相对其反转，即从右到左。

column是从上到下。column-reverse是从下到上。

flex-wrap

设置是否换行。默认为no-wrap，即不换行，当内部元素总长度超过主轴且未设置其他属性时，会对内部元素进行压缩，在同一行/列中显示。

可选值：no-wrap/wrap/wrap-reverse

wrap可使元素向交叉轴方向换行，设置此值时换行方向为：从上到下/从左到右

wrap-reverse换行方向与wrap值时相反，即：从下到上/从右到左

flex-flow

此为flex-direction和flex-wrap的简写属性。

可选值：<flex-direction> || <flex-wrap>

比如：flex-flow: row wrap。也可只设置一个：flex-flow: row

justify-content

设置主轴上元素的对齐方式。默认为flex-start，即从主轴开始方向密集对齐。

可选值：flex-start/flex-end/center/space-between/space-around

各种对齐方式详细可见这里中的动图

align-items

设置单个主轴上，在交叉轴方向元素的对齐方式，对所有元素生效，即独立行上所有元素的对齐方式。默认为stretch。

可选值：flex-start/flex-end/center/stretch/baseline

stretch即向交叉轴方向拉伸至充满，但仅为每一行增加长度相同，最终长度不一定相同。且设置了width/height的元素不会被拉伸。

注：受max-height限制。

各种对齐方式详见可见这里中的动图

align-content

多个主轴时元素在交叉轴方向的对齐方式，即多行时行的对齐方式，只有一行时不起作用。默认为stretch。

可选值：flex-start/flex-end/center/space-between/space-around

stretch为允许行内部元素拉伸，即使align-items: stretch生效。取其他值时align-items: stretch不生效。

space-between为间隔仅在元素之间。

space-around为每个元素两边有相同间隔。

弹性元素(flex items)属性

order

设置元素排序顺序，数值越小越靠前，默认为0。可设置为负数。

flex-grow

设置元素在主轴方向拉伸比例。默认为0，即若有剩余空间也不拉伸。不可设为负值。

当数值不为0且有剩余空间时，无论元素是否设置了width/height，都会被拉伸。若数值相同，则拉伸比例相同；若数值不同，拉伸比例为数值比例。

无论是否设置了width/height，拉伸的表现都是：增加长度的比例与数值比例相同。当没有设置宽度时，元素本身宽度与内容最长宽度相等。

详细可看这里

flex-shrink

设置元素在主轴方向缩小比例。默认为1。不可设为负值。

当数值为0时，即使空间不足，也不进行压缩，元素超出父元素边界，亦即父元素不会被撑大。此时可用flex-wrap: wrap进行换行。

注：需要设置元素本身的width/height。否则若因元素内部内容使元素超出父元素边界，flex-shrink不起作用。

缩小的数值计算较复杂，但大致是以数值的比例对原宽度进行削减。详细可看这里

效果详细可看这里的动图

flex-basis

设置元素在主轴方向上的长度。默认值为auto，即元素原本大小。

flex-basis与主轴方向有关。如当flex-direction为row时，设置的是宽度。当flex-direction为column时，设置的是高度。

注：会覆盖width/height。可被flex-grow拉伸。

详细可看这里的动图

flex

为flex-grow、flex-shrink和flex-basis的简写。默认值为0 1 auto

后两个属性可选。

align-self

设置元素本身在交叉轴上的对齐方式，可以覆盖align-items属性。默认为auto，即继承父元素align-items的属性。

可选值：flex-start/flex-end/center/stretch/baseline

各种对齐方式详见可见这里中的动图

与其他CSS属性结合后拓展

margin: auto

#flexbox{
    display: flex;
}
.item{
    margin: auto;
}

此属性用于子元素，效果为水平垂直居中。相当于#flexbox设置了justify-content: space-around和align-items: center