基于flex的pc五大布局和手机经典布局

1.flex的基本概念

1. flex（灵活的，弹性的）：一种非常强大的布局，如果你还在用下列布局，那你就需要更新你的知识库。

传统布局

• float浮动
• position
• 负边距
• display:inline-block

2.直奔主题

flex布局的特点

1. flex布局没有方向
2. flex布局空间自由分配，自动对齐
3. flex布局仅仅用于简单的线性布局

3.flex的12大属性值

对于父元素的6大属性display:flex

1.(方向)flex-deraction:row/column/row-reverse/column-reverse
2.(换行)flex-wrap: wrap/nowrap/wrap-reverse
3.flex-flow上面2个的综合
4.(主轴的对齐方向)justify-content:center/flex-start/flex-end/space-around/space-between
5.(侧轴的对齐方向)align-items:center/flex-end/flex-start/stretch/baseline
6.(多行列的对齐方向，用的很少)align-content

对于子元素的6大属性(flex-item)

1. (增长比例)flex-grow
2. (收缩比例)flex-shrink
3. (默认的大小)flex-basis
4. (上诉三个的综合)flex
5. (顺序)order
6. (自身的对齐方式)align-self

基于flex布局的布局运用

1.左侧固定，主要内容自适应

.container{
  display: flex;
}
.container aslide{
  width: 100px;
  height: 80px;
  background: #f00;
  flex-basis: 100px;
}
.container main{
  flex-grow: 1;
  background: #0f0;
  margin-left: 10px;
}

链接地址

2. 右侧固定左侧主要内容自适应

.container{
  display: flex;
}
main{
  flex-grow:1;
  background: #0f0;
  margin-right: 10px;
}
aslide{
  width: 100px;
  height: 80px;
  background: #f00;
}

链接地址

3.三栏布局

.layout{
  display: flex;
}
.layout_left{
  width: 100px;
  height: 80px;
  background: #000;
}
.layout_main{
  flex-grow:1;
  background: #00f;
}
.layout_right{
  width: 100px;
  height: 80px;
  background: #0f0;
}

链接地址

4.手机布局

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
.container{
  display: flex;
  height: 100vh;
  flex-direction: column;
}
header .header{
   height: 100px;
}
header,footer{
  height: 70px;
  background: #000;
  color:#fff;
}
main{
  flex-grow:1;
  overflow:auto;
}

链接地址

5负边距的解法

*{margin:0;padding:0}
li{list-style:none}
ul{
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  border:1px solid black;
  margin:auto;
  justify-content: space-between;
}
ul>li{
  width: 250px;
  height: 100px;
  background: #0f0;
  margin: 10px 0;
}

链接地址

对于五高宽的绝对居中

.parent{
  display: flex;
  height: 500px;
  background: #ddd;
  align-items: center;
  justify-content:center;
}
.child{
  border:1px solid red;
}

链接地址