CSS3 弹性盒子

朱雀 2023-06-26 05:57 14阅读 0赞

### 目录 ###

*   *  弹性盒子的flex属性
     *  自元素的flex属性
     *  元素的土地扩张和收缩
     *  W3C标准盒子与IE怪异盒子

## 弹性盒子的flex属性 ##

关于盒子，我们都知道是用来存放元素的一种盒子模型，盒子模型又分为W3C盒子模型和IE怪异盒子模型，  
那么这个弹性盒子`flex`又是个什么东西呢？

**弹性盒子就是可以根据盒子 的大小自适应的进行我们想要摆放的一种方式进行展现出来。**

我们可以将盒子设置为`display:flex`弹性盒子和`inline-flex：`行内块弹性盒子，设置弹性盒子之后我们就可以控制子元素的一些排列元素等。

**设置子元素在主轴的排列方式** `flex-direction`

*  `flex-direction:row` 默认值 从左到右排列
 *  `flex-direction:column` 从上到下排列
 *  `flex-direction:row-reverse` 从右到左排列
 *  `flex-direction:column-reverse` 从下到上排列  
    ![在这里插入图片描述][20191230190728190.png]  
    **设置子元素是否换行**`flex-wrap`
 *  `flex-wrap:wrap` 换行
 *  `flex-wrap:nowrap` 不换行
 *  `flex-wrap:reverse` 反向换行  
    ![在这里插入图片描述][20191230191552130.png]

> 当元素**不换行时元素会自动压缩和扩张**，当元素**换行时元素会自动调整间距**。

**设置元素在主轴上的对齐方式**`justify-content`

*  `justify-content:flex-end` 主轴结束位置开始排列
 *  `justily-content:flex-start` 主轴开始位置开始排列
 *  `justily-content:center` 主轴居中排列
 *  `justily-content:space-around` 两端留白平均分布
 *  `justily-content:space-between` 两端平均分布  
    ![在这里插入图片描述][20191230192929657.png]  
    **设置在交叉轴的对齐方式**`algin-items`
    
     *  `algin-items:stretch` 默认值 子元素不设置高度默认为父元素高度
     *  `algin-items:flex-end` 设置子元素在交叉轴下方
     *  `algin-items:flex-start` 设置子元素在交叉轴上方
     *  `algin-items:center` 设置子元素在交叉轴居中
     *  `algin-items:baseline` 设置子元素文本基线统一

![在这里插入图片描述][20191230194108736.png]

> `stretch`在本身没有设置`height`属性时才生效。  
> `baseline`当第一个元素设置了`margin-top`等类似偏移的属性时后续元素会统一文本基线。

**交叉轴多行的对齐方式** `algin-content`

*  `algin-content:flex-end` 设置交叉轴结束位置排序
 *  `algin-content:flex-start` 设置交叉轴开始位置排序
 *  `algin-content:center` 设置交叉轴居中
 *  `algin-content:space-around` 设置交叉轴两端留白平均分布
 *  `algin-content:space-between` 设置交叉轴两端平均分布  
    ![在这里插入图片描述][20191230195555262.png]

## 自元素的flex属性 ##

**子元素设置在交叉轴的对齐方式** `algin-self`

> 在子元素中设置交叉轴的属性，**容器内只有单行元素时听自己的，多行元素时听父级元素的**。

**子元素设置排列循序** `order`

> 直接在子元素设置排列循序后，子元素会按照排列循序进行排列。

## 元素的土地扩张和收缩 ##

**子元素土地扩张** `flex-grow`

> 土地扩张是用来形容元素可以根据剩余空间的一个平均比例分配，直至将父元素全部填充。  
> 默认值为0，代表不参与瓜分。

![在这里插入图片描述][20191230202209737.png]

> 如上所示，一个弹性盒子内有剩余200的空间，此时给弹性盒子内的元素进行1:2:3的分配；  
> 元素1分配的土地为200\*（1/6）等于33.33  
> 元素2分配的土地为200\*（2/6）等于66.67  
> 元素3分配的土地为200\*（3/6）等于100  
> 计算公式：**元素扩张后的宽度=元素扩张前的宽度+元素剩余的宽度\*元素分配的比例**

**子元素土地收缩** `flex-shrink`

> 土地收缩就是弹性盒子内的子元素超出弹性盒子的界限时，土地会默认收缩

![在这里插入图片描述][20191230204832490.png]

> 如上所示，一个弹性盒子内有超出300的空间，此时弹性盒子默认进行1:1:1收缩。  
> 给弹性盒子内的元素进行设置1:2:3的分配；  
> 权重值：300*1+300*2+300*3=1800；  
> 元素1收缩的土地为（300*1/1800）*300等于50  
> 元素2收缩的土地为（300*2/1800）*300等于100  
> 元素3收缩的土地为（300*3/1800）\*300等于150

到这里大家可能会疑问，这不就是按照比例的进行缩放吗？为什么还需要计算的这么复杂！！！

## W3C标准盒子与IE怪异盒子 ##

> w3c标准盒子:boxwidth = padding*2 + width + border*2  
> ie6怪异盒子：boxwidth = width

在我们我们需要考虑W3C标准盒子模型和IE怪异盒子模型的width的计算方式。

[20191230190728190.png]: https://img-blog.csdnimg.cn/20191230190728190.png
[20191230191552130.png]: https://img-blog.csdnimg.cn/20191230191552130.png
[20191230192929657.png]: https://img-blog.csdnimg.cn/20191230192929657.png
[20191230194108736.png]: https://img-blog.csdnimg.cn/20191230194108736.png
[20191230195555262.png]: https://img-blog.csdnimg.cn/20191230195555262.png
[20191230202209737.png]: https://img-blog.csdnimg.cn/20191230202209737.png
[20191230204832490.png]: https://img-blog.csdnimg.cn/20191230204832490.png