首页 > 文章 > 前端

掌握 Flexbox：我关于构建响应式布局的学习笔记

来源：dev.to

时间：2024-11-08 17:10:00 188浏览收藏

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《掌握 Flexbox：我关于构建响应式布局的学习笔记》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

好吧，喝杯咖啡 （或者茶，我们不评判），让我们深入flexbox的世界！如果您曾因试图让网页在任何设备上看起来都不错而感到沮丧 - 别担心，您并不孤单。 flexbox 来拯救世界，相信我，它并不像听起来那么可怕！

flexbox 到底是什么？

flexbox 就像您的个人布局助手，可以神奇地轻松排列您的项目。了解如何设置弹性容器并轻松组织您的内容。

这种强大而高效的 css 布局模型可让您在容器内灵活地组织和对齐元素。它使项目之间的空间对齐和分配变得轻而易举，无需复杂的计算或定位调整。 flexbox 旨在以最简单的方式处理一维布局（行或列）。

让我们深入了解避免常见错误的实际示例和技巧，让您的设计保持流畅 - 就像早晨的咖啡一样。

为了更好地理解 flexbox，我们将其分为两个主要部分：

flex 容器（父容器）的属性：

弯曲方向
柔性包装
弹性流
调整内容
对齐项目
对齐内容

首先，我们必须在父容器中设置“display: flex”。这会激活 flexbox 并允许将所有属性应用于容器及其项目。

display:flex

弯曲方向

flex-direction: 
row | row-reverse | column | column-reverse

定义容器中物品的主要方向。如果您不指定方向，则将应用默认方向：

row（默认）：项目像行一样水平组织。
row-reverse：项目水平排列但反向排列。
列：项目垂直组织。
column-reverse：项目以相反的顺序垂直组织。 ####柔性包裹

flex-wrap
nowrap | wrap | wrap-reverse

控制项目是否应分成多行/列：

nowrap（默认）：项目保留在单行/列上。
换行：项目在不适合时换行到新行/列。
反向换行：项目反向换行。

弹性流

flex-flow

flex-direction 和 flex-wrap 属性的简写，它们一起定义主轴和交叉轴。默认值：现在行换行。

证明内容合理

justify-content
flex-star | flex-end | space-between | space-around | space-evenly

沿主轴对齐项目（由 flex-direction 设置的方向）：

flex-start：项目在容器的开头对齐。
flex-end：项目在容器的末尾对齐。
center：项目居中对齐。
space- between：项目均匀分布，项目之间有额外的空间。
space-around: 项目周围有相等的空间。
空间均匀：项目之间和周围的空间相等。

对齐项目

align-items 
stretch | flex-start | flex-end | center | baseline

在横轴上对齐项目（垂直于主轴）：

拉伸（默认）：项目拉伸以填充容器。
flex-start：项目在横轴的起点对齐。
flex-end：项目在横轴的末端对齐。
center：项目居中对齐。
基线：项目与其内容的基线对齐。

对齐内容

align-content

当有多行弹性项目时对齐容器的行：

与align-items类似的选项，但应用于多行。

此外，虽然不是 flexbox 独有的，但间隙在此处通常用于设置 flexbox 布局的样式：

gap: 10px 20px /*or*/
row-gap: 10px
colunm-gap: 20px

我们可以应用于弹性项目（子容器）的属性：

下单
弹性增长
伸缩收缩
弹性基础
弯曲
自我对齐

命令

e.g., order: 2

控制弹性项目的视觉顺序。所有项目的默认值为 0，但您可以设置更高或更低的数字来更改顺序。

弹性增长

e.g., flex-grow: 1

定义如果有额外空间，项目应占用多少空间。如果所有项目都有 flex-grow: 1，它们将平均共享额外空间。

弯曲收缩

e.g., flex-shrink: 0

定义空间紧张时项目应缩小的程度。默认为1（项目可以缩小）； 0 防止收缩。

弹性基础

e.g., flex-basis: 200px

在分配空间之前设置项目的初始大小。它可以以像素、百分比或自动为单位。

弯曲

flex: [flex-grow] [flex-shrink] [flex-basis];
flex: 1 1 200px;

同时设置 flex-grow、flex-shrink 和 flex-basis 的简写。例如，flex：1 1 200px；表示该项目可以以 200px 的基本尺寸放大和缩小。

自我对齐

align-self
auto | flex-start | flex-end | center | baseline | stretch

让各个项目的对齐方式与其他项目不同（覆盖align-items）。默认情况下，它使用容器的align-items值。

此代码为探索实际的 flexbox 属性和试验 css 样式提供了一个完美的起点。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <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 class="flex-item">Item 4</div>
    <div class="flex-i tem">Item 5</div>
    <div class="flex-item">Item 6</div>
  </div>
</body>
</html>

当我们结束 flexbox 冒险时，让我们来谈谈 css 魔法——伪类。这些方便的工具可让您根据位置、状态或交互设置元素样式，使您的 flexbox 布局更加动态和交互。无论您是使用 :nth-child() 来替换样式、:hover 来创建微妙的动画，还是使用 :first-child 来使某个项目弹出，伪类都可以让您无需额外的 html 即可添加独特的风格。

准备好继续提升你的技能了吗？我当然是！请坚持下去，因为我的下一篇文章将更深入地探讨 css 技术，使我们的布局变得栩栩如生。我也是来这里学习和成长的，所以如果您有提示、反馈或更正，请随时发表评论。让我们一起继续建设！

以上就是《掌握 Flexbox：我关于构建响应式布局的学习笔记》的详细内容，更多关于的资料请关注golang学习网公众号！

声明：本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除