css3的flex布局
2021-06-24 19:06
标签：class 没有 文档 log using 模型 char http 总结 今天看到百度前端学院有关于flex布局方面的内容，就看了下flex布局，顺便做下总结，方便自己以后看。内容大概分几个方面，一、flex布局的好处以及应用场景；二、原理；三、基本内容；四、demo； 一、flex布局的好处以及应用场景： flex好处就是灵活方便，大多应用在移动端，pc端由于兼容问题应用不太广泛。 二、原理： 说到原理说神马呢？先说下常见的布局吧：一、固定布局：就是宽高都固定的那种，width:500px;height:100px;二、流体式布局：width:100%;height:10%；移动端用rem； 三、弹性布局：就是flex布局；四：position:absolute;float:left;之类的脱离文档流的形式；flex属于弹性布局；弹性布局是 一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。 三、基本内容：包括一些基本属性，用法，参考下列网址 https://segmentfault.com/a/1190000002910324 http://www.w3cplus.com/css3/flexbox-basics.html https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes 四、demo：包含了flex一些基本用法； 参考内容： http://blog.csdn.net/u010297791/article/details/54945290 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html https://segmentfault.com/a/1190000002910324 http://www.w3cplus.com/css3/flexbox-basics.html https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes http://www.cnblogs.com/imwtr/p/4767664.html css3的flex布局 标签：class 没有 文档 log using 模型 char http 总结 原文地址：http://www.cnblogs.com/gaoxuerong123/p/7157621.html
1 DOCTYPE html>
2 html>
3 head>
4 meta charset="UTF-8">
5 title>title>
6 style>
7 body{
8 background-color: #CCCCCC;
9 padding: 0;
10 margin: 0;
11 }
12 .box1 {
13 background-color: #fff;
14 display: flex;
15 flex-flow: row wrap;
16 }
17 .box2 {
18 background-color: #fff;
19 display: flex;
20 justify-content: space-around;
21 }
22 .box3 {
23 background-color: #fff;
24 display: flex;
25 justify-content: flex-end;
26 }
27 .box4 {
28 background-color: #fff;
29 display: flex;
30 justify-content: space-between;
31 }
32 .box5 {
33 background-color: #fff;
34 display: flex;
35 flex-wrap: wrap;
36 align-items: flex-start;
37 margin: 10px;
38 }
39 .box6 {
40 background-color: #fff;
41 display: flex;
42 flex-flow: row wrap;
43 }
44 .item{
45 text-align: center;
46 margin: 5px;
47 width: 50px;
48 height: 50px;
49 border-radius: 100%;
50 background-color: #000;
51 color: #fff;
52 }
53 .item2{
54 text-align: center;
55 margin: 5px;
56 width: 40px;
57 height: 40px;
58 border-radius: 100%;
59 background-color: #000;
60 color: #fff;
61 }
62 .item5{
63 text-align: center;
64 margin: 5px;
65 width: 40px;
66 height: 40px;
67 border-radius: 100%;
68 background-color: #000;
69 color: #fff;
70 order: 3;
71 }
72 .item6{
73 text-align: center;
74 margin: 5px;
75 width: 40px;
76 height: 40px;
77 border-radius: 100%;
78 background-color: #000;
79 color: #fff;
80 order: 2;
81 }
82 .item7{
83 text-align: center;
84 margin: 5px;
85 width: 40px;
86 height: 40px;
87 border-radius: 100%;
88 background-color: #000;
89 color: #fff;
90 order: 1;
91 }
92 .item8{
93 text-align: center;
94 margin: 5px;
95 width: 40px;
96 height: 40px;
97 border-radius: 100%;
98 background-color: #000;
99 color: #fff;
100 order: 0;
101 }
102 style>
103 head>
104 body>
105 div class="box1">
106 display: flex;
107 flex-flow: row wrap;
108 span class="item">1span>
109 span class="item">2span>
110 span class="item">3span>
111 span class="item">4span>
112 span class="item">5span>
113 span class="item">6span>
114 div>
115 div class="box2">
116 justify-content: space-around;
117 span class="item">1span>
118 span class="item">2span>
119 span class="item">3span>
120 span class="item">4span>
121 span class="item">5span>
122 span class="item">6span>
123 div>
124 div class="box3">
125 justify-content: flex-end;
126 span class="item">1span>
127 span class="item">2span>
128 span class="item">3span>
129 span class="item">4span>
130 span class="item">5span>
131 span class="item">6span>
132 div>
133 div class="box4">justify-content: space-between;
134 span class="item">1span>
135 span class="item">2span>
136 span class="item">3span>
137 span class="item">4span>
138 span class="item">5span>
139 span class="item">6span>
140 div>
141 div class="box5">align-items: flex-start;
142 span class="item">1span>
143 span class="item2">2span>
144 span class="item">3span>
145 span class="item2">4span>
146 span class="item">5span>
147 span class="item2">6span>
148 span class="item">1span>
149 span class="item">2span>
150 span class="item2">3span>
151 span class="item">4span>
152 span class="item">5span>
153 span class="item2">6span>
154 span class="item">1span>
155 span class="item">2span>
156 span class="item2">3span>
157 span class="item">4span>
158 span class="item2">5span>
159 span class="item">6span>
160 span class="item2">1span>
161 span class="item">2span>
162 span class="item2">3span>
163 span class="item">4span>
164 span class="item2">5span>
165 span class="item">6span>
166 span class="item">1span>
167 span class="item">2span>
168 span class="item2">3span>
169 span class="item2">4span>
170 span class="item">5span>
171 span class="item">6span>
172 div>
173 div class="box6">order
174 span class="item5">1span>
175 span class="item6">2span>
176 span class="item7">3span>
177 span class="item8">4span>
178 div>
179 body>
180 html>
1 DOCTYPE html>
2 html lang="en">
3 head>
4 meta charset="UTF-8">
5 title>centertitle>
6 style>
7 body{
8 padding: 0;
9 margin: 0;
10 }
11 .parent {
12 flex-flow: row wrap;
13 display: flex;
14 height: 100px;
15 }
16 .a {
17 width: 100px;
18 border: 1px solid #FF0000;
19 flex-grow: 1;
20
21 }
22 .b {
23 width: 100px;
24 border: 1px solid #FF0000;
25 flex-grow: 2;
26
27 }
28 .c {
29 width: 100px;
30 border: 1px solid #FF0000;
31 flex-grow: 3;
32
33 }
34 style>
35 head>
36 body>
37 div class="parent">
38 div class="a">1div>
39 div class="b">2div>
40 div class="c">3div>
41 div>
42 body>
43 html>