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>

二，