微信扫一扫打赏支持

范仁义css3课程---41、弹性盒子（flex）介绍

范仁义css3课程---41、弹性盒子（flex）介绍

一、总结

一句话总结：

弹性盒子主要是设置display属性为flex，用于多列布局，功能强大，操作特别简单。

 

1、查询前端兼容性的网站？

can i use：https://www.caniuse.com/

 

2、flex布局特点？

flex布局默认不换行，会自动调整里面子元素的宽度，子元素的最小宽度为子元素里面内容的宽度，如果flex盒子的宽度小于子元素内容宽度的和，则会溢出

 

 

 

 

二、弹性盒子（flex）介绍

博客对应课程的视频位置：41、弹性盒子（flex）介绍
https://www.fanrenyi.com/video/10/99

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>弹性盒子（flex）介绍</title>
 6     <style>
 7         .flex_box{
 8             /*width: 50px;*/
 9             height: 300px;
10             background-color: lightblue;
11             display: flex;
12         }
13         .flex_box .item{
14             width: 50px;
15             height: 50px;
16             border: 1px solid red;
17             box-sizing: border-box;
18             /*float: left;*/
19         }
20     </style>
21 </head>
22 <body>
23 <!--
24 弹性盒子可以做什么
25 
26 多列布局，
27 功能强大
28 使用简单 display: flex;
29 
30 前端兼容性的网站
31 can i use
32 
33 浮动布局和flex做多列的区别
34 浮动会换行
35 flex默认不换行，默认是挤压子元素的宽度，挤压的最小的宽度就是子元素里面内容撑开的宽度
36 如果父元素的宽度小于子元素内容撑开的宽度和，那么子元素会溢出
37 
38 
39 
40 -->
41 <div class="flex_box">
42     <div class="item">1</div>
43     <div class="item">2</div>
44     <div class="item">3</div>
45     <div class="item">4</div>
46     <div class="item">5</div>
47     <div class="item">6</div>
48     <div class="item">7</div>
49     <div class="item">8</div>
50 </div>
51 
52 </body>
53 </html>

 

 

 

 

 

 

 
posted @ 2020-02-23 01:19  范仁义  阅读(307)  评论(0)  编辑  收藏  举报