flex-box入门

目录结构

.
├── basic.css
├── index.html
└── style.css

basic.css

body {
  padding: 0;
  margin: 0;
}

.container {
  background-color: yellow;
  padding: 10px;
}

.item {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  background: aquamarine;
  color: red;
  padding: 30px;
  display: block;
  text-align: center;
}

.item span {
  font-size: 50px;
}

index.html

  
  
  
  
  
  


  

      
1
      
2
      
3
      
4
      
5
  

style.css

.container {
  display: flex;

  /* 1. 弹性-流 */
  /* flex-flow: row wrap; */

  /* 2. 排版-内容（主轴）*/
  /* justify-content: space-around; */

  /* 3. 对齐-项目（交叉轴）*/
  /* height: 300px;
  align-items: flex-start; */

  /* 4. 对齐-多行项目 （交叉轴） */
  /* height: 300px;
  flex-wrap: wrap;
  align-content: space-between; */
}

/* 1. 项目排序 order默认值为0，
    order值越大，排得越后，反之。 */
/* .item-1 {
  order: 1;
}
.item-5 {
  order: -1;
} */

/* 2. 项目自己对齐 */
/* .item-1 {
  align-self: flex-end;
}
.item-2 {
  align-self: center;
}
.item-3 {
  align-self: stretch;
}
.item-4 {
  align-self: center;
}
.item-5 {
  align-self: flex-end;
} */

/* 3. flex 弹性 
  可扩大 可缩小 默认值 */
/* .item-1 {
  flex: 0 0 500px;
} */

/* 3-1. 项目扩大 */
/* .item-1 {
  flex-grow: 1;
}
*/

/* 3-2. 项目缩小 */
/* item-3 {
  flex-shrink: 0;
} */

/* 3-3. 项目默认值 */
/* .item {
  flex-basis: 300px;
} */

备注：取消注释，逐一尝试即可