`
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex applet-base-api-t.itheima.net</title>
</head>
<body>
http://c.biancheng.net/css3/flex.html
<h1>justify-conten水平方向对齐方式</h1>
<div id="">
<p>flex</p></p>默认主轴是x轴，默认左对齐</p>
<div id="mk1">
<div>1子盒子</div>
<div>2子盒子</div>
<div>3子盒子</div>
<div>4子盒子</div>
</div>
</div>
<style>
#mk1 {
border: solid 1px red;
display: flex;
height: 200px;
}
#mk1 div {
border: solid 1px blue;
background-color: orange;
width: 100px;
height: 100px;
}
</style>
<div id="">
<p>justify-content: center;盒子全部居中,留白两边</p>
<div id="mk2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<style>
#mk2 {
border: solid 1px red;
display: flex;
justify-content: center;
height: 200px;
}
#mk2 div {
border: solid 1px green;
background-color: orange;
width: 100px;
height: 100px;
}
</style>
--------------------------------------------------------------------------------------------
<div id="">
<p>justify-content: space-around;每个盒子都有左右间距（所以中间间距大）</p>
<div id="mk3">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<style>
#mk3 {
border: solid 1px red;
display: flex;
justify-content: space-around;
height: 200px;
}
#mk3 div {
border: solid 1px green;
background-color: orange;
width: 100px;
height: 100px;
}
</style>
--------------------------------------------------------------------------------------------
<div id="">
<p>justify-content: space-evenly;空白位置间距都相等</p>
<div id="mk4">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<style>
#mk4 {
border: solid 1px red;
display: flex;
justify-content: space-evenly;
height: 200px;
}
#mk4 div {
border: solid 1px green;
background-color: orange;
width: 100px;
height: 100px;
}
</style>
--------------------------------------------------------------------------------------------
<div id="">
<p>justify-content: space-between; 两端对齐，中间平分</p>
<div id="mk5">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<style>
#mk5 {
border: solid 1px red;
display: flex;
justify-content: space-between;
height: 200px;
}
#mk5 div {
border: solid 1px green;
background-color: orange;
width: 100px;
height: 100px;
}
</style>
--------------------------------------------------------------------------------------------
<h1>align-items垂直方向对齐方式</h1>
<div id="">
<p>align-items: center; 垂直方向居中，不会自动拉满</p>
<div id="mk6">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<style>
#mk6 {
border: solid 1px red;
height: 300px;
display: flex;
/* justify-content: space-between; */
align-items: center;
/* align-items: stretch */
}
#mk6 div {
border: solid 1px green;
background-color: orange;
width: 100px;
/* height: 100px; */
}
</style>
--------------------------------------------------------------------------------------------
<div id="">
<p>align-items: center; 垂直自动拉满（前提是没有设置固定高度）</p>
<div id="mk7">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<style>
#mk7 {
border: solid 1px red;
height: 300px;
display: flex;
align-items: stretch
}
#mk7 div {
border: solid 1px green;
background-color: orange;
width: 100px;
/* height: 100px; */
}
</style>
<h1>align-self 设置子盒子在垂直方向对齐方式</h1>
--------------------------------------------------------------------------------------------
<h1>div:nth-child(3)单独给某个盒子指定align-self: center; 垂直居中</h1>
<div id="">
<div id="mk8">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<style>
#mk8 {
border: solid 1px red;
height: 500px;
display: flex;
}
#mk8 div {
border: solid 1px green;
background-color: orange;
width: 100px;
/* height: 100px; */
}
#mk8 div:nth-child(3){
align-self: center;
}
</style>
--------------------------------------------------------------------------------------------
<h1>flex （占用父级盒子剩余的空间份数）设置子盒子在水平方向伸缩比例</h1>
<div id="">
<p>如果子盒子中没有任何一个设置固定宽度，则flex: 1;表示平均分拉满</p>
<div id="mk9">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<style>
#mk9 {
border: solid 1px red;
height: 500px;
display: flex;
}
#mk9 div {
border: solid 1px green;
background-color: orange;
/* width: 100px; */
height: 100px;
flex: 1;
}
</style>
--------------------------------------------------------------------------------------------
<div id="">
<p>div:nth-child(3)单独给某个盒子指定align-self: center; 垂直居中</p>
<p>如果子盒子中有一个或多个设置固定宽度，则flex: 1;表示100宽度-固定宽度，剩余部分平均分拉满</p>
<div id="mk10">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<style>
#mk10 {
border: solid 1px red;
height: 500px;
display: flex;
}
#mk10 div {
border: solid 1px green;
background-color: orange;
/* width: 100px; */
height: 100px;
/* flex: 1; */
}
#mk10 div:nth-child(1) {
width: 30px;
}
/* 表示总共把剩余空间分成3+2五份，他占用3份 */
#mk10 div:nth-child(2) {
flex: 3;
}
#mk10 div:nth-child(2) {
flex: 2;
}
</style>
--------------------------------------------------------------------------------------------
<h1>flex-direction:column 主轴改成y轴 ,则子盒子竖排（默认是x轴）</h1>
<div id="">
<p>主轴改成y轴后，要实现居中，刚和默认主轴相反：justify-content: center; 垂直居中 align-items: center;水平居中</p>
<p>如果子盒子中有一个或多个设置固定宽度，则flex: 1;表示100宽度-固定宽度，剩余部分平均分拉满</p>
<div id="mk11">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<style>
#mk11 {
border: solid 1px red;
height: 500px;
display: flex;
flex-direction:column;
justify-content: center;
align-items: center;
}
#mk11 div {
border: solid 1px green;
background-color: orange;
width: 100px;
height: 100px;
}
</style>
--------------------------------------------------------------------------------------------
<h1>flex-wrap 设置子盒子是否换行</h1>
<div class="">
nowrap 默认值，表示项目不会换行
wrap 表示项目会在需要时换行
wrap-reverse 表示项目会在需要时换行，但会以相反的顺序
initial 将此属性设置为属性的默认值
inherit 从父元素继承属性的值
</div>
<div id="">
<div id="mk12">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
<style>
#mk12 {
border: solid 1px red;
height: 500px;
display: flex;
flex-wrap: wrap;
}
#mk12 div {
border: solid 1px green;
background-color: orange;
width: 100px;
height: 100px;
}
</style>
--------------------------------------------------------------------------------------------
<h1>align-content 设置子盒子换行之后的行间距</h1>
<div class="">
stretch 默认值，将项目拉伸以占据剩余空间
center 项目在容器内居中排布
flex-start 项目在容器的顶部排列
flex-end 项目在容器的底部排列
space-between 多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部
space-around 多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等
initial 将此属性设置为属性的默认值
inherit 从父元素继承该属性的值
</div>
<div id="">
<div id="mk13">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
<style>
#mk13 {
border: solid 1px red;
height: 500px;
display: flex;
flex-wrap: wrap;
align-content: start;
}
#mk13 div {
border: solid 1px green;
background-color: orange;
width: 100px;
height: 100px;
}
</style>
</body>
</html>
flex 布局怎么分配多余的空间（flex-grow）
- flex 布局中，flex 设置单、双、三值的时候分别有什么意义。
- flex 布局怎么压缩负空间（flex-shrink）
- flex 布局怎么分配多余的空间（flex-grow）
- flex-basis 和 flex-grow 怎么配合分配空间
解决后效果：
<div id="">
<p>width: 0;flex-grow:1;解决不能平均分的问题</p>
<div id="mk14">
<div>skadjaskd上哪打上单大的jka你的萨达是dksa </div>
<div>2jsaj</div>
<div>3京东健康快递大幅度</div>
</div>
</div>
<style>
#mk14 {
border: solid 1px red;
display: flex;
justify-content: center;
}
#mk14 div {
display: flex;
border: solid 1px green;
background-color: orange;
width: 0;
flex-grow:1;
}
</style>
