这里的flexbox，这CSS网格和引导之间的区别

元素一起包装。这是HTML：

 1 
2 < div > < / div >
 3 
 4 
 5 
 6 
< / div >

然后我将CSS添加到我页面的头部。

使用CSS选择器。flex-container，我将通过设置display属性flex使容器变得灵活。然后我可以指定容器的高度以及背景颜色， 如下所示。

.flex容器{
显示:flex;
身高：250px;
背景颜色：灰色;
}

为了设置容器内伸缩项的样式，我使用选择器.flex-container > div，然后我可以设置每个项目的背景颜色、宽度、边距和字体大小。我也可以用text-align属性设置字体的排列在每个项目中和行高属性中，设置Font将显示Font Fint容器顶部的距离。这是CSS：

.flex容器> DIV {
background - color: # f1f1f1;
宽度：100像素;
边缘：10px;
text-align:中心;
行高：60像素;
字体大小:48 px;
}

结果:

来源

如果我希望弹性物品填满整个容器，无论如何视口更改大小，然后我可以简单地在我的CSS中添加flex-basis属性。让我们将它设置为1 1 150px，以便项目从150像素的伸缩基础上增长和收缩。这是新的CSS:

.flex容器{
显示:flex;
身高：250px;
背景颜色：灰色;
}
.flex容器> DIV {
background - color: # f1f1f1;
宽度：100像素;
边缘：10px;
text-align:中心;
线高：50px;
字体大小:48 px;
Flex: 1 1 150px;
}

结果:

来源

附加Flex项目属性是订单，Flex-Grow，Flex-Shrink，Flex基础和对齐自我。您可以了解更多信息CSS技巧上的FlexBox的完整指南．

CSS网格与Bootstrap

现在我们已经比较了CSS Grid和Flexbox以及Flexbox和Bootstrap，让我们来比较一下CSS Grid和Bootstrap。

如果尝试决定要使用的这两个布局模型中的哪一个，请询问您是否让您的布局结构钉在一起或内容。如果您首先是布局，这意味着要创建布局，然后将物品放入其中，然后使用CSS网格更好。但是，如果你是满足的，这意味着你有你想要均匀地放入容器和空间的物品，然后使用Bootstrap。由于Bootstrap使用FlexBox构建，因此在比较CSS网格与Flexbox时，可以应用此推理。

现在让我们看看可以分别用CSS Grid和Bootstrap构建的特定网格示例的代码。

CSS网格示例

创建网格容器很简单。您只需将display属性应用到元素，并将其值设置为grid或inline-grid。造型才是棘手之处。

假设我想创建一个有5个元素的布局。下面是我要开始的HTML:

一位
两个
< div class = " box3“> 3 < / div >
< div class = " box4“四> < / div >
< div class = " box5“五> < / div >
< / div >

然后我将它制作一个网格容器，并使用此CSS将其背景颜色更改为灰色：

.wrapper {
显示：网格;
背景颜色：灰色;
}

现在让我们说我想创建三个相等宽度的列轨道。您可以使用网格模板列和网格模板 - 行属性来定义网格上的行和列及其大小（或者您只能定义一个）。我可以使用任何长度的单元，但我会使用FR单元。FR单元表示网格容器中的可用空间的一部分，而不是设定量，并确保栅格轨道根据可用空间生长和收缩。我的例子的CSS现在看起来像：

.wrapper {
显示：网格;
背景颜色：灰色;
网格模板列：1FR，1FR，1FR;
}

注意，我们使用了grid-template-columns属性来显式定义网格上的列，但没有使用grid-template-rows属性来显式定义行。这并不意味着你的CSS网格没有行;它只是意味着行是隐式定义的。您可以使用网格自动行和网格自动列属性设置隐式网格中创建的轨道的大小。

假设我想确保在隐式网格中创建的轨迹是100像素高。然后我将添加以下CSS，所以最终结果将是:

.wrapper {
显示：网格;
背景颜色：灰色;
网格模板列：1FR，1FR，1FR;
网格自动行：100像素;
}

最后，我需要将五个项目放置在网格容器中。使用CSS网格，使用“网格列 - 启动”，“网格列端”，“网格行 - 行启动”和“网格 - 行结束属性”并将“值”设置为不同的网格线。网格线基本上是网格中子项的水平和垂直分隔件。例如，此三列，两排网格的网格线以下：

来源

So if I want my box1 to span from the far-left line on the grid to the far-right, then I’d place it against column line 1 and span it to column line 4. And if I wanted it to span one implicit row track, then I’d begin it at row line 1 and end it at row line 2, as shown below. I also have CSS to style box2 and box4.

.box1 {
网格栏 - 开始：1;
网格柱末端：4;
网格行开始：1;
网格行端：2;
}
.box2 {
网格栏 - 开始：1;
网格行开始：2;
网格行端：4;
}
.box4 {
网格列开始：2;
网格行开始：2;
网格行端：4;
}

其结果将是：

来源

您可以点击来源链接查看CSS我以前的风格电网项目。这是从Flexbox，就上面的例子。

引导网格系统

现在让我们说我想用两列成一列，一个是一个全宽的一列，一个是半宽，所以它们在移动上彼此叠加。这是HTML：

< div class = "行" >
< div class = " col-md-8”风格= " background:黄色;" > .col-md-8 < / div >
。col-6 .col-md-4 
< / div >

我不想再拍行与占用视口的1/2移动和1/3的台式机三列。然后我会使用以下命令：

< div class = "行" >
。col-6 .col-md-4 
< span style=" font - family:宋体;"col-6 .col-md-4 < / div >
。COL-6 .COL-MD-4 
< / div >

最后，我想用两列宽度制作一个最后一个宽度，无论屏幕尺寸是什么。然后我使用以下HTML：

< div class = "行" >
< div class = " col-6”风格= " background: lightgreen; " > .col-6 < / div >
。col-6 
< / div >
< / div >

总之，这就是结果:

来源

创造独特的布局

FlexBox，CSS网格和Bootstrap是响应的布局模型，使您可以在许多不同的浏览器和设备上创建响应性和唯一布局。无论您选择哪种型号，您都需要一些熟悉的HTML和CSS。好消息是任何人都可raybetapp以开始编码．

最初发布于1月19日，2021年7:00:00，于2002年1月19日更新