bootstrap的flex布局

基本布局

• 添加.d-flex与.d-flex-inline开启flex弹性布局。其中.d-inline-flex代表内联样式的flex布局
• .flex-row为水平布局，从左到右。.flex-row-reverse代表翻转水平布局，从右向左
• .flex-column为垂直布局，从上到下。.flex-column-reverse翻转垂直布局，从下到上
• .justify-content-*实现水平排列子元素，*可以为start(顶端对齐),end(底端对齐),center(居中对齐),between(两端对齐),around(间隔对齐)
• .align-items-*实现垂直排列子元素，*可以为start(顶端对齐),end(底端对齐),center(居中对齐),baseline(按照基线对齐),stretch(伸展)
• .align-self-*实现每个子元素的垂直对齐方式，与.align-items-*一致

样式

• .flex-fill允许让每个子元素都默认占据相同的空间。当有几个元素设置为.flex-fill时，优先对这些列进行等比例划分空间，剩余的空间再交给其他元素分配
• .flex-grow-*控制元素的放大，*为0时默认不进行放大，1时将最大程度进行放大
• .flex-shrink-*控制元素的缩小，*为0时不进行缩小，1时会进行缩小。当一行或者一列中放不下该元素时，设置为1会将元素进行缩小，而0不会
• .ml-auto与.mr-auto进行外边距的设置，会自动进行对齐
• .flex-wrap与.flex-nowrap来包裹子元素，使用.flex-wrap时会自动换行，而.flex-nowrap不会自动换行。.flex-warp-reverse与.flex-wrap进行相反方向上的换行
• .order-来对子元素进行修饰，当所表示的数字越小，代表显示的顺序越靠前。范围为0~12。允许响应式布局
• .align-content-*实现子元素的垂直对齐。start,end,center,between,around,stretch与之前一致