弹性盒在项目中的实际使用

   这一名前端小白对结合自己开发中的总结 还请技术大佬多多指点

文章由来

   在一次面试中面试官问：flex布局中的主轴侧轴的问题。 当时就懵了 flex布局常用属性也是知道一些的 一提到主轴侧轴确实没有细看过。我就对面试官说在开发中flex用的还是可以的。面试官说了一句：你连主轴侧轴都不知道，怎么看的懂同事的代码~~ ε=(´ο｀*)))唉很受伤的我决定吧flex在看一遍！ 本次只介绍开发中常用属性

主轴 侧轴

主轴：默认横向 从左向右 侧轴：默认是纵向 从上向下

flex-direction 可以改变主轴和侧轴方向
flex-direction: row; 默认值
flex-direction: column; 主轴改为纵向  侧轴改为横向 

父元素的设置 container

首先让元素呈现弹性布局 一旦改为弹性布局子元素默认变为行内元素

display:flex; /* 常用  */

/* 行内元素使用弹性布局 */
/* display:inline-flex; 很少使用  */

设置主轴布局 默认横向

/* justify-content 设置子元素在主轴的排列方式 常用 */
/* 默认 子元素排列在主轴的起始位置  */
justify-content:flex-start;

/*  子元素排列在主轴的终止位置  */
justify-content:flex-end;

/*  子元素紧挨主轴两端中间空隙均等  */
justify-content:space-between;

/*  子元素距主轴两端有距离中间空隙均等  */
justify-content:space-around;

/*  子元素距主轴两端和中间空隙均等  */
justify-content:space-evenly;

设置侧轴布局 默认纵向

/* align-items 设置子元素在侧轴轴的排列方式 常用*/
/*默认 子元素在侧轴起始位置 */
align-items:flex-start; 

/* 子元素在侧轴终止位置 */
align-items:flex-end; 

/* 子元素在侧轴的居中位置  常用*/
align-items:center; 

设置主轴和侧轴方向

/* flex-diraction 设置主轴和侧轴方向 常用*/

/*默认 主轴横向(子元素从左向右排列)  侧轴纵向(子元素从上向下) */
flex-diraction:row; /*默认 主轴横向*/

/* 主轴横向(子元素从右向左排列)  侧轴纵向(子元素从下向上) */
flex-diraction:row-reverse; /*方向翻转*/

/* 主轴纵向(子元素从上向下排列)  侧轴纵向(子元素从左向右) */
flex-diraction:column; /*主轴纵向*/

/* 主轴纵向(子元素从下向上排列)  侧轴纵向(子元素从右向左) */
flex-diraction:column-reverse; /*主轴纵向 方向翻转*/

换行

/* flex 布局中默认为一行展示 */
flex-wrap:no-wrap;

/* 根据子元素宽度换行展示 */
flex-wrap:wrap;/*常用*/

/* 反向换行展示 */
flex-wrap:wrap-reverse;/*不常用*/

当子元素有多行展示时 设置侧轴排列方式 一旦设置覆盖align-items属性

/* alingn-content 当子元素多行排列时,设置侧轴排列方式 会用到 */
align-content: stretch; /*默认*/ 
/* 其余参数值与主轴用法一致 */
 align-content: flex-start | flex-end | center | space-between | space-around | stretch;

子元素的设置 items

只写了我在工作中用到的

flex-grup 设置占比 可以根据子元素设置的宽度供整行的子元素使用 多余出的元素不足一行的会均匀分配占满多余的空间（仅个人观点）

/* flex 我通常在导航时用到 设置每个导航按钮占比相等*/
flex-grup:1;
/* 好处：就是在后期迭代 新增或者删除导航按钮后不影响按钮的均匀分布 */

flex-basis 给子元素设置固定宽宽度 优先级大于width属性 优先级小于min-width和max-width

/*通俗点就是覆盖父级或本身的width属性*/
flex-basis:300px;

flex-shrink 官方提供为缩小 因为没用过 只了解了一下简单使用

/*当值大于1的时候为元素缩小*/
flex-shrink：2;
/*当值小于1的时候元素为放大*/
flex-shrink:.8;

flex属性是 flex-grup flex-shrink flex-basis 属性的缩写

flex：<flex-grup> <flex-shrink> <flex-basis>；
/*如果是只写一个值代表 flex-grup*/
flex:1; 
/*如果写两个值代表 flex-grup flex-shrink*/
flex:1 2; 
/*两个值也可以代表 flex-grup flex-basis*/
flex:1 200px;
/*三个值代表 flex-grup flex-shrink flex-basis*/
flex:1 2 200px;

以上是我在工作中使用到的 如果还有比较实用的方法 还请技术大佬们 多多指点！