首页 前端知识 css3-flex布局:基础使用 / Flexbox布局

css3-flex布局:基础使用 / Flexbox布局

2024-09-01 23:09:11 前端知识 前端哥 788 819 我要收藏

一、理解flex

二、理解Flex布局(又称Flexbox布局)

Flex布局(又称Flexbox布局)是一种基于Web的CSS3布局模式,其目的是为了更加灵活和自适应地布置各种各样的网页元素。Flex布局通过将一个父容器分割为一个或多个弹性项目,使得这些项目能够按照一定规则相互排列,并且自动适应它们所处的容器环境。

在Flex布局中,父容器成为“flex container”,子元素成为“flex item”。Flex容器有两个重要的属性:flex-direction和justify-content。flex-direction主要用来决定flex item在主轴上的排列方向,而justify-content则用来对flex item进行主轴方向上的对齐。

除了这些基本属性之外,Flex布局还具有许多其他的属性,例如:align-items、align-content、flex-wrap、order、flex-grow、flex-shrink等。这些属性用来定义flex item在交叉轴和主轴上的排序方式以及它们在父容器中所占的空间大小。

flex布局是一种比较高级的网页排版技术,它能够帮助开发者轻松地实现复杂的网页布局效果,并且具有灵活和响应式的特点。

三、设置了 flex 布局后,以下属性将失效

序号属性备注
1float
2clear
3vertical-align在 Flex 容器中只能用于对齐 Flex 项目中的内联元素或文字
4display:inline-block
5width可以在 Flex 项目上设置
6height可以在 Flex 项目上设置
7margin: auto在 Flex 容器上无法将 Flex 项目水平居中,需要使用justify-content:center实现
8flex-direction: row该属性被设置为默认值flex-direction: row,如果需要更改主轴方向,应该使用flex-direction属性
9flex-wrap: nowrap该属性被设置为默认值flex-wrap:nowrap,如果需要实现换行或不换行,应该使用flex-wrap属性
10justify-content: flex-start该属性被设置为默认值,如果需要更改主轴方向上的对齐方式,应该使用justify-content属性
注意:这并不是绝对的,还取决于具体的属性值和 Flex 项目的结构。有些情况下上述属性仍然可以正常使用

四、Flex布局有以下核心概念

4.1、Flex容器(Flex Container):应用了 Flex 布局的元素,称为 Flex 容器。其作用是定义 Flex 项目所在的容器,使 Flex 项目能够进行弹性布局。

4.2、Flex项目(Flex Item):Flex 容器中的子元素称为 Flex 项目(Flex Item),每个 Flex 项目都具有弹性盒的属性。同时,它们也受到 Flex 容器的限制,如放置的方向、排列顺序等。

4.3、Flex轴(Main Axis):Flex 容器主要的放置方向即为 Flex 轴。在该轴上,Flex 容器中的 Flex 项目会被依次排列。

4.4、Flex交叉轴(Cross Axis):与 Flex 轴垂直的轴称为 Flex 的交叉轴。在该轴上,Flex 项目所占据的空间是有限制的,具体大小由 Flex 容器的属性决定。

4.5、主轴方向属性(justify-content):该属性用于控制 Flex 项目在 Flex 轴上的对齐方式。它可以让 Flex 项目在主轴方向上看起来更加美观,通常被用于实现水平对齐或垂直对齐。

4.6、交叉轴方向属性(align-items):该属性用于控制 Flex 项目在交叉轴上的对齐方式。它可以让 Flex 项目在交叉轴方向上看起来更加美观,通常被用于实现水平对齐或垂直对齐。

4.7、弹性元素属性(flex):该属性用于控制 Flex 项目如何分配 Flex 容器中可用空间。该属性的值决定了 Flex 项目的伸缩性,它能够让 Flex 项目在 Flex 容器中的尺寸发生变化,以适应不同的屏幕尺寸或者容器大小。

五、Flex容器

Flex容器是包含Flex项目的父级元素,通过设置该元素的display属性为flex或inline-flex,即可创建一个Flex容器。

序号属性属性描述值描述
1display指定容器为Flex布局flex主轴水平方向排列
inline-flex主轴垂直方向排列
2flex-direction指定主轴的方向row从左到右
row-reverse水平方向(从右到左)
column垂直方向(从上到下)
column-reverse垂直方向(从下到上)
3justify-content指定主轴上的对齐方式flex-start靠近起点对齐
flex-end靠近终点对齐
center居中对齐
space-between两端对齐
space-around间隔对齐
4align-items指定交叉轴上的对齐方式flex-start靠近起点对齐
flex-end靠近终点对齐
center居中对齐
baseline基线对齐
stretch拉伸对齐
5align-content指定多根轴线的对齐方式(仅当交叉轴为多根轴线时有效)flex-start多行项目对齐于交叉轴的起始位置
flex-end多行项目对齐于交叉轴的结束位置
center多行项目在交叉轴上居中对齐
space-between多行项目在交叉轴上平均分布,首尾项目对齐于容器两端,项目之间的距离相等。
space-around多行项目在交叉轴上平均分布,项目之间的距离相等,首尾项目距离容器两端的距离是其他项目之间距离的一半
stretch多行项目在交叉轴上拉伸以充满容器的高度。
6flex-wrap指定元素是否换行nowrap不换行
wrap换行
wrap-reverse反向换行
7flex-flow用于同时设置 flex 容器的主轴和交叉轴的方向和排列方式,它是 flex-direction 和 flex-wrap 两个属性的缩写row主轴为水平方向,起点在左端
row-reverse主轴为水平方向,起点在右端
column主轴为垂直方向,起点在上方
column-reverse主轴为垂直方向,起点在下方
wrap换行,第一行在上方
wrap-reverse换行,第一行在下方
nowrap不换行,所有元素排在一行上
inherit从父元素继承值
8align-self设置单个项目在交叉轴上的对齐方式auto默认值,元素继承父元素在交叉轴方向上的对齐方式
flex-start元素在交叉轴的起点对齐
flex-end元素在交叉轴的终点对齐
center元素在交叉轴的中心对齐
baseline元素在交叉轴上以基线对齐
stretch将元素在交叉轴上拉伸至撑满整个交叉轴

六、Flex项目

Flex项目是Flex容器中的子元素,通过设置该元素的flex属性,即可使其成为一个Flex项目。

序号属性属性描述
1justify-content控制项目在主轴上的对齐方式
2align-items控制项目在交叉轴上的对齐方式
3flex-direction控制主轴的方向
4flex-wrap控制项目在一行内排列不下时的换行方式
5align-content控制多行项目在交叉轴上的对齐方式
6flex-grow表示Flex项目在空间分配时的放大比例。
flex-grow的默认值为0,数值越大,空间分配越多。
7flex-shrink表示Flex项目在空间不足时的缩小比例。
flex-shrink的默认值为1,数值越大,缩小比例越多,设置为 0 不缩放 。
8flex-basis表示Flex项目在空间分配前的初始大小。
flex-basis的默认值为auto,可以设置具体数值或百分比。
9order表示Flex项目在容器中的排列顺序。
order的默认值为0,数值越小,排列越靠前。可以使用负数值。
10flex是flex-grow, flex-shrink 和flex-basis的缩写,可以一次性设置以上三个属性
是flex-gflex的默认值为0 1 auto。

七、DEMO / vue3.3 + ts

7.1、水平、垂直 居中

<template>
  <div class="container">
    <!-- 水平、垂直 居中 -->
    <div class="flex">
      <div class="flex_item"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="less">
.container{
  .flex{
    display: flex;
    justify-content: center; // 水平居中
    align-items: center; // 垂直居中
    width: 200px;
    height: 200px;
    background: #ff0000;
    &_item{
      width: 50px;
      height: 50px;
      background: #b3de1b;
    }
  }
}
</style>

7.2、flex-shrink

<template>
  <div class="container">
    <div class="flex">
      <div class="flex_item">1</div>
      <div class="flex_item">2</div>
      <div class="flex_item">3</div>
      <div class="flex_item">4</div>
      <div class="flex_item">5</div>
      <div class="flex_item">6</div>
      <div class="flex_item">7</div>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="less">
.container{
  .flex{
    display: flex;
    width: 200px;
    height: 200px;
    background: #ff0000;
    &_item{
      width: 50px;
      height: 50px;
      background: #b3de1b;
      flex-shrink: 0; // 表示Flex项目在空间不足时的缩小比例。flex-shrink的默认值为1,数值越大,缩小比例越多,设置为 0 不缩放 。
    }
  }
}
</style>

7.3、flex-wrap: wrap; / 换行

7.4、 align-content: flex-start; / 多行项目对齐于交叉轴的起始位置

 

7.5、flex 布局,最后一个元素居右

margin-left: auto;

7.6、flex布局,设置间距

gap: 10rpx;

7.7、flex: initial;

display:flex;

三个元素,中间一个name为空字符串

 

我们期望空字符串,中间不展示

flex: initial;

 效果实现

八、过程记录

8.1、display flex 和 inline-flex区别

displayflexinline-flex
布局方向不同display:flex是主轴水平方向排列display:inline-flex是主轴垂直方向排列
元素占用空间不同display:flex元素会占据一行(即父元素宽度)display:inline-flex元素只占据它所包含内容的空间
默认属性不同display:flex默认属性是flex-direction:rowdisplay:inline-flex默认属性是flex-direction:row-reverse
元素排列方式不同display:flex元素默认排列方式为flex-startdisplay:inline-flex元素默认排列方式为baseline

参考链接

使用 Gap 属性给 CSS Flex 布局设置间距 - 知乎

flex布局(详解)-CSDN博客

Flex 布局语法教程 | 菜鸟教程

30 分钟学会 Flex 布局 - 知乎

flex布局(详解)_杰杰坚强的博客-CSDN博客

flex布局详细教程

处理:end value has mixed support, consider using flex-end instead_星月I随心的博客-CSDN博客

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17493.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!