Flex布局和Grid布局

最新推荐文章于 2024-04-28 13:46:58 发布

XQLL

最新推荐文章于 2024-04-28 13:46:58 发布

阅读量1.6k

点赞数 1

分类专栏： # CSS 文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_45730885/article/details/126333662

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

flex布局

Flexible Box模型，是一种一维的布局模型，给flexbox的子元素之间提供强大的空间分布和对齐能力。一维是指flexbox一次只能处理一个维度上的元素布局，一行或者一列，作为对比的是另外一个二维布局Grid Layout，可以同时处理行和列上的布局。

两根轴线（主轴和交叉轴）

主轴和交叉轴的概念对于对其flexbox里面的元素很重要。

主轴（flex-direction）

主轴由flex-direction定义，另一根轴垂直于他，可以取四个值：

row
row-reverse
column
column-reverse

选择row或者row-reverse，主轴沿着inline方向延伸即横向（内联方向

），分别是从左往右和从右往左。

选择column或者column-reverse，主轴沿着block方向延伸即纵向（块级元素方向），分别是从上往下和从下往上。

交叉轴（cross axis）

交叉轴垂直于主轴

起始线和终止线

主轴的开始与结束的位置。

Flex容器

采用了flexbox的区域叫做flex容器，可以将display属性值改为flex或者inline-flex来获得flex容器。完成之后容器中的直系子元素会变成flex元素。flex有下列行为：

元素排列为一行 (flex-direction 属性的初始值是 row)。
元素从主轴的起始线开始。
元素不会在主维度方向拉伸，但是可以缩小。
元素被拉伸来填充交叉轴大小。
flex-basis 属性为 auto。
flex-wrap 属性为 nowrap。

flex-wrap

元素换行，项目太大而无法全部显示在一行中，则会换行显示。有下列选项：

wrap
nowrap

wrap代表着子元素会换行显示，若设置为nowrap，他们会缩小以适应容器

flex-flow

将两个属性flex-direction和flex-wrap组合为简写属性flex-flow。第一个指定的值为flex-direction，第二个指定的值为flex-wrap。

flex元素间的对齐和空间分配

flexbox可以设置flex元素之间的空间分配

justify-content

该属性使元素在主轴方向上对齐：

stretch:拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。
flex-start：元素从容器的起始线排列（排在靠近起始线一端）
flex-end：元素从容器的终止线开始排列（排在靠近终止线一端）
center：中间排列
space-around：相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
space-between：元素排列好之后的剩余空间拿出来，平均分配到元素之间，使得元素间隔相等（首尾紧贴起始线和终止线）
space-evenly：所有行沿垂直轴均匀分布在对齐容器内。每对相邻的项之间的间距，主开始边和第一项，以及主结束边和最后一项，都是完全相同的。

align-items

针对每一个单独的flex子项起作用，基本单位是每一个子项

align-items 属性可以使元素在交叉轴方向对齐。

这个属性的初始值为stretch，这就是为什么 flex 元素会默认被拉伸到最高元素的高度。实际上，它们被拉伸来填满 flex 容器 —— 最高的元素定义了容器的高度。

stretch
flex-start
flex-end
center

align-content

将flex子项作为一个整体起作用，基本单位是子项构成的行。该属性对单行弹性盒子模型无效

在flex容器指定高度并且子项为多行时，align-content: center是将子项作为一个整体，然后这个整体在flex容器的交叉轴上居中对齐的。

flex 元素上的属性:grow\shrink\basis

可用空间 available space

flex 容器里除了元素所占的空间以外的富余空间就是可用空间 available space。该属性的默认值是 auto 。即正常排列之后剩下的空间，如果希望元素能够自动的扩展去填充满剩下的空间，需要去控制可用空间在这几个元素之间的分配，就需要依赖这些属性进行配置。

为了更好地控制 flex 元素，有三个属性可以作用于它们：

flex-grow
flex-shrink
flex-basis

flex-basis

定义了该元素的空间大小。如果元素设定了固定的宽度width为100px，则flex-basis的值为100px；如果没有设定，flex的值将采用元素内容的尺寸，自动分配大小以展示元素内容

flex-grow

若被赋值为一个正整数， flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间（available space）。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。

如果我们给所有元素设定 flex-grow 值为 1，容器中的可用空间会被这些元素平分。它们会延展以填满容器主轴方向上的空间。

flex-grow 属性可以按比例分配空间。如果第一个元素 flex-grow 值为 2，其他元素值为 1，则第一个元素将占有 2/4（例如，即为 200px 中的 100px）, 另外两个元素各占有1/4（各50px）。

flex-shrink

flex-shrink属性是处理 flex 元素收缩的问题。如果我们的容器中没有足够排列 flex 元素的空间，那么可以把 flex 元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。与flex-grow属性一样，可以赋予不同的值来控制 flex 元素收缩的程度 —— 给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。

flex属性的简写

Flex 简写形式允许你把三个数值按这个顺序书写 — flex-grow，flex-shrink，flex-basis。第一个数值是 flex-grow。赋值为正数的话是让元素增加所占空间。第二个数值是flex-shrink — 正数可以让它缩小所占空间，但是只有在 flex 元素总和超出主轴才会生效。最后一个数值是 flex-basis；flex 元素是在这个基准值的基础上缩放的。

  .one {
        flex: 1 1 auto;
        flex: initial    /*等同于flex：0 1 auto*/
		flex: auto       /*等同于flex：1 1 auto*/         
		flex: none       /*等同于flex：0 0 auto*/
		flex: <positive-number>
        flex: 1         /*等同于flex：1 1 0*/
  }

grid

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Grids

网格是由一系列水平及垂直的线构成的一种布局模式。根据网格，我们能够将设计元素进行排列，帮助我们设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一。

一个网格通常具有许多的列（column）与行（row），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter）。

网格的使用

将容器的display属性设置为grid来定义一个网络，与flex相似，将父容器改为grid后，其直接子项会变成网格项。但是定义网格后，网页不会马上变化，因为display:grid声明只创建了一个只有一列的网格，其子项还是会像正常布局流那样从上而下排布
添加列

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
//加三个宽度为200px的列,可以用长度单位或百分比
    grid-template-columns: 1fr 1fr 1fr;
//也可以用fr这个比例单位,每一列的宽度可以会随着可用空间变小而变小。fr 单位按比例划分了可用空间
fr可以与一般的长度单位混合使用，比如grid-template-columns: 300px 2fr 1fr，那么第一列宽度是300px，剩下的两列会根据除去300px后的可用空间按比例分配。

}

网格间隙
使用 grid-column-gap属性来定义列间隙；使用 grid-row-gap 来定义行间隙；使用 grid-gap可以同时设定两者。

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 20px;//可以用长度单位包括百分比，不可以用fr
}