3分钟快速掌握Css弹性盒子（伸缩盒子）布局

- 日理万妓 2022-12-13 00:45 380阅读 0赞

## 弹性盒子（flex） ##

1.**语法**：display：flex（定义当前元素为弹性盒子）

①弹性盒子是一种布局方式

②特点：改变子元素在父元素的排列方式

采用**flex**布局的元素可以叫做flex的容器，他的子元素也会自动成为容器，也叫作**flex项**，通俗点来说在flex布局中，行级元素不用转换为块级元素，也可以拥有块级元素的属性。

2.**弹性盒子的方向**：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center]弹性盒子的轴方向与我们日常学过的坐标轴类似，只不过主轴方向与x轴相同而交叉轴方向与坐标轴中y轴相反，当然这只是系统给出的默认值，我们还可以通过代码来实现改变弹性盒子的主轴方向：

\*\*语法：\*\***flex-direction**：主轴方向  
例子1.flex-direction:row;水平正向（也是主轴方向的默认值）如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 1]  
**2.flex-direction:row-reverse;(水平反向)**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 2]需要注意的时x轴方向改变不会影响交叉轴方向的改变

3.**flex-direction**：colum 垂直向下（交叉轴默认值）  
4.**flex-direction**:colum-reverse 垂直反向（箭头指着上方）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 3]**定义内部弹性盒子是否换行**  
**flex-wrap**：nowrap 不进行换行（默认值)  
内部元素呆在一行  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 4]**flex-wrap**：wrap 换行  
内部元素自动换行  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 5]  
**弹性盒子主轴的对齐方式**  
语法：**justify-content**：属性值；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 6]

①justify-content：flex-start 表示轴的开始方向对齐（默认值）  
如图元素靠左对齐  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 7]

②justify-content：flex-end 表示轴的结束方向对齐  
元素靠右对齐  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 8]

③justify-content：flex-center表示居中对齐  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 9]

④justify-content：flex-between表示元素两端对齐

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 10]⑤justify：space-around；两个元素的间隔时元素与边框距离的2倍

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 11]  
**元素在交叉轴的对齐方式**  
语法：align-items：属性值；  
①align-items：flex-start；交叉轴开始方向（默认值）  
②align-items：flex-end；交叉轴结束方向  
③align-items：flex-center；居中对齐

这三种对齐方式与主轴雷同，大家可以手动去试一试，接下来还有一个补充的对齐方式：  
align-items:baseline(基线对齐)元素基线对齐。

补充一个弹性盒子单元素居中的技巧：  
在弹性盒子中分别设置主轴上的居中和交叉轴上的居中就可以实现  
justify-content:center;  
align-items:center;  
![在这里插入图片描述][20201008204506329.png_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 12]  
好了，今天的分享就到这里明天继续。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/3de1d941978341be8ba4075679bd4338.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/83db97ca62a94eedae9fda7a36ad8c81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/dc3f9e2500ae4a5b9bfda759371b4472.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/3e8a95696c554c8ab2a679a91ee7d37d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/47955b9f9c4e4df3898d2fc5d7e10055.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/7380fd0a9660430f82b095040d4f9dc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/edc254f74fce4709915fe67b02a9b7dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/5ffba15aca654d888f54cadae3da8bb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/d2f0c08842e241039006107742d2ef64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/f191ddd7aef7487fa56d7987e5ad30d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/18ad7872f7184b7ab0a7716d49985708.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221123/613d2478068e4cf7b00421556228b145.png
[20201008204506329.png_pic_center]: /images/20221123/67cb0c65aa3f43eab1e74669c9c11bac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221123/49754e36301040089c91e8c00ed39c19.png