基础结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 400px;
height: 400px;
margin: 0 auto;
background-color: #ccc;
display: flex;
/*默认x轴就是主轴*/
/*--------------------- 子元素无间距start ---------------------*/
/*主轴子元素左贴边显示*/
/* justify-content: flex-start; */
/*主轴子元素整体居中显示*/
/* justify-content: center; */
/*主轴子元素右贴边显示*/
/* justify-content: flex-end; */
/* 1.justify-content: start | end 均在子元素没有超过父元素宽度的时候才起效*/
/* 2.如果子元素宽度总和超过父元素，即使设置end也是从左往右排列，因为flex-wrap默认不换行*/
/*--------------------- 子元素无间距end ---------------------*/
/*--------------------- 子元素有间距start ---------------------*/
/*主轴子元素两边贴边，中间间距平均*/
/* justify-content: space-between; */
/*主轴子元素整体居中，子元素之间间距平均，边距加在每个子元素左右两侧，所以视觉效果看起来两边小，子元素中间边距是两边的两倍*/
/* justify-content: space-around; */
/*主轴子元素所有间距平均*/
/* justify-content: space-evenly; */
/*--------------------- 子元素有间距end ---------------------*/
/*--------------------- 子元素换行start ---------------------*/
/*主轴子元素左贴边，超出默认不换行，子元素宽带自动压缩，不再是200px*/
/* justify-content: end; */
/*flex-wrap默认值就是nowrap*/
/* flex-wrap: nowrap; */
/*超出自动换行*/
/* flex-wrap: wrap; */
/* align-self: flex-end; */
/* align-content: flex-start; */
/*flex-direction: row;
flex-wrap: wrap;*/
/*flex-flow = flex-direction + flex-wrap*/
/* flex-flow: row wrap; */
/*--------------------- 子元素换行end ---------------------*/
/* 所有子元素底部对齐(单行) */
/* align-items: center; */
/* flex-wrap: wrap; */
/* 所有子元素底部对齐(多行) */
/* align-content: center;
flex-wrap: wrap; */
/*align-items与align-content区别：*/
/*
1.align-items只有一行才起效，并且不能设置间距分配
2.align-content多行(换行)才起效，能设置间距分配，类似just-content
*/
/*flex-start与start的区别：*/
/*
作用是一样的，没什么区别。
flex-start 是早期的写法，后来规范后，和grid一样统一用了start来表示
如果你希望兼容性好点，就用flex-start，否则就用start
*/
}
/* 只需要第三个div底部对齐 */
/* .container div:nth-child(3) {
align-self: flex-end;
} */
.container div {
/* width: 100px; */
height: 100px;
}
div.div1 {
flex: 1;
background-color: skyblue;
}
div.div2 {
flex: 2;
background-color: palegreen;
}
div.div3 {
flex: 1;
background-color: palevioletred;
}
.div4 {
background-color: goldenrod;
}
.div5 {
background-color: aqua;
}
.div6 {
background-color: seagreen;
}
</style>
</head>
<body>
<div class="container">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<!-- <div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div> -->
</div>
</body>
</html>
主轴子元素左贴边显示
display: flex;
justify-content: start;
主轴子元素整体居中显示
display: flex;
justify-content: center;
主轴子元素右贴边显示
display: flex;
justify-content: end;
/*1.justify-content: start | end 均在子元素没有超过父元素宽度的时候才起效*/
/*2.如果子元素宽度总和超过父元素，即使设置end也是从左往右排列，因为flex-wrap默认不换行*/
主轴子元素两边贴边，中间间距平均
display: flex;
justify-content: space-between;
主轴子元素整体居中，子元素之间间距平均
display: flex;
justify-content: space-around;
主轴子元素所有间距平均
display: flex;
justify-content: space-evenly;
子元素主轴左贴边，超出默认不换行，子元素宽带自动压缩，不再是200px
/*flex-wrap默认值就是nowrap*/
flex-wrap: nowrap;
子元素主轴超出换行并且左右贴边，上下也贴边
flex-wrap: wrap;
justify-content: start;
align-content: flex-start;
子元素flex-flow
/*flex-direction: row;
flex-wrap: wrap;*/
/*flex-flow = flex-direction + flex-wrap*/
flex-flow: row wrap;
所有子元素底部对齐
/*所有子元素底部对齐(单行)*/
align-items: center;
/*所有子元素底部对齐(多行)*/
align-content: center;
flex-wrap: wrap;
/*align-items与align-content区别：*/
/*
1.align-items只有一行才起效，并且不能设置间距分配
2.align-content多行(换行)才起效，能设置间距分配，类似just-content
*/
