Flex布局个人信息右对齐

浅谈一下flex布局中的导航栏中的个人信息右对齐的解释：

一般布局在使用flex布局的时候，我们是希望一级导航是左边是所有的导航，但是个人信息按钮是在最右边对齐的。

这个时候可能会有人想说用两个盒子包裹着，使用    justify-content: space-between     来，但是使用这个后，对于一级导航的样式就需要在两个盒子中各自设计，那么有没有一种方式就能实现一个大盒子里面装的所有的小盒子是在同一级的，但是个人信息又能跑到最后边呢？肯定是可以的。

首先使用flex布局，让所有小盒子横向排列

<div className='AutoCssBigBox'>
      <div className='Item'>1</div>
      <div className='Item'>2</div>
      <div className='Item'>2</div>
      <div className='Item'>2</div>
      <div className='Item Item1'>2</div>
    </div>

.AutoCssBigBox {
  color: red;
  background-color: aqua;
  display: flex;
  align-items: center;
}

这样的校过图：

这个时候我想最后一个2是右边对齐的，那么就会用到flex布局中的  flex-grow:1   这个属性，这个属性的意思就是说，如果我的Item盒子不能沾满大盒子剩余的空间，那么就会扩大到沾满剩余的盒子空间，比如12222只能沾满左边的空间，但是我使用了该属性后，盒子占的空间就会变成这样：

这样的话就能很明显看出来最后那个盒子是沾满了剩下的盒子了的，再配合text-align: right;属性，就能让文字右边对齐，以达到我们的需求。

完整代码如下：

<div className='AutoCssBigBox'>
      <div className='Item'>1</div>
      <div className='Item'>2</div>
      <div className='Item'>2</div>
      <div className='Item'>2</div>
      <div className='Item Item1'>2</div>
    </div>



.AutoCssBigBox {
  color: red;
  background-color: aqua;
  display: flex;
  align-items: center;

  .Item {
    flex-grow: 0;
  }

  .Item1 {
    flex-grow: 1;
    text-align: right;
    background-color: azure;
  }
}