详解css3中dispaly的Grid布局与Flex布局

下面是“详解CSS3中display的Grid布局与Flex布局”的完整攻略。

Grid布局

概述：

Grid布局是CSS3中一种全新的布局方式，可以非常方便地实现基于网格的布局，使得排版更加灵活，支持更多复杂的排版方式，使用Grid布局可以大大减少布局代码的量，同时也能够提高排版的效率，完善不同尺寸的屏幕响应式设计。

基本语法：

.container {
  display: grid;
  /* grid-template-rows/grid-template-areas/grid-template-columns/grid-template等属性的声明 */
  /* grid: grid-template-rows/grid-template-areas/grid-template-columns/grid-template等属性的声明 */
}

布局示例：

<div class="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
  <div class="box box4"></div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 10px;
}

.box {
  background-color: #e5e5e5;
}

.box1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.box2 {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.box3 {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.box4 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

语法解释：

• display: grid; 声明容器元素为Grid布局方式
• grid-template-columns 定义列数，也可以定义每列的宽度
• grid-template-rows 定义行数，也可以定义每行的高度
• grid-template-areas 定义区域
• grid-template 是上述三个属性的缩写形式，用逗号分隔
• grid-column 设置元素所在列的起点和终点
• grid-row 设置元素所在行的起点和终点
• grid-area 设置元素的区域

Flex布局

概述:

Flex布局是CSS3中一种弹性盒模型，与传统盒模型不同，它更加轻松自如地实现自适应布局，将容器的子元素排列在单行或多行中，具有非常灵活的排布方式，是响应式设计和移动端设计的常用工具。

基本语法：

.container {
  display: flex;
  /* flex-direction/flex-wrap/flex-flow/justify-content/align-items/align-content等属性的声明 */
}

布局示例：

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
</div>

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.item {
  background-color: #e5e5e5;
  width: 200px;
  margin-bottom: 20px;
}

.item2, .item3 {
  background-color: #85C1E9;
  height: 200px;
}

语法解释：

• display: flex; 声明容器元素为Flex布局方式
• flex-direction 设置主轴方向
• flex-wrap 设置是否换行
• flex-flow 是上述两个属性的缩写形式，用空格分隔
• justify-content 设置主轴排布方式
• align-items 设置项目在交叉轴上的对齐方式
• align-content 设置多行项目在交叉轴上的对齐方式

以上就是关于"详解CSS3中display的Grid布局与Flex布局"的完整攻略，希望对您有帮助！