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;
}