本文主要是介绍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布局吧,嘿嘿嘿...
这篇关于flex布局,盒子居中,圣杯模型的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
