grid布局优缺点（FlowLayout,BorderLayout ,GridLayout ,CardLayout,GridBagLayout ,null ,BoxLayout布局的特点各是什么）

本文目录

• FlowLayout,BorderLayout ,GridLayout ,CardLayout,GridBagLayout ,null ,BoxLayout布局的特点各是什么
• Grid 布局
• Html中Grid布局的边框解法
• wpf应用在程序中grid和stackpanel布局的区别
• css的grid布局和表格的区别是什么

FlowLayout,BorderLayout ,GridLayout ,CardLayout,GridBagLayout ,null ,BoxLayout布局的特点各是什么

FlowLayout：流布局用于安排有向流中的组件，这非常类似于段落中的文本行。流布局一般用来安排面板中的按钮。它使得按钮呈水平放置，直到同一条线上再也没有适合的按钮。线的对齐方式由 align 属性确定。可能的值为： LEFT - 此值指示每一行组件都应该是左对齐的RIGHT - 此值指示每一行组件都应该是右对齐的CENTER - 此值指示每一行组件都应该是居中的LEADING - 此值指示每一行组件都应该与容器方向的开始边对齐TRAILING - 此值指示每行组件都应该与容器方向的结束边对齐BorderLayout ：这是一个布置容器的边框布局，它可以对容器组件进行安排，并调整其大小，使其符合下列五个区域：北、南、东、西、中。每个区域最多只能包含一个组件，并通过相应的常量进行标识：NORTH、SOUTH、EAST、WEST、CENTER。CardLayout ：它将容器中的每个组件看作一张卡片。一次只能看到一张卡片，容器则充当卡片的堆栈。当容器第一次显示时，第一个添加到 CardLayout 对象的组件为可见组件。卡片的顺序由组件对象本身在容器内部的顺序决定。GridBagLayout ：它是一个灵活的布局管理器，它不要求组件的大小相同便可以将组件垂直、水平或沿它们的基线对齐。每个 GridBagLayout 对象维持一个动态的矩形单元网格，每个组件占用一个或多个这样的单元，该单元被称为显示区域。null：当布局设置为null时，可使用java.awt.Window 提供的public void setBounds(int x, int y, int width, int height)移动组件并调整其大小。由 x 和 y 指定左上角的新位置，由 width 和 height 指定新的大小。 如果 width 值或 height 值小于之前调用 setMinimumSize 指定的最小大小，则它的值将自动增加。 覆盖：类 Component 中的 setBounds参数：x - 组件的新 x 坐标y - 组件的新 y 坐标width - 组件的新 widthheight - 组件的新 heightBoxLayout：允许垂直或水平布置多个组件的布局管理器。这些组件将不包装，因此举例来说，垂直排列的组件在重新调整框架的大小时仍然被垂直排列。 建议你可以多翻一下java 帮助！

Grid 布局

Grid 布局与 Flex 布局 有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是 一维布局 。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是 二维布局 。Grid 布局远比 Flex 布局强大。

display 布局 grid-template-columns 列 grid-template-rows 行 grid-template-areas 区域 grid-template 行 列 区域简写

grid-column-gap 列间隔 grid-row-gap 行间隔 grid-gap 简写

justify-items 项目内容横向排列方式 align-items 项目内容纵向排列方式 place-items 简写

justify-content 内容横向排列方式 align-content 内容纵向排列方式 place-content 简写

grid-auto-columns 隐式（多出来未定义的格子）列宽 grid-auto-rows 隐式（多出来未定义的格子）行高

grid-auto-flow 排列方式

grid 行 列 区域 隐式格子宽 隐式格子高 排列方式简写

grid-column-start 定位列线开始位置 grid-column-end 定位列线结束位置 grid-column 简写

grid-row-start 定位行线开始位置 grid-row-end 定位行线结束位置 grid-row 简写

grid-area 区域

justify-self 单个项目内容横向对其方式 align-self 单个项目内容纵向对其方式 place-self 简写

可以是以下单位：

grid-template 是 grid-template-rows ， grid-template-columns ， grid-template-areas 简写属性

grid-column-gap == column-gap

grid-row-gap == row-gap

grid-gap == gap

水平方向

垂直方向

简写方式

水平方向

垂直方向

简写方式

在一个声明中设置所有以下属性的简写： 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-row 简写

表示跨几行或几列

水平方向

垂直方向

简写方式

Html中Grid布局的边框解法

众所周知，grid布局目前得到浏览器的支持已经非常可观了，它强大的功能已经成为很多复杂布局的首选。

同时，很多场景里，它也成为了 table 布局的优秀替代方案。

但是很多人在使用grid代替table布局时，却发现了一个严重的问题，那就是： 边框非常不方便！

如图，一般情况下，我们都只能给item设置border，但渲染出来的效果嘛……

效果极其难受，因为每个item都拥有本身的border，这样一来有的地方2px，有的地方1px。

那么应该怎么做呢？ 其实很简单，两行css，如下

这样一来，效果就完美了。

wpf应用在程序中grid和stackpanel布局的区别

　　Grid和StackPanel的区别：　　1、Grid相当于表格额，几行几列都可以；　　2、StackPanel相当于一行横排或者一列竖排，嵌套的话也能实现Grid效果。　　Grid是以表格的方式定位子元素。可以定义行和列，然后将元素布局到表格当中。类似于Html中的Table元素。　　StackPanel是以水平或者竖直方向对子元素进行排列。相当于Android中的LinearLayout，或者是JavaGUI中的FlowLayout。

css的grid布局和表格的区别是什么

css的grid布局和表格的区别如下：

1. grid是固定大小的，table大小可变

2. grid继承自面板元素，table继承自块元素

3. grid用于表单内，用于显示内容，table用于流式内容展示。