html弹性盒子
@TOC弹性盒子：
是添加的display:flex的盒子。
一、弹性盒子
是一种布局方式
主要解决某一个元素中的子元素的布局方式
子元素的大小排版顺序都受到父元素的影响和控制
给一个元素设置display: flex,这个元素的儿子们就变成了弹性布局
<style>
ul{
width: 500px;
height: 200px;
border: 2px black solid;
/* 变成弹性盒子 */
display: flex;
}
li{
list-style: none;
width: 100px;
height: 200px;
background-color: chartreuse;
border: 2px solid black;
box-sizing: border-box;
}
style>
head>
<body>
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ul>
二、弹性盒子的四个专有名词
*弹性容器：设置了display: flex;的元素
弹性项目：设置了display: flex;的元素的儿子们
主轴：弹性项目的排列方向
主轴是x轴，
主轴的起点在左侧，主轴的终点在右侧
主轴的起点在右侧，主轴的终点在左侧
主轴是y轴，
主轴的起点在顶部，主轴的终点在底部
主轴的起点在底部，主轴的终点在顶部
交叉轴：永远与主轴垂直的一个方向
三、语法
设置元素为弹性容器
display: flex;//让块级元素变成容器
display : inline-flex;//让行内元素变成容器（一般不用）
1 、添加给父元素的属性
2 、弹性容器只对子元素生效，与孙子无关，但是可以嵌套使用-语法3、默认值
（1）项目主轴方向是水平从左到右排列
4、项目的总宽度大于容器的总宽度的时候，会自动缩小以适应-子元素不受元素类型的影响，按照块元素处理
5、弹性布局的目的，就是灵活的控制子元素的水平或者垂直对齐方向
所以说当元素变成了容器之后，容器和项目所有的改变水平或者垂直对齐方式的属性会失去效果
6、只有设置了display :flex,其他的容器属性和项目属性才能生效
四、弹性盒子属性
1.容器在主轴方向上空间不够的时候，项目是否换行*
flex-wrap
nowrap 默认不换行
wrap换行
2.主轴方向 flex-direction:
row;默认水平从左到右
flex-direction: row-reverse;水平从右到左
lex-direction: column;垂直从上到下
flex-direction: column-reverse;垂直从下到上
3.换行和主轴方向的简写
flex-flow : wrap column;
<style>
.father{
width: 300px;
height: 400px;
background-color: cadetblue;
display: flex;
margin: 50px auto;
/* 弹性盒子属性 */
/* 当单行盒子大小不够时，是否换行 并且，自平分父元素空间*/
flex-wrap: wrap;
/* 主轴 默认为水平从左向右 */
flex-direction: row;
/* 主轴 水平从右向左 */
flex-direction: row-reverse;
/* 垂直 从上到下 */
flex-direction: column;
/* 垂直 从下到上 */
flex-direction: column-reverse;
/* 主轴和换行的简写 */
flex-flow: column wrap;
}
.son{
width: 100px;
height: 100px;
background-color: chartreuse;
border: 1px solid black;
}
style>
head>
<body>
<div class="father">
<div class="son">1div>
<div class="son">2div>
<div class="son">3div>
div>
body>
4.设置项目在主轴上的排列方式
justify-content: flex-start;默认主轴起点对齐
justify-content: flex-end;主轴终点对齐
justify-content: center;主轴中心对齐
justify-content: space-around;容器两边有间隙
justify-content: space-between;容器两边没有间隙
/* 设置项目在主轴上的排列方式 */
/* 默认 主轴起点对齐 */
justify-content: flex-start;
/* 主轴终点对齐 */
justify-content: flex-end;
/* 主轴中心对齐 */
justify-content: center;
/* 容器两边有间隙 */
justify-content: space-around;
/* 容器两边没有间隙 */
justify-content: space-between;
5.设置项目在交义轴上的排列方式
align-items : stretch;默认拉伸以适应交叉轴的空间
align-items : flex-start;交叉轴起点对齐
align-items : flex-end;交叉轴终点对齐
align-items : center;交叉轴中心对齐
align-items: baseline;交叉轴基线对齐了解
/* 交叉轴上的排列方式 */
/* 目前主轴是垂直从上到下，所以交叉轴是水平从左向右 轴 flex-start是在交叉轴起点排列 */
/* stretch 默认 拉伸自己以使用交叉轴空间 */
align-items: stretch;
align-items: flex-start;
/* 交叉轴终点 */
align-items: flex-end;
align-items: center;
/* 基线对齐 了解就好 */
align-items: baseline;
6 多行项目在交叉轴上的排列
align-content: stretch;默认拉伸以适应交叉轴的空间
align-content: flex-start;交叉轴起点对齐
align-content: flex-end;交叉轴终点对齐
align-content: center;交叉轴中心对齐
align-content: space-around;容器两边有间隙
align-content: space-between;容器两边没有间隙
<style>
.father{
width: 800px;
height: 500px;
border: 1px solid black;
display: flex;
/* 换行 */
flex-wrap: wrap;
/* 默认 拉伸自己以适应 */
align-content: stretch;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
}
.son{
width: 100px;
height: 100px;
background-color: blueviolet;
border: 1px solid black;
box-sizing: border-box;
}
style>
head>
<body>
<div class="father">
<div class="son">1div>
<div class="son">2div>
<div class="son">3div>
<div class="son">4div>
<div class="son">5div>
<div class="son">6div>
<div class="son">7div>
<div class="son">8div>
<div class="son">9div>
<div class="son">10div>
<div class="son">11div>
<div class="son">12div>
<div class="son">13div>
<div class="son">14div>
<div class="son">15div>
div>
body>
五、弹性项目（子元素）属性
1 设置单个项目在交叉轴上的排列方式 align-self:
auto 默认继承父元素的 align-items的属性值，如果父元素没有设置align-items，
就会找自己的 align-self的默认值
stretch 默认值拉伸项目在交叉轴方向上不设置尺寸的时候flex-start交叉轴起点对齐
flex-end 交叉轴终点对齐center交叉轴中心对齐baseline交叉轴基线对齐
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box{
width: 600px;
height: 400px;
border: 2px solid black;
margin: 30px auto;
display: flex;
}
.son{
width: 100px;
height: 100px;
background-color: chartreuse;
border: 1px solid black;
box-sizing: border-box;
/* 交叉轴上默认 */
align-self: auto;
/* 当子元素本身不设置宽高时，拉伸自己以适应 */
align-self: stretch;
}
.box .son:nth-child(1){
/* 交叉轴起点对齐 */
align-self: flex-start;
}
.box .son:nth-child(2){
/* 交叉轴终点对齐 */
align-self: flex-end;
}
.box .son:nth-child(3){
/* 交叉轴中对齐 */
align-self: center;
}
.box .son:nth-child(4){
/* 交叉轴基线对齐 */
line-height: 20px;
align-self: baseline;
}
.box .son:nth-child(5){
align-self: baseline;
line-height: 30px;
}
style>
head>
<body>
<div class="box">
<div class="son">1div>
<div class="son">2div>
<div class="son">3div>
<div class="son">4div>
<div class="son">5div>
<div class="son">6div>
div>
body>
2.控制项目如何增长
主轴方向空间有多余的时候，才能控制每个项目如何变大
父元素多余的空间，项目按照取值的占比，自动分别各自增长相应的尺寸
flex-grow:
默认值不空配空间数字12 3 4 …
<style>
.box{
width: 600px;
height: 300px;
background-color: aqua;
display: flex;
}
.son{
width: 100px;
height: 300px;
border: 1px solid black;
box-sizing: border-box;
}
.box .son:nth-child(1){
flex-grow: 1;
}
.box .son:nth-child(2){
flex-grow: 2;
}
.box .son:nth-child(3){
flex-grow: 3;
}
style>
head>
<body>
<div class="box">
<div class="son">1 项目如何增长（尺寸变大），是在父元素剩余空间的主轴方向变大。按剩余空间的比例div>
<div class="son">2 例如，本例中 父元素宽为600px，子元素宽100，一共3个，共占300，还剩300，则以上方式把剩余部分分成6份，一份50 第一个盒子占一份 增长50，那么第一个盒子总宽为150div>
<div class="son">3div>
div>
body>
3.控制项目如何收缩
如果主轴方向上空间不足，项目们按照取值的占比，自动减少对应的尺寸
flex-shrink :
默认值分配空间收缩不分配空间不收缩数字12 3 4…
<style>
.box{
width: 200px;
height: 300px;
background-color: aqua;
display: flex;
}
.son{
width: 200px;
height: 200px;
border: 2px solid black;
background-color: chocolate;
}
.box .son:nth-child(1){
flex-shrink: 1;
}
.box .son:nth-child(2){
flex-shrink: 2;
}
.box .son:nth-child(3){
flex-shrink: 3;
}
style>
head>
<body>
<div class="box">
<div class="son">1div>
<div class="son">2div>
<div class="son">3div>
div>
body>
4.设置项目在主轴方向上的尺寸 flex-basis:
auto 默认值 ：项目在主轴上没有设置flex-basis，会参考width;如果也没有设置width，靠内容撑开。
px 为单位的数字
百分比 参考父元素的宽高（一般不用）
当尺寸和flex-basis冲突，以flex-basis为准
<style>
.box{
width: 300px;
height: 300px;
margin: 50px auto;
border: 2px solid black;
display: flex;
}
.son{
/* width: 100px; */
height: 300px;
background-color: chartreuse;
border: 2px dashed black;
box-sizing: border-box;
flex-basis: 100px;
}
style>
head>
<body>
<div class="box">
<div class="son">div>
<div class="son">shenshenshenn div>
<div class="son">深深很差距div>
div>
body>
5.项目属性的简写
lex:flex-grow flex-shrink flex-basis
-顺序不可以换
-平分空间:flex: 1 （这是最常用的简写）
<style>
.father{
width: 600px;
height: 300px;
border: 1px solid black;
display: flex;
}
.son{
height: 300px;
border: 2px dashed black;
box-sizing: border-box;
background-color: chartreuse;
/* 平分空间 最常用的简写 */
flex: 1;
}
style>
head>
<body>
<div class="father">
<div class="son">1div>
<div class="son">111111111111111111div>
<div class="son">22222222222222222222222div>
div>