flex布局,盒子居中,圣杯模型

阅读：评论：0

flex布局,盒子居中,圣杯模型

俺是非常喜欢用flex布局的,主要是因为

浏览器页面渲染性能高 , top
布局简直不要太简单，easy
盒子也不会脱离标准流，nice
我比较懒

不过呢,由于兼容性比较高,是手机端现在用的最多布局方式；pc端现在浮动布局用的还是较多的,但是未来2-3年,我相信flex布局肯定会成为主流,原因就是俺们现代人追求的都是简单快捷

( 难道不是懒的原因？！~~~)

一起看看flex布局到底怎么简单的

首先给父盒子设置：display：flex；

 <style>* {margin: 0;padding: 0;box-sizing: border-box;}.father {margin: 100px auto;display: flex;width: 800px;height: 600px;border: 1px solid black;}.father div {width: 200px;height: 200px;}.son-1 {background-color: skyblue;}.son-2 {background-color: pink;}.son-3 {background-color: green;}</style>
</head>
<body><div class="father"><div class="son-1">1</div><div class="son-2">2</div><div class="son-3">3</div></div>

默认状态是排排坐（justify-content: flex-start;）

默认状态，主轴（X轴）居中，左对齐

给father添加代码
```
justify-content: space-between;
```
可以达到两边无缝隙，中间空白部分均分的效果

给father添加代码

 justify-content: space-evenly;

可以达到主轴居中，空白平分的效果

给father添加代码

  justify-content: space-around;

此时中间间隙是两边的2倍

给father添加代码

  justify-content: center;

中间排排坐

伸缩比

比如有一个父盒子里面有三个子盒子，每个子盒子写 flex：1； 此时每个子盒子各占三分之一,占满整个盒子。
 .son-1 {flex: 1;background-color: skyblue;}.son-2 {flex: 1;background-color: pink;}.son-3 {flex: 1;background-color: green;}

flex设置不同的比例呢

        .son-1 {flex: 1;background-color: skyblue;}.son-2 {flex: 2;background-color: pink;}.son-3 {flex: 3;background-color: green;}

设置弹性盒子的占比,给弹性盒子加入代码 , 即可实现比例分配

侧轴对齐（y轴）

align-items：

flex-end 终点开始依次排列
flex-start 起点开始依次排列
center 沿侧轴居中排列
stretch 默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器

align-items：center; 效果如下

盒子居中

实现一个盒子居中的方法，就非常简单了，只需要给父盒子添加如下代码
display:flex;
justify-content:center;
align-items:center;

圣杯模型

所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。

一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的

两侧盒子写固定大小

中间盒子 flex: 1; 占满剩余空间

看看京东也是用的这个哦

 .father {margin: 100px auto;display: flex;width: 800px;height: 100px;border: 1px solid black;}.son-1 {width: 50px;height: 100px;background-color: skyblue;}.son-2 {flex: 1;height: 100px;background-color: pink;}.son-3 {width: 50px;height: 100px;background-color: green;}</style>
</head>
<body><div class="father"><div class="son-1">1</div><div class="son-2">2</div><div class="son-3">3</div></div>

okkk,伙伴们,今天就想到这里咯,虽然说都是基础,但是也是很重要滴~~~

希望以后公司都用flex布局吧,嘿嘿嘿...

本文发布于:2024-01-30 23:33:47，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170662882823637.html

上一篇：15. 生命的重建

下一篇：L2

标签：盒子布局模型圣杯 flex

留言与评论（共有 0 条评论）

flex-end	终点开始依次排列
flex-start	起点开始依次排列
`center`	沿侧轴居中排列
stretch	默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器