Flex 与 Grid

Posted jsbay

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flex 与 Grid相关的知识,希望对你有一定的参考价值。

Flex 与 Grid

Flex

flexbox: 弹性盒子布局

? 属性

  属性名 属性含义 属性值
定义在容器上的属性 flex-direction 决定主轴的方向 row: (默认) 水平,起点在左端
row-reverse: 水平,起点在右端
column: 垂直,起点在上沿
column-reverse: 垂直,起点在下沿
flex-wrap 决定一条轴线放不下,如何换行 nowrap: (默认) 不换行
wrap: 换行,第一行在上面
wrap-reverse: 换行,第一行在下面
flex-flow 是上面两个属性的简写 默认值是 row nowrap
justify-content 定义项目在主轴上的对齐方式 flex-start: (默认值)主轴起点对齐
flex-end: 主轴终点对齐
center: 中间对齐
space-between: 两端对齐, 项目之间的间隔相等
space-around: 每个项目之间的间隔相等,所以项目之间的间隔比项目与边框之间的间隔大一倍
align-items 定义项目在交叉轴上如何对齐 flex-start: 起点对齐
flex-end: 终点对齐
center: 中间对齐
baseline: 项目的第一行文字的基线对齐
stretch: (默认值)如果项目未设置高度或者设为auto,将占满整个容器的高度
align-content 定义多跟轴线对齐方式,一条轴线该属性不起作用 flex-start: 与交叉轴的起点对齐
flex-end: 与交叉轴的终点对齐
center: 与交叉轴的中点对齐
space-between: 与交叉轴的两端对齐,轴线之间的间隔平均分布
space-around: 每根轴线之间的间隔都相等,所以轴线之间的间隔比轴线与边框之间的间隔大一倍
定义在容器上的属性 order 定义项目的排列顺序,数值越小,排列越靠前 默认 0
flex-grow 定义项目的放大比例,如果存在剩余空间,不放大 默认 0 (如果所有项目的flex-grow属性为1,则等分剩余空间)
flex-shrink 定义项目的缩小比例 默认 1 负值对该属性无效
flex-basis 定义在分配多余空间之前,项目占据的主轴空间,浏览器根据这个属性来计算主轴是否有多余空间 默认 auto 即项目本来大小
flex 是上面三个的简写 默认 0 1 auto 后两个值可选
align-self 允许单个项目与其他项目不一样的对齐方式,可覆盖align-items属性 默认 auto 表示继承父元素的align-items属性,如果没有父元素,则等同于 stretch

实例:

  1. 使用flex可以用很少的代码实现水平/垂直居中
<div class="container">
    <div class="box"></div>
</div>

<style>
.container{
    display:flex;
    height: 100vh;
    align-items:center;
    justify-content:center;
}
.box{
    width:200px;
    height:200px;
    background:#ff0;
}
</style>

 

  1. flex 实现圣杯布局
<div class="container">
    <header>Header</header>
    <div class="content">
        <main>Main</main>
        <nav>Nav</nav>
        <aside>Aside</aside>
    </div>
    <footer>Footer</footer>
</div>
<style>
.container{
    display:flex;
    /* 垂直*/
    flex-direction: column;
    width:100%;
    /*视口被均分为100单位的vh 占据整个窗口*/
    min-height:100vh;
    text-align: center;
}
header,footer{
    /*放大缩小比例为0 占据垂直方向80px*/
    flex:0 0 80px;
}
.content{
    display: flex;
    /*1 1 auto 后两个值省略*/
    flex:1;
}
nav{
    /*默认 0 数值越小 排列越靠前*/
    order:-1;
    flex:0 0 80px;
}
aside{
    flex:0 0 80px;
}
main{
    flex:1;
}
</style>

 

Grid

grid布局在2010年由Microsoft提出,目前已经成为W3C候选标准,目前还不能用于生产环境,但可以通过设置浏览器来看到效果,在Chrome中地址栏中输入 chrome://flags 打开浏览器实验网络平台功能,将experimental web platform features设置为enable,这样我们就可以正常使用grid,如果要在项目中使用grid布局,可以安装 css-grid-polyfill

属性

 

  属性名 属性含义 属性值
定义在容器上的属性 display 定义一个网格容器 grid: (默认) 以块级元素的形式显示
inline-grid: 以内联元素的形式显示
subgrid: 父级网络容器的一个子项,行和列的大小都从父级获取
grid-template-columns 网格的行数 定义网格的宽高,单位可以是(px,em,rem,vw,vh,百分比),也可以是网格中自由空间的份数(单位fr)
定义网格线的名称,不是必须值,未设定以数字表示
grid-template-rows 网格的列数
grid-template-areas 定义网格区域,配合grid-area调用声明好的网格区域名称来放置对应的网格项目 名字
grid-column-gap 定义网格之间的间距(不包括网格项目到容器边缘的间距)  
grid-row-gap
justify-items 水平方向的对齐方式 start: 内容与网格区域的左边对齐
end: 右边对齐
center: 中间对齐
stretch: (默认值)代表填充整个网络区域的宽/高度
align-items 垂直方向的对齐方式
justify-content 定义网格和网格容器列轴对齐方式,和align-content相反 start: 内容与网格区域的左边对齐
end: 右边对齐
center: 中间对齐
stretch: 改变网络子项的容量让其填充整个网格容器宽度
space-around: 在每个网格子项中间放置均等的空间,在始末两端只有一半大小
space-between: 在始末两端没有空间
space-evenly: 始末两端也放置均等空间
align-content 定义网格和网格容器行轴对齐方式
grid-auto-columns 指定隐式网格  
grid-auto-rows
grid grid-template-rows,grid-template-columns,grid-template-areas,grid-auto-rows,grid-auto-columns,grid-auto-flow的合并  
定义在项目上的属性 grid-column-start 定义了网格项目垂直方向的开始位置网格线。  
grid-column-end 定义了网格项目垂直方向的开始位置网格线。  
grid-row-start 定义了网格项目水平方向的开始位置网格线。  
grid-row-end 定义了网格项目水平方向的结束位置网格线。  
grid-column grid-column-start与

grid-column-end的简写。

 
grid-row grid-row-start与

 

grid-row-end的简写。

 
grid-area 调用grid-template-areas属性创建的模板。同时,这个属性也可以是grid-row-start grid-column-start grid-row-end grid-column-end的缩写。  
justify-self 水平方向的对齐方式 start: 该网格单元和网格区域的左边对齐。
end: 该网格单元和网格区域的右边对齐。
center: 该网格单元和网格区域的中间对齐。
stretch: 默认值,代表填充整个网格区域的宽度。
align-self 垂直方向对齐方式

实例

  1. √ Grid 实现圣杯布局
<section class="grid">
    <div class="title">title</div>
    <div class="nav">nav</div>
    <div class="main">main</div>
    <div class="aside">aside</div>
    <div class="footer">footer</div>
</section>
<style>
.grid {
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template-columns: 80px 1fr 1fr 1fr 80px;
    grid-template-rows: 80px 1fr 1fr 80px;
    grid-template-areas: ‘title title title title title‘
                     ‘nav main main main aside‘
                    ‘nav main main main aside‘
                    ‘footer footer footer footer footer‘;
    font-size: 30px;
    text-align: center;
}
.title {
    grid-area: title;
}
.nav {
    grid-area: nav;
}
.main {
    grid-area: main;
}
.aside {
    grid-area: aside;
}
.footer {
    grid-area: footer;
}
</style>

 

以上是关于Flex 与 Grid的主要内容,如果未能解决你的问题,请参考以下文章

Flex 与 Grid

Grid与Flex如何选择

你不知道的CSS布局之 grid & flex

Grid 布局

为什么在flex或grid中悬停不起作用? [关闭]

Grid & Flex