---
title: 伸缩盒模型
date: 2024-06-06T23:49:58Z
tags: []
---

## 伸缩容器

开启了flex的元素

1. 给元素设置:`display:flex`或`display:inline-flex`该元素就为改变伸缩容器
2. `display:inline-flex`很少使用,因为可以给多个可以伸缩的父容器,也设置为伸缩容器
3. 一个元素可以同时是伸缩容器和伸缩项目

## 伸缩项目

伸缩容器所有子元素自动成为了:伸缩项目

1. 仅伸缩容器的子元素成为了伸缩项目,孙子元素等后代,不会是伸缩项目
2. 无论是原来的哪种元素,一旦成了伸缩项目,全部会"块状化"

## 主轴与侧轴

主轴:伸缩项目沿着主轴排列,主轴默认是水平的,默认方向是:从左到右(左边起点,右边终点)
侧轴:与主轴垂直的就是侧轴,侧轴默认是垂直的,默认方向是:从上到下(上边起点,下边终点)

## 主轴方向

​`flex-direction`​  
常用值:

1. row:主轴方向水平从左到右 --默认值
2. row-reverce:主轴方向水平从右到左
3. column:主轴方向垂直从上到下
4. column-reverce:主轴方向垂直从下往上

> 改变了主轴的方向,侧轴方向也随之改变

## 主轴换行方式

​`flex-wrap`​  
常用值:

1. ​`nowrap`​:默认值,不换行
2. ​`wrap`​:自动换行,伸缩容器不够不够自动换行
3. ​`wrap-reverse`​:反向换行

## 主轴方向和换行复合属性

没有顺序要求  
​`flex-flow:flex-direction flex-wrap;`​

## 主轴对齐方式

​`justify-content`​  
属性值:

1. ​`flex-start`​:主轴起点对齐 --默认值
2. ​`flex-end:`​主轴终点对齐
3. ​`center`​:居中对齐
4. ​`space-between`​:均匀对齐,两端对齐(最常用)
5. ​`space-around`​:均匀分别,两端距离是中间距离的一半
6. ​`space-evenly`​:在侧轴上完全平分
7. ​`strech`​:占满整个侧轴 --默认值

## 侧轴对齐方式

### 单行

​`align-items`​  
属性值

1. ​`flex-start`​:侧轴的起点对齐
2. ​`flex-end`​:侧轴的终点对齐
3. ​`center`​:侧轴的中点对齐
4. ​`baseline`​:伸缩项目的第一行文字的基线对齐
5. ​`stretch`​:如果伸缩项目未设置高度,将占满整个容器的高度 --默认值

### 多行

​`align-content`​  
属性值

1. ​`flex-start`​:与侧轴的起点对齐
2. ​`flex-end`​:与侧轴的终点对齐
3. ​`center`​:与主轴的中点对齐
4. ​`space-between`​:与侧轴两端对齐,中间平均分布
5. ​`space-around`​:项目间的伸缩距离相等,比边缘大一倍
6. ​`space-evenly`​:在侧轴上完全平分
7. ​`strech`​:占满整个侧轴 --默认值

## 主轴的基准长度

​`flex-basis`​如果主轴横向:替代宽度;主轴纵向;替代高级  
作用:浏览器根据整个属性设置的值,计算主轴上是否右多余的空间;默认值auto,即:伸缩项目的宽和高

## 伸缩性

### 伸

​`flex-grow`​定义伸缩项目的放大比例,默认为0,即:纵使主轴存在剩余空间,也不拉伸(放大)  
若所有项目的flex-grow值为1,他们将等分剩余空间  
若项目分别设置了flex-grow值,则是该项目与所有flex-grow的值加起来的比例

### 缩

​`fkex-shrink`​定义了项目的压缩比例,默认为1,即:空间不足,该项目会缩小

1. 计算分母  
   ​`flex-shrink`​压缩比例  
   (项目1宽*项目1m)+(项目2宽*项目2m)=总宽度
2. 计算比例
   项目一:(项目1宽*项目1m)/总宽度=比例值1*​*项目二:(项目2宽*项目2m)/总宽度=比例值2
3. 计算了最终收缩大小
   项目一需要收缩:比例值*需要缩小的总宽*​*项目二需要收缩:比例值*需要缩小的总宽

## flex复合属性

复合了flex-grow,flex-shrink,flex-basis这三个属性
`flex:1 1 auto`,则可简写为:`flex:auto`
`flex:1 1 0`,则可简写为:`flex:1`
`flex:0 0 auto`,则可简写为:`flex:none`
`flex:0 1 auto`,则可简写为:`flex:0 none`  --即`flex`初始值

## 项目排序

​`order`​属性定义项目的排序顺序;数值越小,排名越靠前

## 单独对齐

​`align-self`​  
可以单端调整某个项目的对齐方式  
默认值为auto,表示基础父元素的align-items属性
