HTML 布局

页布局对改善网站的外观非常重要。

请慎重设计您的网页布局。

在线实例

使用 <div> 元素的网页布局

如何使用 <div> 元素添加布局。

使用 <table> 元素的网页布局

如何使用 <table> 元素添加布局。

网站布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。

大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

	虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。

HTML 布局 - 使用<div> 元素

div 元素是用于分组 HTML 元素的块级元素。

下面的例子使用五个 div 元素来创建多列布局：

实例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><divid="container"style="width:500px"><divid="header"style="background-color:#FFA500;"><h1style="margin-bottom:0;">主要的网页标题</h1></div><divid="menu"style="background-color:#FFD700;height:200px;width:100px;float:left;"><b>菜单</b><br>HTML<br>CSS<br>JavaScript</div><divid="content"style="background-color:#EEEEEE;height:200px;width:400px;float:left;">内容在这里</div><divid="footer"style="background-color:#FFA500;clear:both;text-align:center;">版权 © runoob.com</div></div></body></html>

上面的 HTML 代码会产生如下结果：

HTML 布局 - 使用表格

使用 HTML <table> 标签是创建布局的一种简单的方式。

大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

	即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！

下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：

实例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><tablewidth="500"border="0"><tr><tdcolspan="2"style="background-color:#FFA500;"><h1>主要的网页标题</h1></td></tr><tr><tdstyle="background-color:#FFD700;width:100px;"><b>菜单</b><br>HTML<br>CSS<br>JavaScript</td><tdstyle="background-color:#eeeeee;height:200px;width:400px;">内容在这里</td></tr><tr><tdcolspan="2"style="background-color:#FFA500;text-align:center;">版权 © runoob.com</td></tr></table></body></html>

上面的 HTML 代码会产生以下结果：

HTML 布局 - 有用的提示

Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。如需学习更多有关 CSS 的知识，请访问我们的CSS 教程。

Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

HTML 布局标签

标签	描述
<div>	定义文档区块，块级(block-level)
<span>	定义 span，用来组合文档中的行内元素。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

家好，我是IT共享者，人称皮皮。这篇我们来讲讲CSS网页布局。

一、网页布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

1. 头部区域

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 项目(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}


/* 头部样式 */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>


<div class="header">
  <h1>头部区域</h1>
</div>


</body>
</html>

2. 菜单导航区域

菜单导航条包含了一些链接，可以引导用户浏览其他页面：

例

/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接 - 修改颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

3. 内容区域

内容区域一般有三种形式:

1 列：一般用于移动端。
2 列：一般用于平板设备。
3 列：一般用于 PC 桌面设备。

不相等的列

不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％。

例：

.column {
  float: left;
}
 
/* 左右侧栏的宽度 */
.column.side {
  width: 25%;
}
 
/* 中间列宽度 */
.column.middle {
  width: 50%;
}
 
/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

4. 底部区域

底部区域在网页的最下方，一般包含版权信息和联系方式等。

例

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

二、响应式网页布局

通过以上等学习我们来创建一个响应式等页面，页面的布局会根据屏幕的大小来调整：

案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>项目</title>
<style>
* {
  box-sizing: border-box;
}
 
body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
 
/* 头部标题 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}
 
.header h1 {
  font-size: 50px;
}
 
/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航条链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接颜色修改 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
 
/* 创建两列 */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}
 
/* 右侧栏 */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
 
/* 图像部分 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
 
/* 文章卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
 
/* 列后面清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
 
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>


<div class="header">
  <h1>我的网页</h1>
  <p>重置浏览器大小查看效果。</p>
</div>


<div class="topnav">
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#" style="float:right">链接</a>
</div>


<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>文章标题</h2>
      <h5>xx 年xx月 xx日</h5>
      <div class="fakeimg" style="height:200px;"><img src="img/bird.png"></div>
      <p>文本...</p>
      <p>当热诚变成习惯，恐惧和忧虑即无处容身。缺乏热诚的人也没有明确的目标。热诚使想象的轮子转动。一个人缺乏热诚就象汽车没有汽油。
      善于安排玩乐和工作，两者保持热诚，就是最快乐的人。热诚使平凡的话题变得生动。！</p>
    </div>
    <div class="card">
      <h2>文章标题</h2>
      <h5>xx 年 xx 月xx日</h5>
      <div class="fakeimg" style="height:200px;"><img src="img/border.png"></div>
      <p>文本...</p>
      <p>一切事无法追求完美，唯有追求尽力而为。这样心无压力，出来的结果反而会更好！</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>关于我</h2>
      <div class="fakeimg" style="height:100px;"></div>
      <p>6666</p>
    </div>
    <div class="card">
      <h3>热门文章</h3>
      <div class="fakeimg"><img src="img/fy2_wp.png">\</div>
    
    </div>
    <div class="card">
      <h3>关注我</h3>
      <p>本站发布的系统与软件仅为个人学习测试使用，请在下载后24小时内删除，
      不得用于任何商业用途，否则后果自负，请支持购买正版软件！如侵犯到您的权益,请及时通知我们,我们会及时处理。


声明：为非赢利性网站 不接受任何赞助和广告。</p>
    </div>
  </div>
</div>


<div class="footer">
  <h2>底部区域</h2>
</div>


</body>
</html>

三、总结

本文主要介绍了Html的网页布局结构，如何去了解网络的布局，介绍了常见的移动设备的三种网页模式，最后通过一个小项目，总结之前讲解的内容。

代码很简单，希望可以帮助你学习。

们的 CSS flexbox 布局综合指南。这份完整的指南解释了有关 flexbox 的所有内容，重点介绍了父元素（flex 容器）和子元素（flex 项）的所有不同可能属性。它还包括历史、演示、模式和浏览器支持图表。

弹性布局的诞生背景

（Flexbox LayoutFlexible Box）模块（截至 2017 年 10 月的 W3C 候选推荐）旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知和/或动态（因此词“弯曲”）。

flex 布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序）以最好地填充可用空间（主要是为了适应各种显示设备和屏幕尺寸）。弹性容器扩展项目以填充可用的可用空间或缩小它们以防止溢出。

最重要的是，与常规布局（基于垂直地块和基于水平的内联）相比，flexbox 布局与方向无关。虽然这些适用于页面，但它们缺乏灵活性（不是双关语）来支持大型或复杂的应用程序（尤其是在涉及方向更改、调整大小、拉伸、收缩等方面）。

注意： Flexbox 布局最适合应用程序的组件和小规模布局，而Grid布局适用于更大规模的布局。

基础知识和术语

由于 flexbox 是一个完整的模块而不是单个属性，它涉及到很多东西，包括它的整个属性集。其中一些是要设置在容器上（父元素，称为“flex container”），而其他是要设置在子级（称为“flex items”）上。

如果“常规”布局基于块流方向和内联流方向，则弹性布局基于“弹性流方向”。请看一下规范中的这张图，解释了 flex 布局背后的主要思想。

解释 flexbox 术语的图表。穿过flexbox主轴的尺寸称为主尺寸，另一个方向是横向尺寸。这些尺寸有一个主开始、主结束、交叉开始和交叉结束。

项目将按照main axis(from main-startto main-end) 或横轴 (from cross-startto cross-end) 排列。

主轴——弹性容器的主轴是弹性项目沿其布置的主轴。请注意，它不一定是水平的；这取决于flex-direction属性（见下文）。
主启动 | main-end – 弹性项目放置在容器内，从 main-start 开始到 main-end。
主尺寸——一个弹性项目的宽度或高度，无论是在主尺寸，还是项目的主要尺寸。弹性项目的主要尺寸属性是“宽度”或“高度”属性，以主要尺寸中的为准。
交叉轴——垂直于主轴的轴称为交叉轴。它的方向取决于主轴的方向。
交叉启动| cross-end – 弹性线填充了项目，并从弹性容器的交叉开始侧开始放置到容器中，并朝向交叉端侧。
cross size – 弹性项目的宽度或高度，以交叉维度为准，是项目的交叉大小。横向尺寸属性是横向尺寸中的“宽度”或“高度”中的任何一个。

弹性盒属性

父级（弹性容器）的属性

展示

这定义了一个弹性容器；内联或块取决于给定的值。它为其所有直接子级启用了弹性上下文。

.container {
  display: flex; /* or inline-flex */
}

请注意，CSS 列对 flex 容器没有影响。

弹性方向

这建立了主轴，从而定义了弹性项目放置在弹性容器中的方向。Flexbox 是（除了可选的包装）一个单向布局的概念。将弹性项目视为主要以水平行或垂直列布局。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默认）：从左到右ltr；从右到左rtl
row-reverse：从右到左ltr；从左到右rtl
column: 相同，row但从上到下
column-reverse: 相同，row-reverse但从下到上

弹性包装

默认情况下，弹性项目都将尝试适合一行。您可以更改它并允许使用此属性根据需要包装项目。

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap（默认）：所有弹性项目都将在一行
wrap: flex 项目将从上到下包裹到多行。
wrap-reverse: flex 项目将从下到上换行成多行。

弹性流动

这是flex-directionandflex-wrap属性的简写，它们共同定义了 flex 容器的主轴和交叉轴。默认值为row nowrap。

.container {
  flex-flow: column wrap;
}

证明内容

这定义了沿主轴的对齐方式。当一行上的所有 flex 项目都不灵活，或者是灵活的但已达到最大大小时，它有助于分配额外的可用空间。当项目出行时，它还会对项目的对齐方式施加一些控制。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

flex-start（默认）：项目被打包朝向 flex-direction 的开始。
flex-end: 项目被打包到 flex-direction 的末尾。
start: 物品被包装在方向的开始处writing-mode。
end: 物品被包装到方向的尽头writing-mode。
left: 物品被包装在容器的左边缘，除非这对 . 没有意义，否则flex-direction它的行为就像start.
right: 物品被包装在容器的右边缘，除非这对 . 没有意义，否则flex-direction它的行为就像end.
center：项目沿线居中
space-between：物品均匀分布在行中；第一项在起始行，最后一项在结束行
space-around：项目均匀分布在行中，周围空间相等。请注意，视觉上的空间是不相等的，因为所有项目的两边都有相等的空间。第一个项目将在容器边缘有一个空间单位，但下一个项目之间有两个空间单位，因为下一个项目有自己的适用间距。
space-evenly：项目分布使得任何两个项目之间的间距（以及边缘的空间）相等。

请注意，浏览器对这些值的支持是有细微差别的。例如，space-between某些版本的 Edge 从未获得过支持，并且 Chrome 还没有开始/结束/左/右。MDN有详细的图表。最安全的值是flex-start、flex-end和center。

还有两个额外的关键字可以与这些值配对：safe和unsafe. 使用safe确保无论您如何进行这种类型的定位，您都不能推动一个元素，使其呈现在屏幕外（例如，离开顶部），这样内容也不能滚动（称为“数据丢失”） .

对齐项目

这定义了弹性项目如何沿当前行的交叉轴布局的默认行为。将其视为justify-content横轴（垂直于主轴）的版本。

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

stretch（默认）：拉伸以填充容器（仍然尊重最小宽度/最大宽度）
flex-start// start:self-start项目放置在横轴的开始处。这些之间的区别是微妙的，是关于尊重flex-direction规则或writing-mode规则的。
flex-end// end:self-end项目放置在横轴的末端。区别又是微妙的，是关于尊重flex-direction规则与writing-mode规则的。
center：项目在横轴上居中
baseline：项目对齐，例如它们的基线对齐

和修饰符关键字可以与所有其他关键字一起使用（尽管注意safe浏览器支持），并帮助您防止对齐元素以使内容变得不可访问。unsafe

对齐内容

当横轴上有额外空间时，这将对齐 flex 容器的线，类似于在justify-content主轴内对齐单个项目的方式。

注意：该属性只对多行灵活容器生效，这里flex-wrap设置为wrap或wrap-reverse)。单行灵活容器（即 whereflex-wrap设置为其默认值no-wrap）不会反映align-content.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

normal（默认）：项目被打包在它们的默认位置，就好像没有设置值一样。
flex-start/ start：包装到容器开头的物品。（更受支持的）flex-start尊重，flex-direction而start尊重writing-mode方向。
flex-end/ end：包装到容器末端的物品。（更多支持）flex-end尊重，flex-direction而端尊重writing-mode方向。
center：在容器中居中的项目
space-between：项目均匀分布；第一行在容器的开头，最后一行在结尾
space-around：项目在每行周围均匀分布
space-evenly：项目均匀分布，周围空间相等
stretch: 线条伸展以占用剩余空间

和修饰符关键字可以与所有其他关键字一起使用（尽管注意safe浏览器支持），并帮助您防止对齐元素以使内容变得不可访问。unsafe

间隙、行间隙、列间隙

该gap属性明确控制弹性项目之间的空间。它仅在不在外边缘的项目之间应用该间距。

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

该行为可以被认为是最小排水沟，就好像排水沟以某种方式更大（因为类似justify-content: space-between;），那么只有当该空间最终变得更小时，差距才会生效。

它不仅适用于 flexbox，也gap适用于网格和多列布局。

子项的属性（弹性项目）

命令

默认情况下，弹性项目按源顺序排列。但是，该order属性控制它们在弹性容器中出现的顺序。

.item {
  order: 5; /* default is 0 */
}

具有相同的项目order恢复到源订单。

弹性成长

这定义了弹性项目在必要时增长的能力。它接受用作比例的无单位值。它规定了项目应该占用的弹性容器内的可用空间量。

如果所有项目都flex-grow设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为2，则该孩子将占用其他孩子之一的两倍空间（或者至少会尝试）。

.item {
  flex-grow: 4; /* default 0 */
}

负数无效。

弹性收缩

这定义了弹性项目在必要时收缩的能力。

.item {
  flex-shrink: 3; /* default 1 */
}

负数无效。

弹性基础

这定义了在分配剩余空间之前元素的默认大小。它可以是长度（例如 20%、5rem 等）或关键字。关键字的auto意思是“看看我的宽度或高度属性”（这是由main-size关键字临时完成的，直到被弃用）。关键字的content意思是“根据项目的内容调整大小”——这个关键字还没有得到很好的支持，所以很难测试，也很难知道它的兄弟max-content、、min-content和fit-content做什么。

.item {
  flex-basis:  | auto; /* default auto */
}

如果设置为0，则不考虑内容周围的额外空间。如果设置为auto，则根据其flex-grow值分配额外空间。请参阅此图。

柔性

这是flex-grow, flex-shrink和flex-basis组合的简写。第二个和第三个参数 (flex-shrink和flex-basis) 是可选的。默认值为0 1 auto，但如果您使用单个数值设置它，例如flex: 5;，则会将更改flex-basis为 0%，所以它就像设置flex-grow: 5; flex-shrink: 1; flex-basis: 0%;。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

建议您使用此速记属性，而不是设置单个属性。速记智能地设置其他值。

对齐自我

align-items这允许为单个弹性项目覆盖默认对齐方式（或由指定的对齐方式）。

请参阅align-items说明以了解可用值。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

请注意float，clear和vertical-align对弹性项目没有影响。

为 Flexbox 添加前缀

Flexbox 需要一些供应商前缀来支持尽可能多的浏览器。它不仅包括带有供应商前缀的属性，而且实际上还有完全不同的属性和值名称。这是因为 Flexbox 规范随着时间的推移发生了变化，创建了“旧”、“补间”和“新”版本。

也许处理这个问题的最好方法是编写新的（也是最终的）语法并通过Autoprefixer运行你的 CSS ，它可以很好地处理回退。

或者，这里有一个 Sass@mixin来帮助处理一些前缀，它也让你知道需要做什么样的事情：

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}css

例子

让我们从一个非常简单的例子开始，解决一个几乎每天都会遇到的问题：完美居中。如果你使用 flexbox，它再简单不过了。

.parent {
  display: flex;
  height: 300px; /* Or whatever */
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}

这依赖于auto弹性容器中设置的边距吸收额外空间的事实。因此，设置边距auto将使项目在两个轴上完美居中。

现在让我们使用更多的属性。考虑一个包含 6 个项目的列表，所有项目都具有固定尺寸，但可以自动调整大小。我们希望它们在水平轴上均匀分布，这样当我们调整浏览器大小时，一切都可以很好地缩放，并且没有媒体查询。

.flex-container {
  /* We first create a flex layout context */
  display: flex;

  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
}

完毕。其他一切都只是一些造型问题。

让我们试试别的。想象一下，我们网站顶部有一个右对齐的导航元素，但我们希望它在中型屏幕上居中，在小型设备上为单列。很容易。

/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}

让我们通过玩弹性项目的灵活性来尝试更好的东西！带有全宽页眉和页脚的移动优先 3 列布局怎么样？并且独立于源顺序。

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
  flex: 1 100%;
}

/* We rely on source order for mobile-first approach
 * in this case:
 * 1. header
 * 2. article
 * 3. aside 1
 * 4. aside 2
 * 5. footer
 */

/* Medium screens */
@media all and (min-width: 600px) {
  /* We tell both sidebars to share a row */
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars 
   */
  .main { flex: 2 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

浏览器支持

此浏览器支持数据来自Caniuse，其中包含更多详细信息。数字表示浏览器支持该版本及更高版本的功能。

错误

Flexbox 当然也不是没有缺陷。我见过的最好的集合是 Philip Walton 和 Greg Whitworth 的Flexbugs。这是一个跟踪所有这些的开源地方，所以我认为最好只链接到它。

在线咨询

上一篇：「转行测试开发-HTML」(六)-div和span、图像标签的使用
下一篇：俄乌冲突以来的图书出版业：《欧洲之门》热销，作家呼唤和平

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商