Grid布局和Flex布局

Stella981
• 阅读 782

Flex布局(弹性布局)

Flex是弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。

采用Flex布局的元素,称为Flex容器。flex item项目是Flex布局的元素,简称项目。

容器:水平的主轴(main axis)和垂直的交叉轴(cross axis),单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

容器的属性:

1、flex-direction:决定主轴的方向(即项目的排列方向),注意main-size的位置和主轴方向一致。

.box {flex-direction:row(row-reverse、column、column-reverse);}

row(默认值):主轴为水平方向,起点在左端。

row-reverse:主轴为水平方向,起点在右端。

column:主轴为垂直方向,起点在上沿。

column-reverse:主轴为垂直方向,起点在下沿。

2、flex-wrap:换行(如何换行)

.box{flex-wrap:nowrap(wrap、wrap-reverse)}

nowrap:不换行。

wrap:换行,第一行在上方。

wrap-reverse:换行,第一行在下方。

3、justify-content:定义项目在主轴上的对齐方式

.box{justify-content:flex-start(flex-end、center、space-between、space-around)}

flex-start(默认值):左对齐

center:居中

space-between:两端对齐,项目之间的间隔都相等

space-around:每个项目两侧的间隔相等,所有,项目之间的间隔比项目与边框的间隔大一倍

4、align-items:定义项目在交叉轴上如何对齐

.box{align-items:flex-start(flex-end,center、baseline、stretch)}

flex-start:交叉轴的起点对齐

flex-end:交叉轴的终点对齐

center:交叉轴的中点对齐

baseline:项目的第一行文字的基线对齐

5、algin-content:定义了多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用

.box{align-content:flex-start(flex-end、center、stretch、space-between、space-around)}

flex-start:与交叉轴的起点对齐。

flex-end:与交叉轴的终点对齐。

center:与交叉轴的终点对齐。

space-between:与交叉轴两端对齐,轴线之间的间隔平均分布

space-around:每根轴线两侧的间隔都相等。

stretch(默认值):轴线占满整个交叉轴。

项目的属性:

1、order:定义项目的排列顺序,数值越小,排列越靠前,默认0,。

.item{order:;}

2、flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

.item{flex-grow:;}

3、flex-shrink:定义了项目的缩小比例,默认为1,即空间不足,该项目缩小,如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小,如果一个项目的flex-shrink

属性为0,其他项目都为1,则空间不足时,前者不缩小,负数对该属性无效。

4、flex-basis:定义了在分配多余空间之前,项目占据的主轴空间,浏览器根据这个属性,计算主轴是否有多余空间,它的默认值为auto,即项目的本来大小。

5、align-self:允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性,默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等于stretch。

Grid 布局 ,网格布局

Grid布局与Flex布局有一定的相似性,都可以指定,容器内部多个项目的位置

Flex布局:轴线布局,可以看做是一维布局。

Grid布局:则是将容器划分分成“行”和“列”,产生单元格,指定的项目所在的单元格,可以看做是二维布局。

1、grid-template-columns/row 属性

columns  是定义了每一列的宽

row  是定义了每一行的高

2、repeat()  两个参数  (重复n次,重复的值)

 .box{

  display:grid;

  grid-template-columns:repeat(3,33.33%)

  grid-template-row:repeat(3,33.33%)

}

3、可以给网格线起名字

.box{

  display:grid;

  grid-template-columns:[ ]  100px  [ ]  100px  [ ]  100px  [ ]

  grid-template-row:[ ]  100px  [ ]  100px  [ ]  100px  [ ]

}

4、grid-row-gap属性,grid-columns-gap属性

grid-row-gap设置行与行的间隔(行间距)、

grid-columns-gap设置列与列的间隔(列间距)

5、网格布局允许指定区域(area),一个区域由单个或者多个单元格组成

grid-templace-area:header  header  header

           main      main     sidebar

           footer    footer     footer

如果某些区域不需要利用,则用点(.)表示。

6、justify-items,align-items,place-items 属性

justify-items 设置单元格内容的水平位置

align-items 设置单元格内容的垂直位置

7、justify-content,align-content,place-content

justify-content 整个内容区域在容器里面的水平位置

align-content 整个内容区域在容器里面的垂直位置

8、grid-auto-columns,grid-auto-rows属性

有时候,一些项目的指定位置,在现在有网格的外部,比如3行,但是某一个项目指定在第5行,这时浏览器会自动生成多余的网格。

点赞
收藏
评论区
推荐文章
Alex799 Alex799
3年前
Vue进阶(幺柒幺):前端用户体验提升(五)Flex实现弹性布局
需求背景在实现组件拖拽设计过程中,发现组件样式中设置了display:flex属性信息,导致组件生成后无法实现拖拽效果,网上查阅资料后发现Flex布局大有天地。Flex来源
浩浩 浩浩
3年前
【Flutter实战】线性布局(Row、Column)
4.2线性布局(Row和Column)所谓线性布局,即指沿水平或垂直方向排布子组件。Flutter中通过Row和Column来实现线性布局,类似于Android中的LinearLayout控件。Row和Column都继承自Flex,我们将在弹性布局一节中详细介绍Flex。主轴和纵轴对于线性布局,有主轴和纵轴之分,如果
菜园前端 菜园前端
1年前
想学会flex布局,我强烈推荐你来看看这篇文章!!
原文链接:为什么要使用flex布局?flex布局是目前比较流行的一种布局,因为它十分简单灵活,区区简单几行代码就可以实现各种页面的的布局,以前我在学习页面布局的时候我深受其float、display、position这些属性的困扰。使用flex属性就可以写
Wesley13 Wesley13
3年前
使用伸缩盒布局创建一个三列布局每一列占用`col
\使用伸缩盒布局创建一个三列布局每一列占用\col{n}\/12份基于父级容器的宽度\Answer设置\.row\类的父级容器为\display:flex;\样式然后使用\flex\缩写形式属性给每一列子元素设置一个\flexgrow\值使得每一列可以按照设置的比例自动协调宽度
Stella981 Stella981
3年前
HTML前端开发之路——弹性盒模型
弹性盒模型(FlexibleBox)是一个CSS3新增布局模块,用于实现容器里项目的对齐、方向、排序;弹性盒模型最大的特效在于,能够动态的修改子元素的宽度和高度,以满足在不同尺寸屏幕下的恰当布局;下面是弹性盒模型的元素基本概念:!(http://static.oschina.net/uploads/space/2016/0212/210
Stella981 Stella981
3年前
Flutter布局4
Row简介mainAxisAlignment:主轴布局方式,row主轴方向是水平方向crossAxisAlignment:交叉轴的布局方式,对于row来说就是垂直方向的布局方式
达里尔 达里尔
11个月前
Flex布局:flex-grow:1失效
工作中遇到一些flexgrow:1的容器失效,一堆文字乱码溢出,最后看了一下flex布局的原理解决了cssdivflexgrow:1;wisth:0;如果遇到另一边的div设了宽但是被flexgrow:1的内容挤压了,可以给设了宽的div加flexshri
达里尔 达里尔
5个月前
flex布局每行最后一个元素去掉右边距
css.item:not(:nthchild(even)):lastchildmarginright:0;
京东云开发者 京东云开发者
2个月前
鸿蒙跨端实践-布局方案介绍
作者:京东科技刘宁一、前言动态化使用jue语言(开发风格与Vue一致)开发,对于视图的布局采用了标准的Flex布局方式。对于列表类视图,动态化提供了、、、等标签,将子视图的布局管理封装到标签中实现,业务只需要针对标签简单地设置相关属性,即可实现列表类布局,