Flex弹性布局 // RocketTurtle

弹性元素的外边距不折叠

主轴和垂轴

flex-direction：设置主轴方向。row（左->右）、row-reverse（右->左）、column（上->下）、column-reverse（下->上），默认为row
flex-wrap：设置垂轴方向。nowrap（不换行）、wrap（换行）、wrap-reverse（反向换行），默认为nowrap
flex-flow：同时设置主轴和垂轴方向
以上三个属性都应用于弹性容器

主轴和垂轴的方向（从左至右)

主轴和垂轴的方向和语言的书写方向有关，这里仅讨论从左至右书写的语言

从左至右书写模式下的弹性方向

justify-content（作用于弹性容器）

应用于弹性容器，定义弹性元素在主轴方向上的对齐方式
取值：flex-start、flex-end、center、space-between、space-around、space-evently
作用的弹性元素是包含外边距的
justify-content的六个属性效果如下

justify-content的六个属性效果

justify-content的六个属性溢出效果如下

justify-content的六个属性溢出效果

align-items（作用于弹性容器）

应用于弹性容器，定义弹性容器内所有弹性元素在各弹性行垂轴方向上的对齐方式
取值：flex-start、flex-end、center、baseline、stretch（若没有为弹性元素在垂轴方向上设定宽高，那么弹性元素会被拉伸，width/height/max-width/max-height/min-width/min-height优先级比stretch更高）
作用的弹性元素是包含外边距的

对于stretch取值，作用的弹性元素是包含外边距的

align-self（作用于弹性元素）

用于在指定的弹性元素上覆盖align-items值，即指定单个弹性元素在弹性行的垂轴方向上的对齐方式
取值：auto、flex-start、flex-end、center、baseline、stretch

align-content（作用于弹性元素行）

若只有一行弹性元素或者不允许换行，align-content不起作用
取值：flex-start、flex-end、center、space-between、space-around、space-evently、stretch

弹性元素

弹性容器的直接子元素为弹性元素，其中除了非空的文本节点都会成为弹性元素。文本节点将成为匿名弹性元素，不能直接为它设置css样式。
float（不会使弹性元素移出文档流）、clear、vertical-align对弹性元素没有影响。
绝对定位会影响弹性元素，它会将弹性元素移出文档流。同时，绝对定位的弹性元素会受应用在弹性容器上的属性和应用在自身的弹性属性的影响。比如，align-self：center，先会使弹性元素垂直居中，然后再偏移。
order属性对开启绝对定位的弹性元素没有影响，对同辈元素的绘制顺序有影响。

flex（作用于弹性元素）

由flex-grow（增长因子）、flex-shrink（缩减因子）、flex-basis（基准值）构成，flex-basis设置的基准值比width和height的优先级更高，即时它们加了权重!important

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #container{
            height: 200px;
            background-color: red;
            display: flex;
        }

        #container>div{
            width: 50% !important;
            flex: 0 1 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="container">
        <div></div>
    </div>
</body>
</html>

以上代码内部idv宽度为200px

flex-grow（增长因子）

一般不建议单独设置flex-grow，因为单独设置会使得flex-basis默认设为auto。那么通过增长因子按剩余空间分配。如果为flex-basis设置为0%那么它会覆盖元素长度，通过增长因子分配全部主轴空间。

flex-shrink（缩减因子）

一般不建议单独设置flex-shrink
对于弹性元素中存在不允许缩小的媒体元素，比如图片。那么对其尽量缩小。余下的空间交给其余的缩减因子缩小。
缩减长度计算方式

缩减长度计算方式