弹性盒模型
弹性盒模型
父元素：flex container
子元素：flex items.
当其有父元素且子元素的排布具有一定顺序时，我们可以将排布属性统一写在父元素中，若无父元素或者子元素排布无顺序时，可将排布属性分开写在子元素中，下面都会介绍。
普通盒模型无宽时，子元素会自动将宽变为100%，从上到下依次排列。
弹性盒模型无高时，子元素会自动将高变为100%，从左到右依次排列。
现在先介绍一下父元素容器的两条主要的轴：
- 主轴 方向：从左到右 main axis
- 交叉轴 方向：从上到下 cross axis
- 子元素的宽度 main size
- 子元素的高度 cross size
子元素总宽度填不满父元素时
弹性盒模型
"container">
"sl01">1
"sl02">2
"sl03">3
"sl04">4
效果图如下
由图示可以知道，父元素设为弹性盒模型，其效果只出现于其子元素。
当子元素的宽度填不满父元素的时候，子元素整齐从左到右按宽度大小和编辑顺序排列，且不管高度为多少，都是顶部对齐，从上到下。
水平方向的排布方向是按照主轴方向排列。
父元素的宽度不够子元素时
弹性盒模型
"container">
"sl01">1
"sl02">2
"sl03">3
"sl04">4
效果图如下
是不感觉很神奇，子元素的总宽度都超过父元素了，为什么没有出来呢？我们来看下在浏览器端子元素的大小,我们用两个元素做例子。
他们的实际宽度都比我们自己设的要小，而且还是按照我们设的数字比例来缩小以适应父元素的宽度的。就因为这个，我们才叫他弹性盒模型。
属性应用
当其有父元素，且在父元素中设的属性
flex-direction
来控制主轴的方向，即子元素排列方向。
其属性值有：
- row 方向为从左到右，即默认值
.container{
width: 400px;
height: 400px;
background-color: rgb(228, 189, 116);
/* 告诉他，我这是弹性盒模型 */
display: flex;
margin: 100px auto 0;
flex-direction: row;
}
效果图如下
2. row-reverse 方向为从右向左
.container{
width: 400px;
height: 400px;
background-color: rgb(228, 189, 116);
/* 告诉他，我这是弹性盒模型 */
display: flex;
margin: 100px auto 0;
flex-direction: row-reverse;
}
效果图如下
4. column 方向为从上到下
.container{
width: 400px;
height: 400px;
background-color: rgb(228, 189, 116);
/* 告诉他，我这是弹性盒模型 */
display: flex;
margin: 100px auto 0;
flex-direction: column;
}
可以观察到，当高度不够时，子元素也会自动缩小来适应父元素。
5. column-reverse 方向为从下到上
.container{
width: 400px;
height: 400px;
background-color: rgb(228, 189, 116);
/* 告诉他，我这是弹性盒模型 */
display: flex;
margin: 100px auto 0;
flex-direction: column-reverse;
}
flex-wrap 子元素换行
当子元素的宽度足够大时，父元素容不下，就设flex-wrap：wrap;让他可以允许子元素换行。但此时换行是将父元素从高度上平等化分等分，元素在每一等分的最上方、最左方。
弹性盒模型
"container">
"sl01">1
"sl02">2
"sl03">3
"sl04">4
此处将子元素的宽度缩小一些，便于观察
justify-content 来控制沿主轴的排布方向
其属性值如下
- flex-start 左对齐
弹性盒模型
"container">
"sl01">1
"sl02">2
"sl03">3
"sl04">4
2. flex-end 右对齐
.container{
width: 400px;
height: 400px;
background-color: rgb(228, 189, 116);
/* 告诉他，我这是弹性盒模型 */
display: flex;
margin: 100px auto 0;
/* flex-direction: column-reverse; */
/* flex-wrap: wrap; */
justify-content: flex-end;
}
3. center 居中
.container{
width: 400px;
height: 400px;
background-color: rgb(228, 189, 116);
/* 告诉他，我这是弹性盒模型 */
display: flex;
margin: 100px auto 0;
/* flex-direction: column-reverse; */
/* flex-wrap: wrap; */
justify-content: center;
}
4. space-between 两端对齐
.container{
width: 400px;
height: 400px;
background-color: rgb(228, 189, 116);
/* 告诉他，我这是弹性盒模型 */
display: flex;
margin: 100px auto 0;
/* flex-direction: column-reverse; */
/* flex-wrap: wrap; */
justify-content: space-between;
}
5. space-around 间隔相等对齐
.container{
width: 400px;
height: 400px;
background-color: rgb(228, 189, 116);
/* 告诉他，我这是弹性盒模型 */
display: flex;
margin: 100px auto 0;
/* flex-direction: column-reverse; */
/* flex-wrap: wrap; */
justify-content: space-around;
}
align-items 控制子元素在交叉轴上的布局方式
其属性值如下
- flex-start
- flex-end
- center
- baseline 是根据子元素中文字的基线来对齐
- stretch
align-content即换行后对齐，父级要允许换行
- flex-start
- flex-end
- center
- space-between
- space-around
- stretch
在子元素中加的属性
flex-grow:number;
在子元素中加上，学名为弹性增长因子，根据number，将未填满的空间通过增加宽度来填满。
flex-shrink:number;
在子元素中加上，学名为弹性缩放因子，根据number，将不够的空间用缩小子元素宽度的方法解决
order:number;
在子元素中加上，来控制子元素的先后顺序
当其无父元素时，我们可以通过align-self来单独控制每个元素的布局