display

display: flex | inline-flex ;

display确定是否启用flexbox布局，flexbox布局下的子元素无论是内联元素的还是块状元素都会flex流的布局方式进行空间分配

flexDirection

flexDirection: row | row-reverse | column | column-reverse;

用来声明主轴的方向和在主轴上排列的方向

flexWrap

flexWrap: nowrap | wrap | wrap-reverse;

flex-wrap属性定义如果主轴上不下如何换行。

justifyContent

justifyContent: flex-start | flex-end | center | space-between | space-around;

主轴方向上的对齐方式

效果如下图

alignItems

alignItems: flex-start | flex-end | center | baseline | stretch;

与主轴垂直的方向成为侧轴，alignItems用来定义侧轴方向上的对齐方式

效果如下图

alignContent

alignContent: flex-start | flex-end | center | space-between | space-around | stretch;

根据在侧轴上的额外空间来排列容器的行，alignContent与alignItems的作用类似，但是只对多行的flex布局才有效果，对单行布局没有效果

使用效果如下图

flexFlow

flexFlow: ‘flex-direction’ ‘flex-wrap’

相当于同时设置两个属性：

• flex-direction: row
• flex-wrap: wrap;

flex

flex: flex-grow flex-shrink flex-basis;

flex属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性， 默认值分别是"0 1 auto"，其中第二个和第三个参数（flex-shrink、flex-basis）是可选参数

宽度 ＝ 弹性宽度 * ( flexGrow / sum( flexGorw ) )

alignSelf

alignSelf : 'auto | flex-start | flex-end | center | baseline | stretch';

alignSelf属性允许单个元素有与其他元素不一样的对齐方式，可覆盖alignItems属性。默认值为auto，表示继承父元素的alignItems属性，如果没有父元素，则等同于stretch。

转载于:https://www.cnblogs.com/RonnieQin/p/7866887.html

行内块元素的对齐

场景

今天在工作的时候想要将盒子对齐，将div设置成了inline-block，结果盒子并没有对齐

    <div class="box">

      <div class="first child"></div>

      <div class="second child">2</div>

      <div class="third child"></div>

    </div>

样式：

      .box {
        border: 2px solid skyblue;
        height: 200px;
      }

      .child {
        display: inline-block;
        width: 100px;
        height: 100px;
        margin-right: 10px;
      }

      .first {
        background-color: green;
      }
      .second {
        background-color: purple;
      }

      .third {
        background-color: orange;
      }

结果并没有对齐： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

原因

我们知道，行内块元素默认对齐方式是基线对齐 verticle-align:base-line

对于一个inline-block行内块元素，如果内部没有inline内联元素，或者overflow不是visible，则该元素的基线就是它margin的底边缘

上面例子绿色和黄色盒子的基线是他们的底边，紫色盒子的基线由数字2决定了，所以他们基线对齐之后就乱了

解决方法

方法1：加 verticle-align: top / middle / bottom**

给盒子加上verticle-align就好了

 .child {
        vertical-align: top;
      }

方法2：添加浮动：float ，只是浮动脱离标准流，不那么好控制**

 .child { float: left}

方法3: 添加内容（字符串等内容）容就好

，不那么好控制**

 .child { float: left}

方法3: 添加内容（字符串等内容）容就好