flex布局练习题，面试必备，持续更新建议收藏~

亦凉 2022-10-06 11:51 319阅读 0赞

## 先言： ##

现在网页布局大多都是flex布局，像浮动这些用得比较少，在面试中flex也是被经常问到的。而有些同学学完flex后，又不懂怎么练习巩固，所以，所以，所以，我汇聚了一些常见的flex的练习题案例，写完再次加强掌握flex~

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]

## 第一题： ##

效果如下，先看效果自己写或者思考，最后再看代码：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 1]  
html：

css：

.container{ 
      width: 300px;
      height: 300px;
      background-color: skyblue;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .item{ 
      width: 100px;
      height: 100px;
      background-color: blue;
    }

## 第二题： ##

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 2]  
html:

css:

.container{ 
      width: 300px;
      height: 300px;
      background-color: skyblue;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      align-content: space-around;
    }
    .item{ 
      width: 80px;
      height: 80px;
      background-color: blue;
    }

## 第三题： ##

先看效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 3]html:

css:

.container{ 
      width: 300px;
      height: 300px;
      background-color: skyblue;
      display: flex;
      justify-content: space-between;
    }
    .item{ 
      width: 80px;
      height: 80px;
      background-color: blue;
    }
    .container div:nth-of-type(2){ 
        align-self: flex-end;
    }

## 第四题： ##

先看效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 4]  
html:

css:

## 第五题： ##

先看效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 5]  
html：

css：

.container{ 
      width: 300px;
      height: 300px;
      background-color: skyblue;
      display: flex;
      justify-content: space-between;
    
    }
    .item{ 
      width: 80px;
      height: 80px;
      background-color: blue;
      border: 1px solid green;
    }
    .first,.second{ 
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

## 第六题： ##

先看效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 6]  
html:

css:

.container{ 
      width: 300px;
      height: 300px;
      background-color: skyblue;
      display: flex;
      justify-content: space-between;
    
    }
    .item{ 
      width: 80px;
      height: 80px;
      background-color: blue;
      border: 1px solid green;
    }
    .first,.three{ 
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .second{ 
      align-self: center;
    }

## 第七题： ##

先看效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 7]

html：

css：

.container{ 
      width: 300px;
      height: 300px;
      background-color: skyblue;
      display: flex;
      justify-content: space-between;
    
    }
    .item{ 
      width: 80px;
      height: 80px;
      background-color: blue;
      border: 1px solid green;
    }
    .first,.second,.three{ 
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

## 第八题： ##

先看效果，两边盒子宽不变，中间盒子动态适应宽度大小：

![在这里插入图片描述][20210613143142423.gif_pic_center]  
html：

css：

.container{ 
      width:100%;
      height: 100px;
      background-color: skyblue;
      display: flex;
      justify-content: space-around;
    }
    .first{ 
      width:100px;
      background-color: red;
    }
    .second{ 
      background-color: orange;
      flex-grow: 1;
    }
    .third{ 
      width:100px;
      background-color: pink;
    }

## 第九题： ##

先看效果,左右上下都能动态调整大小：

![在这里插入图片描述][20210613145519878.gif_pic_center]  
html：

css：

.container{ 
      height: 100vh;
      background-color: skyblue;
      display: flex;
      flex-direction: column;
    }
    .head{ 
       background-color: blue;
       flex-grow: 2;
    }
    .body{ 
      display: flex;
      flex-grow: 5;
    }
    .body-left{ 
       background-color: green;
      flex-grow: 1;
    }
    .body-center{ 
       background-color: pink;
      flex-grow: 5;
    }
    .footer{ 
      flex-grow: 1;
       background-color: orange;
    }

## 第十题： ##

先看效果，也是动态改变大小的：

![在这里插入图片描述][20210613155720998.gif_pic_center]  
html:

css:

.container{ 
      height: 100vw;
      width: 100vw;
      background-color: skyblue;
      display: flex;
      flex-direction: column;
      
     }
    .item{ 
      flex: 1;
    }
    
    .first{ 
      display: flex;
      flex: 1;
    }
    .second{ 
       display: flex;
       flex: 2;
    }
    .box{ 
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    .bigitem{ 
      flex: 2;
    }

## 总结： ##

建议收藏，这篇文章持续更新，会一直添加flex布局案例练习题~

**~关注我看更多简单创意特效：**  
[文字烟雾效果 html+css+js][html_css_js]  
[环绕倒影加载特效 html+css][html_css]  
[气泡浮动背景特效 html+css][html_css 1]  
[简约时钟特效 html+css+js][html_css_js 1]  
[赛博朋克风格按钮 html+css][html_css 2]  
[仿网易云官网轮播图 html+css+js][html_css_js 2]  
[水波加载动画 html+css][html_css 3]  
[导航栏滚动渐变效果 html+css+js][html_css_js 3]  
[书本翻页 html+css][html_css 4]  
[3D立体相册 html+css][3D_ html_css]  
[霓虹灯绘画板效果 html+css+js][html_css_js 4]  
[记一些css属性总结（一）][css]  
[Sass总结笔记 ][Sass_]  
…等等  
[进我主页看更多~][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/e988035e5ca041c7ae1d0cf7a2105d1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221005/5b57dbd9778e40f59dc73923d11c823d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221005/60a6b2e15e8442a19b260721ffd550d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221005/c3ef191105c8496cba12ca6eee451c22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221005/2ac800ac02b04a40be78afd05b8175cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221005/efbf38e8d2d74f389928849cc475ad75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221005/2478e3b03ade480ba654f7cc8b9ff605.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221005/b3533ad5bd5f44f18903e0af13349b2a.png
[20210613143142423.gif_pic_center]: /images/20221005/08c330ea99ec4899b84584af992f4483.png
[20210613145519878.gif_pic_center]: /images/20221005/369cb2ae422f4602ad02c069ed8080e1.png
[20210613155720998.gif_pic_center]: /images/20221005/4a73b0ff58d64c46a3527c569843bec1.png
[html_css_js]: https://blog.csdn.net/luo1831251387/article/details/116452424
[html_css]: https://blog.csdn.net/luo1831251387/article/details/115534417
[html_css 1]: https://blog.csdn.net/luo1831251387/article/details/113657124
[html_css_js 1]: https://blog.csdn.net/luo1831251387/article/details/113436552
[html_css 2]: https://blog.csdn.net/luo1831251387/article/details/113360844
[html_css_js 2]: https://blog.csdn.net/luo1831251387/article/details/114393724
[html_css 3]: https://blog.csdn.net/luo1831251387/article/details/111714413
[html_css_js 3]: https://blog.csdn.net/luo1831251387/article/details/111601962
[html_css 4]: https://blog.csdn.net/luo1831251387/article/details/111398881?spm=1001.2014.3001.5502
[3D_ html_css]: https://blog.csdn.net/luo1831251387/article/details/111032274?spm=1001.2014.3001.5502
[html_css_js 4]: https://blog.csdn.net/luo1831251387/article/details/114338506
[css]: https://blog.csdn.net/luo1831251387/article/details/111320280
[Sass_]: https://blog.csdn.net/luo1831251387/article/details/113179630
[Link 1]: https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343