多种布局方式，很有意思
本篇文章的技巧都是基于学过grid布局，懂其原理的基础上。如果还不知道grid布局，请坐飞机看博主另一篇文章
超级强大的grid布局
一、 利用grid实现居中效果
在没有和flex和grid之前，垂直居中一直不能很优雅的实现。而现在，可以结合我们grid和place-items优雅的实现同时水平居中和垂直居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parent {
display: grid;
place-items: center; /* 让其内部的项目居中显示*/
width: 300px;
height: 300px;
background-color: aqua;
resize: both; /* 让这个盒子可以自由缩放*/
overflow: auto;
}
.child {
width: 50px;
height: 50px;
line-height: 50px;
background-color: blueviolet;
border: 1px solid blue;
border-radius: 10px;
text-align: center;
color: azure;
}
</style>
</head>
<body>
<div class="parent">
<div class="child" contenteditable="true">;;;</div>
</div>
</body>
</html>
效果如图：
最初的画面
当你把外层盒子缩小放大的时候，可以看到里面的小盒子依然居中显示
二、自适应布局
1、在视口足够的时候，三个框固定宽度横放
2、在视口不够的时候（宽度在移动上面），宽度仍然固定，，但是会自动变化，不在同一水平面上
flex:flex-grow flex-shrink flex-basis;
flex-grow：定义项目的的放大比例；
默认为0，即 即使存在剩余空间，也不会放大；
所有项目的flex-grow为1：等分剩余空间（自动放大占位）；
flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍。
flex-shrink：定义项目的缩小比例；
默认为1，即 如果空间不足，该项目将缩小；
所有项目的flex-shrink为1：当空间不足时，缩小的比例相同；
flex-shrink为0：空间不足时，该项目不会缩小；
flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。
flex-basis： 定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间，
默认值为auto，即 项目原本大小；
设置后项目将占据固定空间。
所以flex属性的默认值为：0 1 auto （不放大会缩小）
flex为none：0 0 auto （不放大也不缩小）
flex为auto：1 1 auto （放大且缩小）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 300px;
height: 300px;
background-color: antiquewhite;
border: 1px solid black;
resize: both;
overflow: auto;
}
.child {
flex: 0 1 90px; /* No stretching: */
margin: 5px;
background-color: #00FFFF;
text-align: center;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
</body>
</html>
最初的画面，因为此时三者的宽度值和没有超过外层盒子的宽度
当缩小一定程度时
再缩小
当吧flex: 0 1 90px;改为flex: 1 1 90px;
最初的画面
当缩小时，我们可以看到，和上面的情况有所不同，第3个子盒子自动拉伸了。
再缩小，可以看到，也被拉伸了。
三、 经典侧边栏
利用grid布局中的minmax（）可以实现这样的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container {
width: 800px;
height: 500px;
display: grid;
grid-template-columns: minmax(100px,15%) 1fr;
gap: 20px;
resize: both;
overflow: auto;
}
.left {
background-color: #00FFFF;
}
.right {
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="left" contenteditable="true">最小150px，最大不超过15%</div>
<div class="right" contenteditable="true">刻录机奥斯卡了奥斯卡了建档立卡as建档立卡事件阿斯加德卢卡斯克拉斯到家了看见爱上大盛魁链接的卡时间的了解阿萨德</div>
</div>
</body>
</html>
最初的画面
当缩小的时候
四、 固定的页眉页脚
grid-template-rows: auto 1fr auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container {
width: 800px;
height: 600px;
display: grid;
grid-template-rows: auto 1fr auto;
resize: both;
overflow: auto;
}
header {
width: 100%;
background-color: #00FFFF;
}
footer {
width: 100%;
background-color: #FFC0CB;
}
.main {
width: 100%;
background-color: #8A2BE2;
}
</style>
</head>
<body>
<div class="container">
<header>我是头部</header>
<div class="main">我是主体</div>
<footer>我是尾部</footer>
</div>
</body>
</html>
初始画面
然后不管怎么缩放，头部和底部都始终保持不变
五、圣杯布局
主要用到
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr 4fr 1fr;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container {
width: 800px;
height: 600px;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr 4fr 1fr;
gap: 10px;
resize: both;
overflow: auto;
}
header {
grid-column: 1/4;
grid-row: 1/2;
background-color: pink;
}
.left {
grid-column: 1/2;
grid-row: 2/3;
background-color: #00FFFF;
}
.center {
grid-column: 2/3;
grid-row: 2/3;
background-color: #8A2BE2;
}
.right {
grid-column: 3/4;
grid-row: 2/3;
background-color: #FFC0CB;
}
footer {
grid-column: 1/4;
grid-row: 3/4;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<header>头部</header>
<div class="left" contenteditable="true">左边左边左边左边左边左边左边</div>
<div class="center" contenteditable="true">中间中间中间中间中间中间中间</div>
<div class="right" contenteditable="true">右边右边右边右边右边右边右边右边</div>
<footer>尾部</footer>
</div>
</body>
</html>
最初画面
当缩放的时候
六、RAM技巧
grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))
这在弹性布局图片/ box这种非常有用（行可以排放的卡片数量自动适应）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parent {
width: 800px;
height: 600px;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
gap: 10px;
resize: both;
overflow: auto;
border: 2px solid black;
}
.pink {
background-color: pink;
}
.purple {
background-color: purple;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="parent white">
<div class="box pink">1</div>
<div class="box purple">2</div>
<div class="box blue">3</div>
<div class="box green">4</div>
</div>
</body>
</html>
其效果是如果确保能够满足多个盒的最小宽度（例如上面的150px），则自动弹性适应放置多行。
当前宽度是160px（不考虑gap），那么上面四个box的宽度会适应为160px，并且分为4行
当前宽度是310px（不考虑间隙），上面四个box分段两行，两个box平分宽度
当满足满足一行放下3个box时，第三个box自动到第一行
当满足满足一行放下4个box时，第四个box自动到第一行
如果将auto-fit对划线auto-fill：
最初画面，可以看到他不能自动填充满。
七、卡片弹性适应性
justify-content: space-between，结合grid和flex实现完的布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parent {
width: 800px;
height: 600px;
height: auto;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(3, 1fr);
resize: both;
overflow: auto;
}
.card {
display: flex;
flex-direction: column;
padding: 1rem;
justify-content: space-between;
border: 1px solid red;
}
.visual {
height: 100px;
width: 100%;
background-color: pink;
}
h3 {
margin: 0
}
</style>
</head>
<body>
<div class="parent white">
<div class="card yellow">
<h3>Title - Card 1</h3>
<p contenteditable>Medium length description with a few more words here.</p>
<div class="visual pink">萨达奥术大师大萨达奥术大师大</div>
</div>
<div class="card yellow">
<h3>Title - Card 2</h3>
<p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<div class="visual blue">萨达奥术大师大萨达奥术大师大</div>
</div>
<div class="card yellow">
<h3>Title - Card 3</h3>
<p contenteditable>Short Description.</p>
<div class="visual green">萨达奥术大师大萨达奥术大师大</div>
</div>
</div>
</body>
</html>
最初画面
进行缩放或者扩大时，可以看到内外都在自适应的变化
八、使用夹具实现流体印刷
clamp(<min>, <actual>, <max>)
最新使用的clamp()方法可以一行实现流体排版。提高UX，非常适合包含阅读内容的卡，因为我们不希望一行字太短或太长。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parent {
width: 800px;
height: 600px;
display: grid;
place-items: center;
resize: both;
overflow: auto;
border: 1px solid black;
}
.card {
width: clamp(23ch, 50%, 46ch);
display: flex;
flex-direction: column;
padding: 1rem;
border: 1px solid red;
}
.visual {
height: 125px;
width: 100%;
background-color: pink;
}
</style>
</head>
<body>
<div class="parent white">
<div class="card purple">
<h1>Title Here</h1>
<div class="visual yellow"></div>
<p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
</div>
</div>
</body>
</html>
最初画面
当进行缩放时
九、aspect-ratio
aspect-ratio: <width> / <height>
在展现CMS或其他设计内容时，我们会期待图片，视频，卡片能够按照固定的比例进行布局。而最新的aspect-ratio可以优雅的实现该功能（使用chrome 84+）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parent {
width: 800px;
height: 600px;
display: grid;
grid-template-columns: minmax(400px, 600px);
place-items: center;
resize: both;
overflow: auto;
border: 1px solid black;
}
.card {
width: 50%;
display: flex;
flex-direction: column;
padding: 1rem;
border: 1px solid red;
}
.visual {
aspect-ratio: 16 / 9;
background-color: pink;
}
</style>
</head>
<body>
<div class="parent white">
<div class="card blue">
<h1>Video Title</h1>
<div class="visual green"></div>
<p>Descriptive Text. This demo works in Chromium 84+.</p>
</div>
</div>
</body>
</html>
最初画面
当进行缩放的时候，可以发现中间的粉色框会按照16:9的比例进行缩放
声明本篇文章部分内容参考自微信公众号“web前端开发”
附上原文链接
原文链接
本篇博客是自己学习笔记的整理，仅供学习交流，切勿用于商业用途，如有侵权，请联系博主删除，博主QQ：1105810790