CSS 布局 - 浮动、Flexbox 和网格

百变鹏仔 3个月前 (09-19) #CSS

文章标签网格

第 5 讲：css 布局 - 浮动、flexbox 和网格

在本次讲座中，我们将深入探讨在 css 中创建布局的基本技术。了解如何使用浮动、flexbox 和网格构建内容将使您能够构建响应灵敏且组织良好的网站。在本讲座结束时，您将能够创建适应不同屏幕尺寸和设备的布局。

了解 css 布局技术

css 提供了多种布局技术，每种技术都有自己的用例。我们将介绍三种基本方法：floats、flexbox 和 grid。

1.漂浮

浮动最初设计用于将文本环绕图像，但它们已广泛用于创建布局。尽管它们大部分已被更新的技术取代，但它们在某些情况下仍然有用。

  .left {    float: left;    width: 50%;  }  .right {    float: right;    width: 50%;  }  .clearfix::after {    content: "";    display: block;    clear: both;  }

  <div class="clearfix">    <div class="left">left content</div>    <div class="right">right content</div>  </div>

在此示例中，两个 div 左右浮动，创建两列布局。

立即学习“前端免费学习笔记（深入）”；

2.弹性盒

flexbox 是一种更现代的布局技术，提供强大的对齐和分布功能。它非常适合创建灵活且响应式的布局。

  .flex-container {    display: flex;    justify-content: space-between;    align-items: center;  }  .flex-item {    flex: 1;    margin: 10px;  }

  <div class="flex-container">    <div class="flex-item">item 1</div>    <div class="flex-item">item 2</div>    <div class="flex-item">item 3</div>  </div>

这里，.flex-container 使用 flexbox 在容器中均匀分布三个项目，它们之间的间距相等。

3. css 网格

网格是 css 中最强大的布局系统，允许您创建复杂的二维布局，并精确控制行和列。

  .grid-container {    display: grid;    grid-template-columns: 1fr 2fr;    grid-gap: 10px;  }  .grid-item {    padding: 20px;    background-color: #ccc;  }

  <div class="grid-container">    <div class="grid-item">item 1</div>    <div class="grid-item">item 2</div>    <div class="grid-item">item 3</div>  </div>

此示例创建一个包含两列的网格布局。第一列占据一小部分空间，第二列占据两部分空间，项目之间的间隙为 10px。

实际示例：

让我们使用 flexbox 创建一个简单的网页布局来排列页眉、主要内容和页脚。

html：

<div class="flex-container">  <header class="flex-item header">header</header><main class="flex-item main">main content</main><footer class="flex-item footer">footer</footer></div>

css：

body {  margin: 0;  font-family: Arial, sans-serif;}.flex-container {  display: flex;  flex-direction: column;  height: 100vh;}.header, .footer {  background-color: #333;  color: white;  text-align: center;  padding: 20px;}.main {  flex: 1;  padding: 20px;  background-color: #f4f4f4;}

在此示例中：

练习运动

使用浮动创建一个简单的网页来创建两列布局。
使用 flexbox 设计响应式导航栏。
尝试使用 css 网格创建具有不同行和列大小的多列布局。

下一步：在下一堂课中，我们将探索带有媒体查询的响应式网页设计，您将在其中学习如何使您的布局适应不同的屏幕尺寸和设备。请继续关注！

在 linkedin 上关注我

里多伊·哈桑

文章推荐

CSS 布局 - 浮动、Flexbox 和网格

第 5 讲：css 布局 - 浮动、flexbox 和网格

了解 css 布局技术

1.漂浮

2.弹性盒

3. css 网格

实际示例：

练习运动

在 linkedin 上关注我

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写