css弹性布局⾃动换⾏怎么实现,⽹页设计常⽤布局之CSS弹性
布局
#⽹页设计#在⽹页设计中内容的排版和布局往往是整个设计⼯作的重点和难点，如果能熟练掌握CSS弹性布局的话，⽆论是页⾯的整体设计还是局部内容的布局，都能起到事半功倍的效果。尤其是对⾮专业的或刚开始从事前端开发的⼈，掌握了这种布局⽅式会让⼈有⼀种瞬间顿悟的感觉：⽹页布局也不过如此嘛。下⾯让我们⼀起来看看CSS弹性布局的奇妙之处。
⾸先在我们在屏幕⽣成⼀个宽300px，⾼200px的DIV作为容器，通过display: flex属性，可将该DIV声明为块级弹性容器
.div1{display:flex;width:300px;heigth:200px;border: 1px solid orange;}
css布局左边固定右边自适应
我们可以把这个容器想象成⼀个箱⼦，往箱⼦⾥⾯摆放了三个球，下⾯看看球的⼏种摆放⽅式，先定义⼀个球的样式
.
ball {width: 50px;height: 50px;border: 1px solid #2196f3;border-radius: 50%;display: flex;justify-content: center;align-items: center;font-size: 28px;}
将球放进容器⾥
定义了6中摆放⽅式，其中第⼀排箱⼦主要应⽤了justify-content属性，这个属性可以理解为⽔平对齐⽅式，第⼆排主要应⽤了align-items 属性，这个属性可以理解为垂直的对齐⽅式。具体的属性值请参考下表。
左上⾓第⼀个为序号1，以此类推
除了上⾯6种对齐⽅式外，还有很多很多种，感兴趣的可以⼀⼀尝试⼀下。只要把块级元素声明为弹性的，⾥⾯的元素可以通过各种⽅式随意摆放。如果箱⼦⾥⾯的球太多的话，也可以设置为⾃动换⾏⽅式，设置属性flex-wrap: wrap即可
flex-wrap: wrap;justify-content: space-around;align-content: flex-start;
通过属性flex-wrap:wrap设置箱⼦内的球⾃动换⾏，同是将⽔平对齐设置为两头有空⽩的两端对齐(spa
ce-around，两头没有空⽩的是space-between)，将垂直对齐⽅式设置为顶部对齐align-content: flex-start，得到下图的摆放⽅式。
在了解了弹性布局后我们来看看实际项⽬中有哪些地⽅可以⽤到弹性布局来快速解决问题
完全居中对齐
有时我们想在⼀个格⼦内显⽰的⽂本或图⽚要⽔平和垂直⽅向都是居中对齐的，就是显⽰在格⼦的正中央，使⽤弹性布局的⽔平和垂直⽅向都是居中对齐即可。本⽂中上例的球体内的⽂字就是这种显⽰
⽅式，样式设置如下：
display: flex; justify-content: center;align-items: center;
平均分配宽度
很多APP的底部菜单的宽度都是平均分配，主要应⽤了属性 flex:1，其中1代表占了1份。
将球的样式 .ball 修改为
display: flex;justify-content: center;align-items: center;flex: 1;height: 50px;
模仿百家号APP的底部菜单，效果图是这样
底部有5个菜单每个菜单的flex值都是1，可以理解为每个菜单的宽度是1/5，于是就可以平均分配宽度了。把flex的值设置为2也可以，只要每个菜单的值⼀样，它们的宽度就是⼀样的。所以如果把【⾸页】的flex值设置为2，其它菜单的flex值设置为1，相当于把箱⼦的宽度平均分为6份，【⾸页】占了2/6，其他的占了1/6，即⾸页的宽度是其它菜单宽度的2倍。
⼀边的宽度固定，另⼀边的宽度⾃由伸缩
主要还是⽤到属性flex，固定宽度的那⼀边将宽度设置为固定值，另⼀边的flex值设为1，应⽤下⾯的样式来看看效果
.
left{width: 100px; border-right: 1px solid darkgray;}.right{ flex: 1; }
这时如果改变箱⼦的宽度，我们会发现左边的宽度会保持在100px，⽽右边的宽度会随着箱⼦宽度的改变⽽改变。
除了这些例⼦外，弹性布局还有很多很⽅便快捷的布局⽅式，主要多尝试，熟练运⽤，应对常规的⽹页布局是绰绰有余。
举报/反馈

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。