Flexbox布局基础入门

最新推荐文章于 2024-06-26 09:04:57 发布

xi_h

最新推荐文章于 2024-06-26 09:04:57 发布

阅读量557

点赞数

分类专栏： css 文章标签： css3 html css

本文链接：https://blog.csdn.net/weixin_44955647/article/details/119784011

版权

Flexbox是CSS3的一种布局模式，用于灵活地排列和调整元素。本文介绍了Flexbox的基础概念，包括flex-direction、justify-content、align-items、flex-wrap和align-content属性，以及如何创建Flexbox容器。内容涵盖各种对齐方式和换行策略，帮助开发者理解和应用Flexbox布局。

摘要由CSDN通过智能技术生成

什么是Flexbox

Flexbox是 flexible box 的简称（灵活的盒子容器），是css3引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：

在不同方向排列元素
重新排列元素的显示顺序
更改元素的对齐方式
动态地将元素装入容器

虽然Flexbox非常适合缩放，对齐和重新排序元素。但对于部分旧版本的浏览器缺乏兼容性，特别对于IE内核的浏览器，IE11及更低版本的浏览器对于Flexbox的渲染效果不是很友好，部分较低版本甚至直接不支持Flexbox。所以如果需要完全支持旧版本浏览器的项目不建议使用Flexbox。

注意： Flexbox布局是最合适的一个应用程序的组件，以及小规模的布局，而网格布局是用于较大规模的布局。

由于Flexbox是一个整体模块，而不是单一的一个属性，它涉及到了很多东西，包括它的整个属性集。它们之中有一些是在父容器上设置，而有一些则是在子容器上设置。

如图所示：

主轴（侧轴），Flexbox布局里面将一个可伸缩容器按照水平和垂直方向分为主轴或侧轴，如果你想让这个容器中的可伸缩项目在水平方向上可伸缩展开，那么水平方向上就是主轴，垂直方向上是侧轴，反之亦然；
主轴（侧轴）长度，当确定了哪个是主轴哪个是侧轴之后，在主轴方向上可伸缩容器的尺寸（宽或高）就被称作主轴长度，侧轴方向上的容器尺寸（宽或高）就被称作侧轴长度；
伸缩容器：如果要构建一个可伸缩的盒子，这些可伸缩的项目必须要由一个display：flex的属性的盒子包裹起来，这个盒子就叫做伸缩容器；
伸缩项目：包含在伸缩容器中需要进行伸缩布局的元素被称作伸缩项目；

构建Flexbox容器

首先我们构建一个Flexbox容器，并放置几个可伸缩项目于容器中。

display：flex代表这个容器是一个可伸缩容器，还可以取值为inline-flex,两者的区别在于前者将这个容器渲染为块级元素，后者将其渲染为内联元素。

HTML代码：

<div class="flex-container">
      <div class="flex-item">box1</div>
      <div class="flex-item">box2</div>
      <div class="flex-item">box3</div>
      &l