20 弹性盒

弹性盒（flex）

1.弹性盒的基本概念

flex（弹性盒，伸缩盒）

• 是css中的又一种布局手段，它主要用来替代浮动来完成页面的布局
• flex可以使元素具有弹性，让元素可以跟随页面的改变而改变

弹性容器

我们要使用弹性盒，必须先将一个元素设置为弹性容器

我们通过display来设置弹性容器

• display：flex设置为块级弹性容器
• display：inline-flex设置为行内的弹性容器

display:flex

不同点：

• flex独占一行
• inline-flex不会独占一行

弹性元素

• 弹性容器的子元素是弹性元素（弹性项）
• 弹性元素可以同时是弹性容器

2.弹性容器的属性

主轴和侧轴

• 主轴：弹性元素的排列方向为主轴
• 侧轴：与主轴垂直的方向为侧轴

2.1主轴属性

flex-direction:指定容器中弹性元素的排列方式

• row：默认值，弹性元素在容器中水平排列（自左向右）
• row-reverse：弹性元素在容器中反向水平排列（自右向左）
• column：弹性元素纵向排列（自上向下）
• column-reverse：弹性元素反向纵向排列（自下向上）

自动换行

flex-wrap：设置弹性元素是否在弹性容器中自动换行

• nowrap：默认值，元素不会自动换行
• wrap：元素沿着辅轴方向自动换行

简写属性

flex-flow：是wrap和direction的简写属性

空白空间

justify-content：如何分配主轴上的空白空间（主轴上的元素如何排列）

• flex-start：元素沿着主轴起边排列
• flex-end：元素沿着主轴终边排列
• center：元素居中排列
• space-around：空白分布到元素的两侧
• space-evenly：空白分布到元素的单侧
• space-between：空白均匀分布到元素间

2.2辅轴属性

align-item：

• 元素在辅轴上如何对齐
• 元素间的关系
  • 可选值：
  • stretch：默认值，将元素的长度设置为相同的值
  • flex-start：元素不会拉伸，沿着辅轴起边对齐
  • flex-end：沿着辅轴的终边对齐
  • center：居中对齐
  • baseline：基线对齐

空白空间 align-content：

• 如何分配辅轴上的空白空间（辅轴上的元素如何排列）
• flex-start：元素沿着辅轴起边排列
• flex-end：元素沿着辅轴终边排列
• center：元素居中排列
• space-around：空白分布到元素两侧
• space-between：空白均匀分布到元素间
• space-evenly：空白分布到元素的单侧

3.弹性元素的属性

flex-grow

• 指定弹性元素伸展的系数
• 当父元素有多余空间时，子元素如何伸展

flex-grow:1
/*如果写在父元素里，则子元素填充排列*/
/*如果写在一个个子元素里，则按数字大小进行填充*/
flex-grow:0
/*不做任何伸展*/

flex-shrink

• 指定弹性元素的收缩系数，默认值为1
• 当父元素中的空间不足以容纳所有的子元素时，如何对子元素收缩
• 缩减系数的计算方式比较复杂，缩减大小根据缩减系数和元素大小来计算

flex-shrink:1;

align-self

• 覆盖辅轴
• 用来覆盖当前弹性元素上的align-items

flex-basis

• 指定的是元素在主轴上的基础长度
• 如果主轴是横向的，则该值指定的就是元素的宽度
• 如果主轴是纵向的，则该值指定的就是元素的高度
• 默认值：auto，表示参考元素自身的高度或宽度
• 如果传递了一个具体的数值，则以该值为准

eg

li:nth-child(1) {

    background-color: #bfa;

    flex-basis: 200px;

}	

简写属性flex

flex可以设置弹性元素所有的三个样式flex：增长，缩减，基础

• initial 相当于 flex:0 1 auto
• auto 相当于 flex:1 1 auto
• none 相当于 flex:0 0 auto弹性元素没有弹性

order

• order决定弹性元素的排列顺序

eg

li:nth-child(1) {

    background-color: #bfa;

    order: 2;

}


li:nth-child(2) {

    background-color: red;

    order: 3;

}


li:nth-child(3) {

    background-color: green;

    order: 1;

}

4.补充：

弹性居中

justify-content: center;

align-items: center;