江苏龙网

  1. 主页 > 生活百科 > >

一行 CSS 实现 10 种现代布局

css

这篇文章重点介绍一些强大的 css 代码片段，用它们可以执行一些繁重的布局编程工作，还能帮助我们构建强大的新式CSS布局 。
这里我们会介绍10 种新式 CSS 布局和大小调整技术，突出了单行CSS样式代码的强大和影响力 。如果你在自己项目里面会使用Grid/Flexbox进行网站布局的话，相信这10个一行 CSS 代码的新式布局对你应该很有用，建议收藏呢！
知识回顾
flexbox布局flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto 。后两个属性可选 。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size） 。浏览器根据这个属性，计算主轴是否有多余空间 。它的默认值为auto，即项目的本来大小 。
grid布局作用在"容器"（container）
grid-template-columns属性定义每一列的列宽
grid-template-rows属性定义每一行的行高
repeat()简化重复的值，如下：
grid-template-columns: 33.33% 33.33% 33.33%;/**等价于**/grid-template-columns: repeat(3, 33.33%);repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值 。
repeat()重复某种模式也是可以的 。
/*定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px*/grid-template-columns: repeat(2, 100px 20px 80px);auto-fill与auto-fit
auto-fill单元格的大小是固定的，但是容器的大小不确定 。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充 。
grid-template-columns: repeat(auto-fill, 100px);fr表示比例关系，
/*二等分等宽的两列*/grid-template-columns: 1fr 1fr;/*第一列的宽度为150像素，第二列的宽度是第三列的一半*/grid-template-columns: 150px 1fr 2fr;minmax()函数产生一个长度范围，表示长度就在这个范围之中 。它接受两个参数，分别为最小值和最大值 。
/*表示列宽不小于100px，不大于1fr*/grid-template-columns: 1fr 1fr minmax(100px, 1fr);auto浏览器自己决定宽度
grid-template-columns: 100px auto 100px;作用在"项目"（item）
justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）place-items属性是align-items属性和justify-items属性的合并简写 。
span表示"跨越"，即左右边框（上下边框）之间跨越多少个网格
/*项目的左边框距离右边框跨越2个网格*/grid-column-start: span 2;grid-column-end: span 2;.item-1 {background: #b03532;/*1~3个网格*/grid-column: 1 / 3;grid-row: 1 / 3;}/* 等同于 */.item-1 {background: #b03532;/*1开始，跨越2个网格*/grid-column: 1 / span 2;grid-row: 1 / span 2;}更多相关Grid布局，可以学习CSS Grid 网格布局教程
一行css现代布局
1、超级居中（Super Centered）<div class="parent blue" ><div class="box coral" contenteditable>:)</div></div>.parent {display: grid;/*等价于align-items和justify-items都设置为center*/place-items: center;} 
 
2、可解构的自适应布局（The Deconstructed Pancake）关于flex，前置知识有一定的介绍 。
<div class="parent white"><div class="box green">1</div><div class="box green">2</div><div class="box green">3</div> </div> .parent {display: flex;flex-wrap: wrap;justify-content: center;}.box {flex: 1 1 150px; /*Stretching: */flex: 0 1 150px; /*No stretching: */margin: 5px;}【一行 CSS 实现 10 种现代布局】 
 
 
 
3、经典的侧边栏同样使用 grid layout，可以结合 minmax() 实现弹性的 sidebar（这在你要适应大屏幕的时候很有用） 。minmax(,) 就是字面意思 。结合单位，非常优雅，避免了数学计算宽度等不灵活的手段（比如我们设置 gap 的时候） 。


推荐阅读


上一篇：滇红茶金螺口感,滇红茶种类哪个好

下一篇：古树滇红茶样品,滇红茶种类哪个好