青训营—前端总结及对FlexBox(Flex布局）的了解|豆包MarsCode AI 刷题

io_q
71 阅读5分钟

青训营—前端总结及对FlexBox(Flex布局）的了解|豆包MarsCode AI 刷题

一.What is 前端?

前端技术栈的主要组成部分包括：

  1. HTML（HyperText Markup Language） ：

    • 用于定义网页的结构和内容。（大框架的构成）
    • 通过标签（如<div>, <p>, <a>等）来组织信息。

  2. CSS（Cascading Style Sheets） ：

    • 用于控制网页的外观和布局。（主要的样式）
    • 通过选择器（如.class, #id, element等）来应用样式规则。

  3. JavaScript：

    • 用于实现网页的交互功能和动态内容。（类似于动画，点击效果）（更深层次）
    • 是一种脚本语言，可以在浏览器中执行
<img src="转存失败，建议直接上传图片文件 w" alt="转存失败，建议直接上传图片文件" width="30%">

现代的前端框架和库：

  • React：

    • 一个用于构建用户界面的JavaScript库。
    • 通过组件化的方式来组织代码。

  • Vue.js：

    • 另一个流行的JavaScript框架，也采用组件化的开发方式。
    • 提供了响应式的数据绑定和视图更新。

  • Angular：

    • 一个功能全面的前端框架，由Google开发。
    • 提供了丰富的功能和工具，用于构建复杂的单页应用（SPA）。

  • jQuery：

    • 一个轻量级的JavaScript库，用于简化HTML文档遍历和操作、事件处理、动画和Ajax交互。

如何学好前端

我认为前端的学习是一个阶段性的过程，我们可以通过实时的动态页面来观察到实时的效果更新，这比一些深奥的代码来的更加实在，也增加了很多兴趣，学好前端不只是敲好代码，更多的还有找一些实际的代码来丰富自己的思路，理论知识只有通过实践才能真正掌握。尝试自己构建简单的网页或应用，比如个人博客、待办事项列表等。

二.什么是Flex布局

Flex布局，全称为Flexible Box布局，或简称Flexbox，是一种由W3C提出并用于网页设计的新型布局模式。在Flex布局中，当一个块级元素或行内元素被设置为display: flex;或display: inline-flex;时，它就变成了一个Flex容器。这个容器内的所有直接子元素自动成为Flex。Flex布局的核心优势在于能够简便地处理元素的对齐（包括水平和垂直方向）、分配剩余空间、调整元素顺序以及控制元素尺寸，而无需使用传统的流体布局技巧如浮动或定位。

mindmap
      布局
          网格布局（Grid Layout）
          弹性盒子布局（Flexbox Layout
              Flex
                属性
                子元素的属性

三.本身的属性

display属性

拓展：dispaly属性后常见的属性：none，block，inline，inline-block，flex，grid，table，table，inline-table...

设置为Flex布局

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

具体实例：

.lie{
         display: flex;
         height: 200px;
         background-color:rgb(250, 251, 252);
         font-size: larger; 
    }

以下图片对应上面实例代码

image.png

flex-direction属性

flexbox布局是属于单方向布局，意思即子元素的排列方向是横向或者纵向。flex-direction有四个可选值：row、row-reverse、column、column-reverse.

flex-direction属性决定了Flex容器内主轴的方向，即项目排列的方向。主轴和侧轴是Flex布局中的两个关键概念，主轴是项目排列的主要方向，而侧轴则是与主轴垂直的方向。

image.png

屏幕截图 2024-11-20 175649.png

.container {
  flex-direction: row;
}

flex-wrap属性

flex-wrap属性规定flex容器是单行还是多行，同时横轴的方向决定了新行堆叠的方向。如果元素不是弹性盒对象的元素，则flex-wrap属性不起作用。

flex-wrap有三种属性：nowrap，wrap，wrap-reverse

  1. nowrap（默认值）：flex项不换行，一直往后排。当父布局空间不足时，也不会换行，此时可能就会有内容被遮挡看不见。
  2. wrap：换行，flex项往后排，当空间不足时会另起一行从新排列。
  3. wrap-reverse：换行，与wrap相似，但行会从下往上开始。
.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

 flex-row属性

这个属性是flex-direction和flex-wrap的简写。

justify-content属性

justify-content属性：flex-start、flex-end、center、space-between、space-around、space-evenly...

  1. flex-start：默认值，子元素从容器的主轴起点开始排列。
  2. flex-end：子元素从容器的主轴终点开始排列。
  3. center：子元素在容器的主轴上居中对齐。
center
相等123相等
  1. space-between：子元素之间的间隔相等，第一个子元素与容器的起点对齐，最后一个子元素与容器的终点对齐。
space_between
1相等2相等3
  1. space-around：子元素之间的间隔相等，且每个子元素与容器边缘的间隔也是相等的（即子元素之间的间隔是子元素与容器边缘间隔的两倍）。
.box {
    justify-content:flex-start | flex-end | center | space-between | space-around;
}

align-items属性

align-items属性定义项目在交叉轴上如何对齐

image.png

align-content属性

align-content属性定义了多根轴线的对齐方式，项目只有一根轴线，该属性不起作用 flex-start：与交叉轴的起点对齐

flex-end：与交叉轴的终点对齐

center：与交叉轴的中点对齐

sapce-between：与交叉轴两端对齐，轴线之间的间隔平均分布

space-around：每根轴线两侧的间隔相等

stretch(默认值)：轴线占满整个交叉轴

avatar
文章
阅读
粉丝