Flex布局【弹性布局】学习

先让我们看看在原来的学习中遇到的问题

之前在软件工程的大作业中，自己从零开始学习如何开发一个网站，从页面，到后台，当然数据库是大二的必修课

在学习如何编写一个静态页面的时候，完全是自学，自己摸索，所以遇到了很多问题，自己花费了太多时间去解决问题，今天就拿其中一个比较让我头疼的问题来引出今天的话题

当时在初识html、css的时候，遇到了水平排放的问题，当然这个一下子就查出来了，使用 float ，但是使用了 float 会使子元素脱离父元素的布局，父元素的高度会变成 0 ，从而根本展示不出来

这个问题我当时是意识不到的，只能发现“卧槽，父元素咋就不见了呢？”

然后知道了要用 clear 清除浮动具体解决过程如下：

1.一开始只能垂直排放

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>flex布局学习</title>
 6         <style media="screen">
 7             .father{
 8                 width: 500px;
 9                 height: 500px;
10                 border: 2px solid black;
11             }
12             .d1{
13                 width: 200px;
14                 height: 200px;
15                 background-color: red;
16             }
17             .d2{
18                 width: 200px;
19                 height: 200px;
20                 background-color: green;
21             }
22         </style>
23     </head>
24     <body>
25         <div class="father">
26             <div class="d1"></div>
27             <div class="d2"></div>
28         </div>
29     </body>
30 </html>

2.1在css部分添加 float，并再添加一个粉色的且不需要浮动的d3

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>flex布局学习</title>
 6         <style media="screen">
 7             .father{
 8                 width: 500px;
 9                 height: 500px;
10                 border: 2px solid black;
11             }
12             .d1{
13                 width: 200px;
14                 height: 200px;
15                 background-color: red;
16                 float: left;
17             }
18             .d2{
19                 width: 200px;
20                 height: 200px;
21                 background-color: green;
22                 float: left;
23             }
24             .d3{
25                 width: 300px;
26                 height: 300px;
27                 background-color: pink;
28                 /*float: left;*/
29             }
30         </style>
31     </head>
32     <body>
33         <div class="father">
34             <div class="d1"></div>
35             <div class="d2"></div>
36             <div class="d3"></div>
37         </div>
38     </body>
39 </html>

会出现如下的bug：

2.2如果我们删除d3，且把 father的高度设为默认会出现如下的 bug：

具体原因上面已经说过了这里不再赘述，反正很麻烦，很不好看就是了

我们要怎么解决呢？

3.给父元素加清浮动

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>flex布局学习</title>
 6         <style media="screen">
 7             .clear::after{
 8                 display: block;
 9                 content: ‘‘;
10                 clear: both;
11             }
12             .father{
13                 width: 500px;
14                 /*height: 500px;*/
15                 border: 2px solid black;
16             }
17             .d1{
18                 width: 200px;
19                 height: 200px;
20                 background-color: red;
21                 float: left;
22             }
23             .d2{
24                 width: 200px;
25                 height: 200px;
26                 background-color: green;
27                 float: left;
28             }
29             /*.d3{
30                 width: 300px;
31                 height: 300px;
32                 background-color: pink;
33             }*/
34         </style>
35     </head>
36     <body>
37         <div class="father clear">
38             <div class="d1"></div>
39             <div class="d2"></div>
40             <!-- <div class="d3"></div> -->
41         </div>
42     </body>
43 </html>

上次在一个公众号里看到了一篇文章介绍了 flex布局（弹性布局），今天打算学习一下

1.对应上面的问题我们从新写一个 display为 flex的 div

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>flex布局学习</title>
 6         <style media="screen">
 7             .clear::after{
 8                 display: block;
 9                 content: ‘‘;
10                 clear: both;
11             }
12             .father{
13                 width: 500px;
14                 /*height: 500px;*/
15                 border: 2px solid black;
16             }
17             .d1{
18                 width: 200px;
19                 height: 200px;
20                 background-color: red;
21                 float: left;
22             }
23             .d2{
24                 width: 200px;
25                 height: 200px;
26                 background-color: green;
27                 float: left;
28             }
29         </style>
30         <style media="screen">
31             .flex-father{
32                 display: flex;
33                 width: 500px;
34                 /*height: 500px;*/
35                 border: 2px solid black;
36             }
37             .f1{
38                 width: 200px;
39                 height: 200px;
40                 background-color: red;
41             }
42             .f2{
43                 width: 200px;
44                 height: 200px;
45                 background-color: green;
46             }
47         </style>
48     </head>
49     <body>
50         <div class="father clear">
51             <div class="d1"></div>
52             <div class="d2"></div>
53         </div>
54         <div class="flex-father">
55             <div class="f1"></div>
56             <div class="f2"></div>
57         </div>
58     </body>
59 </html>

我们可以发现效果是一模一样的

2.当子元素总宽度小于父元素时，是正常展示的，那我们再加几个子元素试试

我们可以发现 flex布局中的子元素被自动压缩来适应父元素的大小

如果我们不想子元素被压缩，可以给子元素添加 flex-shrink：0;

.f1, .f2{
    flex-shrink: 0;
}

flex-shrink为1则默认收缩

flex-shirink为0则不收缩

一、flex与主轴方向

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>flex布局的主轴</title>
 5     <style>
 6         .father-flex{
 7             width: 800px;
 8             height: 200px;
 9             background-color: #cccccc;
10             display: flex;
11             /*主轴方向默认为 水平从左向右*/
12             /* flex-direction: row;    */
13
14             /* 主轴方向，水平从右往左 */
15             /* flex-direction: row-reverse; */
16
17             /* 主轴方向从上往下 */
18             /* flex-direction: column; */
19
20             /*主轴方向从下往上  */
21             /* flex-direction: column-reverse; */
22         }
23         .item{
24             width: 200px;
25             height: 200px;
26             border: 1px dashed #333333;
27             box-sizing: border-box;
28             font-size: 40px;
29             text-align: center;
30             line-height: 200px;
31         }
32     </style>
33 </head>
34 <body>
35    <div class="father-flex">
36        <div class="item">1</div>
37        <div class="item">2</div>
38        <div class="item">3</div>
39        <div class="item">4</div>
40    </div>
41 </body>
42 </html>

二、flex与换行

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>flex换行</title>
 5     <style>
 6         .father-flex{
 7
 8             width: 800px;
 9             /* height: 200px; */
10             background-color: #cccccc;
11
12             display: flex;
13             /*主轴方向默认为 水平从左向右*/
14             flex-direction: row;
15
16             /* flex默认的里面的子元素是不换行，当超出时会压缩 */
17             /* 换行 第一行在上方 */
18             /* flex-wrap: wrap; */
19
20             /* 换行 第一行在下方  */
21             flex-wrap: wrap-reverse;
22         }
23         .item{
24             width: 200px;
25             height: 200px;
26             border: 1px dashed #333333;
27             box-sizing: border-box;
28             font-size: 40px;
29             text-align: center;
30             line-height: 200px;
31         }
32     </style>
33 </head>
34 <body>
35    <div class="father-flex">
36        <div class="item">1</div>
37        <div class="item">2</div>
38        <div class="item">3</div>
39        <div class="item">4</div>
40        <div class="item">5</div>
41    </div>
42 </body>
43 </html>

三、flex子元素在主轴上的对齐方式

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>flex项目在主轴上的对齐方式</title>
 5     <style>
 6         .father-flex{
 7
 8             width: 800px;
 9             /* height: 200px; */
10             background-color: #cccccc;
11
12             display: flex;
13             /*主轴方向默认为 水平从左向右*/
14             flex-direction: row;
15
16             /* 项目在主轴上默认为 靠近起点 */
17             /* justify-content: flex-start; */
18
19             /* 项目在主轴上居中 */
20             /* justify-content: center; */
21
22             /* 项目在主轴上  靠近终点*/
23             /* justify-content: flex-end; */
24
25             /* 项目在主轴上 两端对齐（项目之间的间隔都相等） */
26              justify-content: space-between;
27
28             /* 每个项目两侧的间隔都相等 */
29             /*justify-content: space-around;*/
30
31
32         }
33         .item{
34             width: 200px;
35             height: 200px;
36             border: 1px dashed #333333;
37             box-sizing: border-box;
38             font-size: 40px;
39             text-align: center;
40             line-height: 200px;
41         }
42     </style>
43 </head>
44 <body>
45
46
47
48    <div class="father-flex">
49        <div class="item">1</div>
50        <div class="item">2</div>
51        <div class="item">3</div>
52        <!-- <div class="item">4</div> -->
53    </div>
54
55 </body>
56 </html>

四、flex子元素在交叉轴上的对齐方式

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>flex项目在交叉轴上的对齐方式</title>
 5     <style>
 6         .father-flex{
 7             width: 800px;
 8             height: 200px;
 9             background-color: #cccccc;
10             display: flex;
11             flex-direction: row;
12             /* 项目（子元素）在交叉轴上默认是交叉轴的起点 */
13             /* align-items:  flex-start; */
14
15             /* 项目在交叉轴上 居中对齐 */
16              /*align-items: center; */
17
18             /* 项目在交叉轴的终点 */
19             /* align-items: flex-end; */
20
21             /* 项目在交叉轴上 占满容器的高度  项目高度为auto*/
22             /* align-items: stretch; */
23
24             /* 项目在交叉轴上 基于第一行文字的基线对齐 */
25             align-items: baseline;
26         }
27         .item{
28             width: 100px;
29             height: 100px;
30             border: 1px dashed #333333;
31             box-sizing: border-box;
32             font-size: 24px;
33             text-align: center;
34             /* line-height: 100px; */
35             word-break: break-all;
36         }
37         .item2{
38             font-size: 16px;
39         }
40     </style>
41 </head>
42 <body>
43    <div class="father-flex">
44        <div class="item">111111111111111111111111111111111111111111111111111111111111</div>
45        <div class="item item2">2222222222222222222222222222222222222222222222222</div>
46
47    </div>
48 </body>
49 </html>

五、项目的排序

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>flex项目的排序</title>
 5     <style>
 6         .father-flex{
 7             width: 800px;
 8             height: 200px;
 9             background-color: #cccccc;
10
11             display: flex;
12             /*主轴方向默认为 水平从左向右*/
13             flex-direction: row;
14         }
15         .item{
16             width: 200px;
17             height: 200px;
18             border: 1px dashed #333333;
19             box-sizing: border-box;
20             font-size: 40px;
21             text-align: center;
22             line-height: 200px;
23         }
24         .ff{
25             /* 数值越小，排序越靠前，默认为0 */
26             order: 1;
27         }
28     </style>
29 </head>
30 <body>
31    <div class="father-flex">
32        <div class="item">1</div>
33        <div class="item ff">2</div>
34        <div class="item">3</div>
35    </div>
36 </body>
37 </html>

六、子元素在交叉轴独自的对齐方式

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>flex项目单独在交叉轴上的对齐方式</title>
 5     <style>
 6         .father-flex{
 7             width: 800px;
 8             height: 200px;
 9             background-color: #cccccc;
10             display: flex;
11             flex-direction: row;
12             /* 项目（子元素）在交叉轴上默认是交叉轴的起点 */
13             /* align-items:  flex-start; */
14
15             /* 项目在交叉轴上 居中对齐 */
16             align-items: center;
17
18             /* 项目在交叉轴的终点 */
19             /* align-items: flex-end; */
20
21             /* 项目在交叉轴上 占满容器的高度  项目高度为auto*/
22             /* align-items: stretch; */
23         }
24         .item{
25             width: 100px;
26             height: 100px;
27             border: 1px dashed #333333;
28             box-sizing: border-box;
29             font-size: 24px;
30             text-align: center;
31             line-height: 100px;
32
33         }
34         .item3{
35             /* 项目与其他项目不一样的对齐方式 */
36             /* align-self: flex-start; */
37             /* align-self: flex-end; */
38             /* align-self: stretch; */
39             align-self: baseline;
40         }
41
42     </style>
43 </head>
44 <body>
45    <div class="father-flex">
46        <div class="item">1</div>
47        <div class="item">2</div>
48        <div class="item item3">3</div>
49    </div>
50 </body>
51 </html>

七、flex与栅格化布局

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>flex与栅格化布局</title>
 5     <style>
 6         .imgCnt {
 7             display: flex;
 8             width: 640px;
 9             flex-direction: row;
10             background-color: #dddddd;
11             flex-wrap: wrap;
12         }
13         .imgItem {
14             width: 20%;
15             border-bottom: 1px solid #dddddd;
16             border-right: 1px solid #dddddd;
17             box-sizing: border-box;
18         }
19         img{
20             /* 这个还蛮重要的，因为图片的默认布局是行内布局 */
21             display: block;
22             width: 100%;
23         }
24     </style>
25 </head>
26
27 <body>
28     <div class="imgCnt">
29         <div class="imgItem">
30             <img src="logo.png" />
31         </div>
32         <div class="imgItem">
33             <img src="logo.png" />
34         </div>
35         <div class="imgItem">
36             <img src="logo.png" />
37         </div>
38         <div class="imgItem">
39             <img src="logo.png" />
40         </div>
41         <div class="imgItem">
42             <img src="logo.png" />
43         </div>
44         <div class="imgItem">
45             <img src="logo.png" />
46         </div>
47         <div class="imgItem">
48             <img src="logo.png" />
49         </div>
50         <div class="imgItem">
51             <img src="logo.png" />
52         </div>
53         <div class="imgItem">
54             <img src="logo.png" />
55         </div>
56         <div class="imgItem">
57             <img src="logo.png" />
58         </div>
59     </div>
60 </body>
61 </html>

八、flex布局图文列表

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>flex布局图文列表</title>
 5     <style>
 6         .goodList{
 7             width: 640px;
 8             background-color: #dddddd;
 9             display: flex;
10             flex-direction: column;
11         }
12         .listItem{
13             display: flex;
14             flex-direction: row;
15             align-items: stretch;
16         }
17         .imgBox{
18             flex: 3;
19         }
20         .imgBox img{
21             display: block;
22             width: 100%;
23         }
24         .goodInfoBox{
25             flex: 7;
26             padding: 10px 0;
27             padding-left:10px;
28             display: flex;
29             flex-direction: column;
30             justify-content: space-around;
31         }
32         .goodInfoBox p,
33         .goodInfoBox h3{
34             margin: 0;
35         }
36     </style>
37 </head>
38 <body>
39     <div class="goodList">
40         <div class="listItem">
41             <div class="imgBox">
42                 <img src="good.png"/>
43             </div>
44             <div class="goodInfoBox">
45                 <h3>联想lenovo小新V4000 15.6英寸笔记本电脑</h3>
46                 <p>月售542笔</p>
47                 <p>售价：￥1999</p>
48             </div>
49         </div>
50     </div>
51 </body>
52 </html>

今天的学习就告一段落

参考资料：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

以及非常感谢B站up主的视频！！！

原文地址：https://www.cnblogs.com/liwenchi/p/8452776.html

时间： 2024-10-02 02:41:07

Flex布局【弹性布局】学习的相关文章

flex布局弹性布局

一.什么是Flex布局? Flex是Flexible Box的缩写,顾名思义为“弹性布局”,用来为盒装模型提供最大的灵活性. 任何一个容器都可以指定为Flex 布局. 1 2 3 .box{ display:flex; } 行内元素也可以使用Flex布局. 1 2 3 .box{ display:inline-flex; } webkit内核的浏览器,必需加上-webkit前缀 1 2 3 4 .box{ display:-webkit-flex; display

css布局弹性布局和网格布局

这里就不写这两种布局的内容了弹性布局链接:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网格布局链接:https://www.jianshu.com/p/d183265a8dad 小测试: 用 flex 与 grid 实现如下即可: <html> <head> <style> /* flex */ .box { display: flex; flex-wrap: wrap; width: 100%;

Flex弹性布局在移动设备上的应用

引文首先,我们有表格布局.当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局. 然后是现在大多数人都在使用的浮动布局.我们可以使用任何我们想用的元素,但浮动并不适用于初学者.表面上它看起来很基础,但背后复杂的功能可以使经验丰富的开发者看着自己的屏幕不知所措.另外,浮动布局有一个缺点就是需要通过额外的元素清除浮动,或者更好一点,可以清除CSS浮动而不添加额外的标签. 这些缺点使得浮动布局不是很容易掌握,因为没有一个默认的方法可以建立起浮动与元素之间的关系,所

两点补充——CSS3新属性以及弹性布局

CSS3 新属性一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋二 .[CSS 长度单位] 1.px:像素.长度固定,表示分辨率占几个像素点: 2.%:表示相对于默认值的百分比: 3.em:长度与元素的字号挂钩. rem:长度与根元素的字号挂钩. 即与html 的 font-size 挂钩,若不设置,默认16px . [ em与rem区别 ] em与当前元素自身的font-size挂钩

css3弹性布局语法全解

本文介绍css3弹性布局的语法 html布局 <div class="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> css写法(弹性布局默认是x轴为主轴,并且从左到右依次显示) .box{ widt

16.弹性布局

弹性布局(Flexible Layout) 1.什么是弹性布局弹性布局(Flexible Layout),是一种布局方式,是一种解决某元素中"子元素"的布局方式 2.flex的容器将元素变为flex容器后,那么所有的子元素都将成为flex项目,都允许按照弹性布局的方式来排列如何将元素变为 flex 的容器 ??? 属性:display 取值: 1.flex:将块级元素变为弹性布

流动布局和弹性布局

流体布局弹性布局混合布局实现方式百分比把px转化成em(width) 用em设置宽度,用百分比设置最大宽度缺点改良方法设置min-width 设置max-width ps:一般浏览器的默认字号是16px,在使用默认字号时1em相当于10px

布局的几种方式（静态布局、自适应布局、流式布局、响应式布局、弹性布局）

一.静态布局(static layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端. 2.设计方法 PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查

关于静态布局、自适应布局、流式布局、响应式布局、弹性布局的一些概念

一.静态布局(Static Layout)即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见与pc端.2.设计方法: PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅

页面布局的几种方式（静态化布局，流式布局，自适应布局，响应式布局，弹性布局）

一.静态布局(static layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端. https://developers.google.com/search/mobile-sites/mobile-seo/respon