flex容器的特性
flex适合单行单列的布局；
flex-direction
1.没设置flex-direction，默认row;
2.flex-direction: row-reverse;
3.flex-direction: column;
4.flex-direction: column-reverse;
换行与缩写flex-wrap
1.没设置flex-wrap,没换行也没溢出；当每个子元素达到最小宽度时才会溢出；
2.flex-wrap: wrap;
3行的情况：
如果父元素没有设置height;
3.flex-wrap: wrap-reverse;
flex-flow
flex-flow就是flex-direction和flex-wrap的缩写；
主轴对齐justify-content
1.justify-content: flex-start;
2.justify-content: flex-end;
3.justify-content: space-around; 它非常适合做自适应的布局，它能自己调节间距，比float好用！
4.justify-content: space-between;
5.justify-content: space-evenly;
6.justify-content: center;
交叉轴对齐align-content和align-items
align-content(一行没效果，多行+flex-wrap: wrap;才有效果):
1.一行不加高度，默认值是stretch；
2.align-content: flex-start;
3.align-content: flex-end;
4.align-content: space-around;
5.align-content: space-between;
6.align-content: space-evenly;
align-items:针对每一行 1.align-items: flex-start;
2.align-items: flex-end;
3.align-items: center;
<style>
.main {
height: 98px;
border: 1px solid black;
display: flex;
align-items: center;
}
</style>
<body>
<div class="main">
xyz
<img src="./1.jpg" />
</div>
</body>
父容器特性应用的常见布局
垂直水平居中
1.水平垂直居中之内联元素； 单行文字
<style>
/*line-height实现*/
.main2 {
width: 300px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: pink;
}
</style>
<body>
<div class="main2">内联元素</div>
</body>
多行文字，line-height就不行了；多行文字如果不用flex，可用display:table-cell;vertical-align: middle;
2.水平垂直居中之块级元素；
// margin做偏移
.box {
width: 200px;
height: 100px;
background-color: pink;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -100px;
// transform更能适配
transform: translate(-50%, - 50%)
}
// 方法2
.box{
position: absolut;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
不定项居中
1.flex
.main {
width: 300px;
height: 150px;
background-color: skyblue;
display: flex;
justify-content: center;
align-items: flex-end;
}
.main div {
width: 30px;
height: 30px;
background-color: pink;
border-radius: 50%;
margin: 10px;
}
2.传统方式
.main {
width: 300px;
height: 150px;
background-color: skyblue;
text-align: center;
position: relative;
}
.inner {
text-align: center;
width: 100%;
position: absolute;
bottom: 0px;
/*去除内联元素默认间距*/
font-size: 0;
background-color: aqua;
}
.inner div {
width: 30px;
height: 30px;
background-color: pink;
border-radius: 50%;
display: inline-block;
/*子元素得把字体大小改回来*/
font-size: 16px;
}
均分列布局
1.flex
.main {
width: 300px;
height: 150px;
background-color: salmon;
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 0 20px;
}
.main div {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: pink;
display: inline-block;
margin-bottom: 5px;
}
2.传统float（真是太麻烦了啊啊啊）
子项分组布局
1.嵌套div
<style>
.main {
height: 200px;
display: flex;
justify-content: space-between;
background-color: salmon;
align-items: center;
}
.left {
width: 100px;
height: 100px;
background-color: pink;
}
.right {
width: 200px;
height: 100px;
background-color: pink;
display: flex;
}
.right div {
width: 50px;
background-color: seagreen;
}
</style>
<body>
<div class="main">
<div class="left"></div>
<div class="right">
<div>1</div>
<div>2</div>
</div>
</div>
</body>
2.不嵌套平铺
<style>
.main {
height: 200px;
background-color: skyblue;
display: flex;
align-items: center;
}
.main div {
width: 50px;
height: 100px;
background-color: pink;
}
/*第一个div加margin: auto;*/
.main div:nth-of-type(1) {
margin-right: auto;
}
</style>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
这种方法好啊，还可以分多个组；
<style>
.main {
width: 300px;
height: 200px;
background-color: skyblue;
display: flex;
align-items: center;
}
.main div {
width: 20px;
height: 100px;
background-color: pink;
}
/*第一个div加margin: auto;*/
.main div:nth-of-type(3) {
margin-right: auto;
}
.main div:nth-of-type(6) {
margin-right: auto;
}
</style>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
