css3弹性布局基础01

一，新型布局方式：

使用细节：
弹性布局，默认一行显示，无法换行。
换行需要自行开启弹性布局的换行功能。
变为多行以后及无法使用align-items 进行位置设置。
只能用align-content 在多行的时候 设置的属性跟justify-content一模一样。

flex-wrap:wrap;
①display: flex;
②/* 调整主轴方向 */
flex-direction:column;
/* 设置主轴的排布 */
justify-content:flex-end;
/* 设置主轴的排布 */
align-items:center;
align-self:center;

  <style>
ul{
  list-style: none;
  padding: 0;
  height: 300px;
  border: 1px solid gray;
  /* 使用弹性布局需要在父盒子中开启弹性布局。
  弹性布局开启以后 元素默认分为两个轴排布。
  主轴：默认是x方向
  副轴：默认是y方向。 */
  display: flex;
  /* 弹性布局可以方便的调整内部盒子的位置。
  调整元素在主轴上的排布方式。
  flex-end是到主轴的末尾。
  flex-start默认值
  center居中
  space-between 左右靠边 中间间隙相等排布。
  space-arround   左右间隙相等。
   */
  justify-content:flex-end;
/*   设置副轴的对齐方式。 */
  align-items:center;
  }
li{
  width: 100px;
  height: 100px;
  margin: 5px;
  border: 1px solid gray;
  text-align: center;
  font-size: 30px;
  font-weight: 900;
}
/* 设置子元素
设置第二个li标签 居中 */
li:nth-child(2){
/*   单独设置元素 在副轴上的对齐方式 会覆盖父元素的align-items */
  align-self:center;
}
/* 设置第三个li标签 顶部 */
li:nth-child(3){
/*   单独设置元素 在副轴上的对齐方式 会覆盖父元素的align-items */
  align-self: flex-start;

/* 调整主轴方向 */
flex-direction:column;
/* 设置主轴的排布  */
justify-content:flex-end;
/* 设置主轴的排布  */
align-items:center;
}
  </style>

二，