W3C flex学习笔记

于 2024-08-26 14:34:32 发布
阅读量608 收藏 10
点赞数 4
文章标签： 学习 笔记 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/surgicalMask/article/details/140784162
版权

本文参考的视频来自b站思学堂前端教程的前端知识粉碎机系列：

【前端教程】我是flex布局，6分钟彻底懂我、了解我？_哔哩哔哩_bilibili

【前端教程】我是flex，你真的懂我，了解我吗？_哔哩哔哩_bilibili

在最开头，原视频就有一个非常精妙的比喻，“我”的成长史是一部权力的游戏，这实际上是说flex对于内部元素的控制在不断加强。

整体方向单列 / 多列整体布局，行列对齐方向对单个元素的控制

目录

1.flex概述

2.布局方向 / flex-direction属性

3.换行 / flex-wrap

4.对齐方式 / justify-content & align-items & align-content

4.1.justify-content

4.2.align-items

4.3.align-content

5.单独控制元素

5.1.排序 / order

5.2.缩放 / flex-grow & flex-shrink

5.3.位置 / align-self

1.flex概述

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局，比如，垂直居中就不容易实现。

flex旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化.

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

.box{
  display: flex;
}

行内元素也可以使用Flex布局。

.box{
  display: inline-flex;
}

2.布局方向 / flex-direction属性

flex-direction属性决定主轴，也就是项目排列的方向，有4个值：row，row-reverse，column和column-reverse。

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .item{
    width: 100px;
    background-color: lightgray;
    height: 100px;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

图1.未添加flex的div块

未添加flex的时候，div作为最典型的块元素，自己独占一行。

2.1.row

靠左水平布局，自左向右

  .box{
    display: flex;
    flex-direction: row;
  }

图2.flex-direction: row

2.2.row-reverse

靠右水平布局，自右向左

  .box{
    display: flex;
    flex-direction: row-reverse;
  }

图3.flex-direction: row-reverse

2.3.column

垂直分布，贴页面顶部自上往下

  .box{
    display: flex;
    flex-direction: column;
  }

图4.flex-direction: column

2.4.column-reverse

垂直分布，自下往上，看上去是贴页面顶部，实际上是因为容器的高度等于div块高度之和。

    图5.flex-direction: column-reverse

设置容器的长度为页面长度，可以看到块从页面底部，从下到上

  .box{
    display: flex;
    flex-direction: column-reverse;
    height: 100vh;
  }

图6.flex-direction: column-reverse

3.换行 / flex-wrap

3.1.nowrap

不换行，每个div的宽度都被压缩了，强制显示在一行内

  .box{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }

图7.flex-wrap: nowrap

3.2.wrap

换行

  .box{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

图8.flex-wrap: wrap

3.3.wrap-reverse属性

反向换行

  .box{
    display: flex;
    flex-direction: row;
    height: 100vh;
    flex-wrap: wrap-reverse;
  }

图9.flex-wrap: wrap-reverse

4.对齐方式 / justify-content & align-items & align-content

图10.方向

4.1.justify-content

        4.1.1.flex-start

  .box{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

        

图10.justify-content: flex-start

        4.1.2.flex-end

  .box{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }

图10.justify-content: flex-end

        4.1.3.center

  .box{
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

图11.justify-content: center

        4.1.4.space-between

  .box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

图12.justify-content: space-between

        4.1.5.space-around

  .box{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

图13.justify-content: space-around

4.2.align-items

        4.2.1.flex-start

  .box{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }

图14.align-items: flex-start

         4.2.2.flex-end:

  .box{
    display: flex;
    flex-direction: row;
    height: 100vh;
    align-items: flex-end;
  }

图15.align-items: flex-end

        4.2.3.center

  .box{
    display: flex;
    flex-direction: row;
    height: 100vh;
    align-items: center;
  }

 

图16.align-items: flex-center

        4.2.4.baseline

以第一行文字为基准线进行排列

<div class="box">
  <div class="item" style="height:100px">1</div>
  <div class="item" style="height:300px">2</div>
  <div class="item" style="height:200px">3<br/>3</div>

</div>

<style>
  .item{
    width: 100px;
    background-color: lightgray;
    /* height: 100px; */
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box{
    display: flex;
    flex-direction: row;
    height: 100vh;
    align-items: baseline;
  }
</style>

图17.align-items: baseline

        4.2.5.stretch

      某个元素没有设置高度的时候自动撑满。

      注意先删除第二个div块高度的样式

<div class="box">
  <div class="item" style="height:100px">1</div>
  <div class="item">2</div>
  <div class="item" style="height:200px">3<br/>3</div>
</div>
  .box{
    display: flex;
    flex-direction: row;
    height: 100vh;
    align-items: stretch;
  }

图18.align-items: stretch

4.3.align-content

justify-content和align-content组成行与列之间的排列分布

        4.3.1.flex-start

图19.align-content: flex-start

        4.3.2.flex-end

  .box{
    display: flex;
    flex-direction: row;
    width:1000px;
    height: 100vh;
    flex-wrap: wrap;
    align-content: flex-end;
  }

图20.align-content: flex-start

        4.3.3.center

  .box{
    display: flex;
    flex-direction: row;
    width:1000px;
    height: 100vh;
    flex-wrap: wrap;
    align-content: center;
  }

图21.align-content: flex-start

        4.3.4.space-between

  .box{
    display: flex;
    flex-direction: row;
    width:1000px;
    height: 100vh;
    flex-wrap: wrap;
    align-content: space-between;
  }

图22.align-content: space-between

        4.3.5.space-around

  .box{
    display: flex;
    flex-direction: row;
    width:1000px;
    height: 100vh;
    flex-wrap: wrap;
    align-content: space-around;
  }

图23.align-content: space-around

        4.3.6. stretch

会把没有设置高度的元素自动撑满。

注释掉item样式的高度，为第5个div块增加高度样式作为对比。

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item" style="height: 100px">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
  <div class="item">18</div>
</div>

<style>
  .item{
    width: 100px;
    background-color: lightgray;
    /* height: 100px; */
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box{
    display: flex;
    flex-direction: row;
    width:1000px;
    height: 100vh;
    flex-wrap: wrap;
    align-content: stretch;
  }
</style>

图24.align-content: stretch

5.单独控制元素

5.1.排序 / order

未需要排序的块单独添加

<div class="box">
  <div class="item" style="order: 3;">1</div>
  <div class="item" style="order: 1;">2</div>
  <div class="item" style="order: 2;">3</div>
</div>

图25.元素排序

5.2.缩放 / flex-grow & flex-shrink

        5.2.1.flex-grow

        按照flex-grow的比例分配剩余空间

<div class="box">
  <div class="item" style="flex-grow: 3;">1</div>
  <div class="item" style="flex-grow: 1;">2</div>
  <div class="item" style="flex-grow: 2;">3</div>
</div>

       

图26.flex-grow

        5.2.2.flex-shrink

         按照flex-shrink的比例减少超出的空间 

         首先增大每个div块的宽度（注意因为没有要求换行，所以会自动调整div块的大小以匹配容器的宽）

<div class="box">
  <div class="item" style="flex-shrink: 1;">1</div>
  <div class="item" style="flex-shrink: 2;">2</div>
  <div class="item" style="flex-shrink: 3;">3</div>
</div>

图27.flex-shrink

5.3.位置 / align-self

通过align-self单独操纵一个元素的位置

        5.3.1.auto

flex项将使用其父容器的 align-items 属性值。如果父容器没有设置 align-items，那么默认为是 stretch。

<div class="box">
  <div class="item">1</div>
  <div class="item" style="align-self: auto;">2</div>
  <div class="item">3</div>
</div>

图28. auto

        5.3.2.flex-start

<div class="box">
  <div class="item">1</div>
  <div class="item" style="align-self: flex-start;">2</div>
  <div class="item">3</div>
</div>

图29. flex-start

        5.3.3.flex-end

<div class="box">
  <div class="item">1</div>
  <div class="item" style="align-self: flex-end;">2</div>
  <div class="item">3</div>
</div>

图30. flex-end

        5.3.4.center

<div class="box">
  <div class="item">1</div>
  <div class="item" style="align-self: center;">2</div>
  <div class="item">3</div>
</div>

图31. center

        5.3.5.baseline

<div class="box">
  <div class="item" style="height: 200px;">1</div>
  <div class="item" style="align-self: baseline;">2</div>
  <div class="item" style="height: 200px;">3</div>
</div>

图32. center

        5.3.6.stretch

<div class="box">
  <div class="item" style="height: 200px;">1</div>
  <div class="item" style="align-self: stretch;">2</div>
  <div class="item" style="height: 400px;">3</div>
</div>

图33. stretch

surgicalMask
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flex布局学习笔记（flex布局教程）
weixin_56334307的博客
06-24 142
align-self属性允许单个项⽬有与其他项⽬不⼀样的对齐⽅式，可覆盖align-items属性，默认值为auto，表⽰继承⽗元素的align-items属性，如果没有⽗元素，则等同于stretch。它的默认值为auto，即项⽬的本来⼤⼩。flex属性是flex-grow，flex-shrink 和flex-basis的简写，默认值为 0 1 auto。flex项⽬（⼦元素）有6个属性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。
CSS学习笔记
03-17
【CSS学习笔记】 在网页设计领域，CSS（Cascading Style Sheets）是不可或缺的一部分，它负责定义HTML或XML（包括SVG、XHTML等）文档的呈现样式。本笔记旨在深入探讨CSS的基础概念、语法和高级特性，帮助你从初级到...
Flex 学习笔记
m0_72410588的博客
07-21 82
Flex 是一种强大的 CSS 布局模型，它提供了灵活且强大的排列和对齐方式。通过掌握基础概念和常用属性，我们可以轻松实现各种复杂的布局需求。希望本篇学习笔记对您理解和掌握 Flex 布局有所帮助。
flex学习笔记
Ackerly的博客
05-28 1137
     flex是弹性布局，使用flex布局需要注意浏览器兼容性问题，需要IE10以上的浏览器才支持这个属性。flex跟传统布局不一样，没有块级和内联的概念。flex由两部分组成，父容器flex container，子元素flex item。另外一个flex有主轴和侧重，里面元素的排列方式是基于主纵轴排列的。弹性布局下float不生效，相邻margin不重叠，column不起作用，clear属性...
前端基础学习笔记
sober30的博客
07-27 4135
css3有哪些新特性：圆角盒子阴影文本阴影不透明度 ：opacity 、rgba渐变背景 ：线性渐变、径向渐变背景属性：backgroud-size、background-clip（拓展）结构选择器：first-child()…伪元素新写法 :before ::before(css3) 为了和:hover之类的伪类选择器作区分弹性盒子：flex转换：2D转换、3D转换（拓展）过渡：一般搭配hover使用animation动画（拓展）媒体查询。
CSS学习笔记整理
bfbshs_ddd的博客
12-16 1684
整理过去的CSS学习笔记。CSS 即 层叠样式表/CSS样式表/级联样式表，也是标记语言， 用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距）以及版面的布局和外观显示样式
Flex 学习笔记：布局教程之语法篇
谦谦君的博客
11-01 165
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; }...
伸缩盒模型—学习笔记
2301_77724717的博客
11-05 104
2009年，w3c提出了一种新的盒子模型——flexible Box（伸缩盒模型，又称：弹性盒子）除了部分IE浏览器不支持，其他浏览器均已全部支持。
CSS3 Flex 学习笔记
随芯的博客
04-10 252
CSS3 Flex 学习笔记 目录：CSS3 Flex 学习笔记个人认知习惯Flex 是什么，存在的价值？ 个人认知习惯 这个是什么，存在价值，直接点：为什么诞生他 怎么学习好 举一反三使用 Flex 是什么，存在的价值？ ...
尚硅谷CSS学习笔记
MissXu666的博客
10-10 1339
等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。③维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。我们在编码时，不用过于关注浏览器的私有前缀，不用去记忆，去查询，因为常用的css3 新特性，主流浏览器都是支持的，对于老版本浏览器，我们也可以借助现代构建工具，去帮我们添加私有前缀。
与大家分享一下Flex 学习资料 （续）
03-27
标题中的“Flex学习资料（续）”表明这是一个关于Adobe Flex技术的进阶学习资源，Flex是一种用于构建富互联网应用程序（RIA）的框架，基于ActionScript和MXML。它允许开发者创建交互性强、功能丰富的Web应用。 描述...
CSS样式学习笔记之一：基础知识
05-24
默认情况下，CSS使用W3C盒模型，其中宽度和高度只包含内容区域，但可以通过`box-sizing`属性调整为IE盒模型，将宽度和高度包括内容、内边距和边框。 布局是CSS中的另一大主题。传统上，我们依赖浮动（float）和定位...
CSS基础_css_笔记
09-23
默认盒模型是W3C盒模型（IE5+、Firefox、Chrome等），其中宽度和高度仅包含内容区域。但也有IE盒模型，将边框和内边距包含在宽度和高度内。 **三、布局方式** 1. **块级布局**：元素默认占据一整行，如`div`、`p`...
HTML5学习笔记（总结提炼版）——002 CSS
03-14
盒模型分为两种：W3C标准盒模型（content-box，宽度和高度只包含内容区域）和IE盒模型（border-box，宽度和高度包含内容、内边距和边框）。 【布局方式】 CSS提供了多种布局方式，包括流体布局（使用百分比定义...
day38-栈和队列理论学习【python】
canGfly的博客
08-21 479
栈（Stack）: 使用 Python 的list实现。主要操作有pushpoppeek, 和is_empty。队列（Queue）: 使用实现。主要操作有enqueuedequeuepeek, 和is_empty。这两种数据结构可以通过这些操作灵活地处理和存储数据。在实际应用中，选择使用哪种数据结构取决于具体的需求和场景。ok了，就到这里叭～～～​​​。
数据结构（邓俊辉）学习笔记】优先级队列 08——左式堆：结构
最新发布
weixin_44399845的博客
08-23 961
学习左式堆的结构
vue.js学习步骤
m0_63178019的博客
08-23 724
Vue.js 从一个简单的实验性项目成长为一个功能强大、社区活跃的前端框架，其发展历程展示了它对前端开发的持续创新和改进。通过引入先进的功能和不断扩展的生态系统，Vue.js 为开发者提供了一个高效、灵活的工具，满足了不同规模和复杂度应用的需求。
学习大数据DAY44 帆软 report 配置
shh2000424的博客
08-23 1088
署，并设置服务器开机自启动，并请实操演示 得分点（完成得满分，未完成得。服务器容器的端口修改，并将内存调大，请实操演示 得分点（完成得。2 部署 tomcat web 服务。1 安装帆软 report v11。配置环境变量 推荐用自己的名字。等几秒查看下进程或者端口。3 显示 帆软 报表平台。分 服务器开机自启动。初始化设置下用户和密码。在它的第二行上面添加。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值