mobile > pc ? html5 : flex ;,基于flex的pc五大布局和手机经典布局

1.flex的基本概念

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

传统布局

float浮动

position

负边距

display:inline-block

2.直奔主题

flex布局的特点

flex布局没有方向

flex布局空间自由分配，自动对齐

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)

(增长比例)flex-grow

(收缩比例)flex-shrink

(默认的大小)flex-basis

(上诉三个的综合)flex

(顺序)order

(自身的对齐方式)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;

}