grid布局和flex布局（flex布局和grid布局的主要属性）



Flexible Box 模型，通常被称为 flexbox（弹性布局），是一种一维的布局模型。

flex布局支持6个容器属性：

flex-direction、flex-warp、flex-flow、justify-content、align-items、align-content

属性

flex-direction

flex容器中默认存在两条轴，主轴和交叉轴，

通过flex-direction来决定主轴的方向。

flex-direction 有四个属性 row（默认值）、row-reverse、column、column-reverse

flex-wrap

flex默认情况是不换行，但这里也不会任由元素直接溢出容器，会涉及到元素的弹性伸缩。会自动缩小盒子宽度使其一行显示，缩小最小范围为父元素的宽度。

通过flex-wrap决定容器内项目是否可换行，属性如下：

nowrap（默认值）：不换行。

wrap：换行，第一行在上方。(把每一行看作一个新的容器,不影响其他行)

wrap-reverse：换行，第一行在下方。

flex-flow

是flex-direction属性和flex-wrap属性的简写形式，默认值为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子元素属性

  简写形式允许你把三个数值按这个顺序书写 — ，，

网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列。

属性

网格线

从右到左是-1 、-2、-3、...

grid-template-columns和grid-template-rows 

网格模版，网格区域一定是矩形的

grid-template:（grid-template-rows）/ (grid-template-columns)

 和 

用于定义自动生成的列和行的尺寸

gap（间距）

grid-template-areas

定义区域

这里的 . 代表空的单元格

grid-auto-flow

布局排列方式

对齐属性

单元格对齐属性 

内容对齐属性

子元素属性

grid-column ： grid-column / grid-column-end;

grid-row: grid-row-start / grid-row-end;

举例

例1

flex

grid

 

到此这篇grid布局和flex布局（flex布局和grid布局的主要属性）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/60220.html