一篇文章带你彻底了解flex布局

news2024/9/29 17:34:01

哈喽，大家好呀，我是前端理想哥，今天我们来聊聊 flex 布局。

好，主角登场。

CSS 弹性盒子模型( Flexible Box 或者 Flexbox )

先来看看它的定义：弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。

简单来说，弹性盒子模型，是为了你的网页可以在不同分辨率设备上自适应展示而生的一种布局方式。

弹性盒子布局主要适用于应用程序的组件及小规模的布局，而（新兴的）栅格布局则针对大规模的布局。这二者都是 CSS 工作组为在不同用户代理、不同书写模式和其他灵活性要求下的网页应用程序有更好的互操作性而做出的更广泛的努力的一部分。

现在，我们来看如何定义一个弹性盒子：

<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>

如果要将上面的 HTML 布局改为弹性盒子布局，该怎么办？

很简单！！

只需要设置如下：

#main{
	display: flex
}

或者

#main{
	display: inline-flex
}

区别在于，flex 会使弹性容器成为块级元素，而 inline-flex 会使弹性容器成为单个不可分的行内级元素。

说到这里，有人会问了，弹性容器是什么东东？？？ 大家先来看一张图： flexbox.png 对比这张图和上面的 html 代码，大家可以看到：

弹性容器(Flex container)：指的就是包含着弹性项目的父元素，即上面的 #main 弹性项目(Flex item)：弹性容器的每个子元素都称为弹性项目，弹性容器直接包含的文本将被包覆成匿名弹性单元。即上面的 #main div

大家再仔细观察上面的那张图，图上有个主轴和侧轴，这里又涉及到一个知识点：轴(Axis)

每个弹性框布局都包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)

接下来我结合上面的 HTML 代码为大家讲解下怎么确定主轴和主轴上内容的显示：

使用弹性容器的 flex-derection 可以确立主轴，这个属性一共有 6 个值，接下来，我为大家一一展示：

#main{
	display: flex;
	width: 200px;
    flex-direction:row;   //默认值，水平展示
}

屏幕快照 2017-12-27 下午5.23.11.png

#main{
	display: flex;
	width: 200px;
    flex-direction:row-reverse;   //与row相同，但是以相反的顺序
}

屏幕快照 2017-12-27 下午5.24.54.png

#main{
	display: flex;
	width: 200px;
    flex-direction:column;   // 弹性项目将垂直展示
}

屏幕快照 2017-12-27 下午5.26.50.png

#main{
	display: flex;
	width: 200px;
    flex-direction:column-reverse;   // 与 column 相同，但是以相反的顺序。
}

屏幕快照 2017-12-27 下午5.28.47.png

还有两个属性，简单介绍下，就不用举例了： initial：设置该属性为它的默认值 inherit：从父元素继承该属性

确定了主轴之后，那么在主轴上弹性项目怎么分布？？

我们来看一个新的属性： justify-content: 定义了在当前行上，弹性项目沿主轴如何排布。

#main {
    display: flex;
    width: 400px;
    flex-direction: row;
    justify-content: flex-start;  //默认值，项目位于容器的开头
}

屏幕快照 2017-12-27 下午5.37.16.png

#main{
  display: flex;
  width: 400px;
  flex-direction: row;
  justify-content: flex-end;  // 项目位于容器的结尾
}

屏幕快照 2017-12-27 下午5.39.02.png

#main{
  display: flex;
  width: 400px;
  flex-direction: row;
  justify-content: center;  // 项目位于容器的中间
}

屏幕快照 2017-12-27 下午5.40.26.png

#main{
  display: flex;
  width: 400px;
  flex-direction: row;
  justify-content: space-between;  // 项目位于各行之间留有空白的容器内
}

屏幕快照 2017-12-27 下午5.41.35.png

#main{
  display: flex;
  width: 400px;
  flex-direction: row;
  justify-content: space-around;  // 项目位于各行之前、之间、之后都留有空白的容器内。
}

屏幕快照 2017-12-27 下午5.43.47.png

还有两个属性，简单介绍下，就不用举例了： initial：设置该属性为它的默认值 inherit：从父元素继承该属性

确定了弹性项目在主轴上是怎么排布的，接下来，再介绍下在侧轴上是怎么排布的：

#main{
  display: flex;
  height: 200px;
  align-items: stretch;  // 默认值，项目被拉伸以适应容器
}

[图片上传中...(屏幕快照 2017-12-27 下午5.50.11.png-f482c0-1514368241951-0)] 

#main{
  display: flex;
  height: 200px;
  align-items: center;  // 项目位于容器的中心
}

屏幕快照 2017-12-27 下午5.52.46.png

#main{
  display: flex;
  height: 200px;
  align-items: flex-start;  // 项目位于容器的开头
}

屏幕快照 2017-12-27 下午5.55.34.png

#main{
  display: flex;
  height: 200px;
  align-items: flex-end;  // 项目位于容器的结尾
}

屏幕快照 2017-12-27 下午5.54.09.png

#main{
  display: flex;
  height: 200px;
  align-items: baseline;  // 项目位于容器的基线上
}

还有两个属性，简单介绍下，就不用举例了： initial：设置该属性为它的默认值 inherit：从父元素继承该属性

如果我只想改变单个弹性项目的对齐方式，该怎么办？

别怕，align-self 属性来也！

align-self：定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由 align-items 所确立的默认值。

还是用这个 HTML 来展示：

<div id="main">
  <div class="a" style="background-color:coral;">A</div>
  <div class="b" style="background-color:lightblue;">B</div>
  <div class="c" style="background-color:khaki;">C</div>
  <div class="d" style="background-color:pink;">D</div>
  <div class="e" style="background-color:lightgrey;">E</div>
  <div class="f" style="background-color:lightgreen;">F</div>
</div>

#main{
 display: flex;
 height: 200px;
 align-items: center;
 background: red;
}

#main div{
  width: 40px;
}

#main .d{
 align-self: auto;  //默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
}

#main .d{
 align-self: stretch;  //元素被拉伸以适应容器
}

屏幕快照 2017-12-27 下午6.13.00.png

#main .d{
 align-self: center;  //元素位于容器的中心
}

屏幕快照 2017-12-27 下午6.16.04.png

#main .d{
 align-self: flex-start;  //元素位于容器的开头
}

[图片上传中...(屏幕快照 2017-12-27 下午6.16.54.png-16a15-1514369874621-0)] 

#main .d{
 align-self: flex-end;
}

//元素位于容器的结尾屏幕快照 2017-12-27 下午6.16.54.png

#main .d{
 align-self: baseline;  //元素位于容器的基线上
}

还有两个属性，简单介绍下，就不用举例了： initial：设置该属性为它的默认值 inherit：从父元素继承该属性

说完了弹性项目的排布，接下来，我们回看最上面那张图，再来说说，怎么确定主轴/侧轴的方向

我们先来看一个属性： flex-wrap：规定 flex 容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

#main{
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display:flex;
  background: red;
  flex-wrap: nowrap;  // 默认值，规定灵活的项目不拆行或不拆列
}

屏幕快照 2017-12-27 下午6.40.48.png

#main{
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display:flex;
  background: red;
  flex-wrap: wrap;  // 默认值，规定灵活的项目在必要时拆行或拆列
}

屏幕快照 2017-12-27 下午6.43.02.png

#main{
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display:flex;
  background: red;
  flex-wrap: wrap-reverse;  // 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
}

屏幕快照 2017-12-27 下午6.44.14.png

还有两个属性，简单介绍下，就不用举例了： initial：设置该属性为它的默认值 inherit：从父元素继承该属性

order: 属性将元素与序号关联起来，以此决定哪些元素先出现

<div id="main">
  <div class="a" style="background-color:coral;">A</div>
  <div class="b" style="background-color:lightblue;">B</div>
  <div class="c" style="background-color:khaki;">C</div>
  <div class="d" style="background-color:pink;">D</div>
  <div class="e" style="background-color:lightgrey;">E</div>
  <div class="f" style="background-color:lightgreen;">F</div>
</div>

.a{
  order: 6;
  -webkit-order: 6;
}
.b{
  order: 5;
  -webkit-order: 5;
}
.c{
  order: 4;
  -webkit-order: 4;
}
.d{
  order: 3;
  -webkit-order: 3;
}
.e{
  order: 2;
  -webkit-order: 2;
}
.f{
  order: 1;
  -webkit-order: 1;
}

屏幕快照 2017-12-27 下午6.50.18.png flex-flow：是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布。

对于行(Line)中来说，根据 flex-wrap 属性，弹性项目可以排布在单个行或多个行中。此属性控制侧轴的方向和新行排列的方向

我们确定了弹性容器的主轴与侧轴，弹性项目的宽和高，怎么来确定对应的主轴尺寸和侧轴尺寸？？？

(1) 可以使用 min-height 和 min-width 来确定，这两个的初始值都是 0

(2) flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写，描述弹性项目的整体伸缩性。

接下来，我们逐一看看这三个新的属性

flex-grow: 用于设置或检索弹性盒的扩展比率

#main{
  width: 500px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display:flex;
  background: red;
}

#main div{
  width: 40px;
}

.a{
  flex-grow: 2;
}
.b{
  flex-grow: 3;
}
.c{
  flex-grow: 1;
}
.d{
  flex-grow: 3;
}
.e{
  flex-grow: 2;
}
.f{
  flex-grow: 1;
}

屏幕快照 2017-12-27 下午7.22.01.png

flex-shrink: 指定了 flex 元素的收缩规则，flex 元素仅在默认宽度之和大于容器时才会发生收缩，其收缩的大小是依据 flex-shrink 的值

<p>div 总宽度为 500px, flex-basic 为 120px。</p>
<p>A, B, C 设置 flex-shrink:1。 D , E 设置为 flex-shrink:2</p>
<p>D , E 宽度与 A, B, C 不同</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>

屏幕快照 2017-12-27 下午7.31.55.png flex-shrink 的默认值为 1，如果没有显示定义该属性，将会自动按照默认值 1 在所有因子相加之后计算比率来进行空间收缩。 本例中 A、B、C 显式定义了 flex-shrink 为 1，D、E 定义了 flex-shrink 为 2，所以计算出来总共将剩余空间分成了 7 份，其中 A、B、C 占 1 份，D、E 占 2 份，即 1:1:1:2:2 我们可以看到父容器定义为 500px，子项被定义为 120px，子项相加之后即为 600 px，超出父容器 100px。那么超出的 100px 需要被 A、B、C、D、E 消化 通过收缩因子,所以加权综合可得 1001+100_1+100_1+100_2+100_2=700px

于是我们可以计算 A、B、C、D、E 将被移除的溢出量是多少： A 被移除溢出量：(100_1/700)_100，即约等于 14px B 被移除溢出量：(100_1/700)_100，即约等于 14px C 被移除溢出量：(100_1/700)_100，即约等于 14px D 被移除溢出量：(100_2/700)_100，即约等于 28px E 被移除溢出量：(100_2/700)_100，即约等于 28px 最后 A、B、C、D、E 的实际宽度分别为：120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px，此外，这个宽度是包含边框的。__

flex-basis：用于设置或检索弹性盒伸缩基准值。

接下来，说几个弹性盒子的相关属性： 由于弹性盒子使用了不同的布局算法，某些属性用在弹性容器上没有意义：

  • 多栏布局模块的 column-* 属性对弹性项目无效
  • float 与 clear 对弹性项目无效。使用 float 将使元素的 display 属性记为 block
  • vertical-align 对弹性项目的对齐方式无效。

最后，我们来看换一个例子：

​<!DOCTYPE html>
<html lang="en">
  <head>
    <style>

   .flex
   {
      /* 基本样式 */
      width: 350px;
      height: 200px;
      border: 1px solid #555;
      font: 14px Arial;

      /*  建立弹性框 */
      display: -webkit-flex;
      -webkit-flex-direction: row;

      display: flex;
      flex-direction: row;
   }

   .flex > div
   {
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto;

      width: 30px; /* 让过渡表现良好。（从/到"width:auto"的过渡
                      至少在 Gecko 和 Webkit 上是有 bug 的。
                      更多信息参见 http://bugzil.la/731886 ） */

      -webkit-transition: width 0.7s ease-out;
      transition: width 0.7s ease-out;
   }

   /* colors */
   .flex > div:nth-child(1){ background : #009246; }
   .flex > div:nth-child(2){ background : #F1F2F1; }
   .flex > div:nth-child(3){ background : #CE2B37; }

   .flex > div:hover
   {
        width: 200px;
   }

   </style>

 </head>
 <body>
  <p>Flexbox nuovo</p>
  <div class="flex">
    <div>uno</div>
    <div>due</div>
    <div>tre</div>
  </div>
 </body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1396050.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Conmi的正确答案——eclipse C/C++显示“未解析的包含：＜xxx.h＞”/“Unresolved inclusion: ＜xxx.h＞”

Conmi的正确答案——eclipse C/C++显示“未解析的包含：＜xxx.h＞”/“Unresolved inclusion: ＜xxx.h＞”

eclipse IDE 版本&#xff1a;2023-12 部分采自&#xff1a;解决方法&#xff1a;关于问题 “C - Unresolved inclusion: <iostream>” 解释事项&#xff1a;方法一可能版本不同&#xff0c;部分界面修改了。这里使用的是方法二的解决方法。&#xff08;或者各位大神的描…
阅读更多...
Dubbo使用详解

Dubbo使用详解

简介 Dubbo是一个高性能、轻量级的开源Java RPC框架&#xff0c;由阿里巴巴公司开发并开源。它提供了三大核心能力&#xff1a;面向接口的远程方法调用&#xff0c;智能容错和负载均衡&#xff0c;以及服务自动注册和发现。Dubbo使得应用可通过高性能的 RPC 实现服务的输出和输…
阅读更多...
ITSS内幕揭秘！不看后悔！

ITSS内幕揭秘！不看后悔！

1️⃣ ITSS&#xff1f;那是啥玩意&#xff1f; ITSS&#xff0c;就是一套超酷的信息技术服务标准大全&#xff01;它规范了所有信息技术服务的小秘密&#xff0c;确保服务可靠又让人放心&#xff01;&#x1f4aa; 2️⃣ 哪些公司需要这个神器&#xff1f; ITSS可是个大家伙&a…
阅读更多...
Unity 程序员UI编码规范

Unity 程序员UI编码规范

今天给大家分享Unity UI开发相关的一些编码和规范&#xff0c;有了这些指导规范&#xff0c;帮助你的项目获得更好的性能&#xff0c;少走弯路。Unity GUI&#xff08;也被称为UGUI&#xff09;经常是项目性能问题的来源。 考虑使用多分辨率和宽高比 大部分情况下&#xff0c…
阅读更多...
解锁文字魔法：探索自然语言处理的秘密——从技术揭秘到应用实战！

解锁文字魔法：探索自然语言处理的秘密——从技术揭秘到应用实战！

目录 前言 关键技术——揭密自然语言处理的秘密武器&#xff01; 领域应用——自然语言处理技术在不同领域的奇妙表演&#xff01; 超越极限——自然语言处理技术面临的顽强挑战揭秘&#xff01; 科技VS伦理——自然语言处理技术的发展与伦理社会的纠结较量&#xff01; 开…
阅读更多...
EasyX图形化学习（三）

EasyX图形化学习（三）

1.帧率&#xff1a; 即每秒钟界面刷新次数&#xff0c;下面以60帧为例&#xff1a; 1.数据类型 clock_t&#xff1a; 用来保存时间的数据类型。 2.clock( ) 函数&#xff1a; 用于返回程序运行的时间,无需参数。 3.例子&#xff1a; 先定义所需帧率&#xff1a; const …
阅读更多...
力扣 | 11. 盛最多水的容器

力扣 | 11. 盛最多水的容器

双指针解法–对撞指针 暴力解法public int maxArea1(int[] height) {int n height.length;int ans 0;for (int i 0; i < n; i) {for (int j i 1; j < n; j) {int area Math.min(height[i], height[j]) * (j - i);ans Math.max(ans, area);}}return ans;}双指针解法…
阅读更多...
力扣每日一练（24-1-18）

力扣每日一练（24-1-18）

经验一&#xff1a;不要把问题想复杂 Python&#xff1a; min_price float(inf)max_profit 0for price in prices:min_price min(min_price, price)max_profit max(max_profit, price - min_price)return max_profit C#&#xff1a; public int MaxProfit(int[] prices) {i…
阅读更多...
MySQL（视图，存储函数，存储过程）

MySQL（视图，存储函数，存储过程）

作业1&#xff1a; 作业实现&#xff1a; 首先创建学生表&#xff0c;课程表&#xff0c;以及学生选课表。 CREATE TABLE Student (Sno INT PRIMARY KEY,Sname VARCHAR(20) NOT NULL,Ssex CHAR(1) CHECK (Ssex IN (男, 女)),Sage INT,SDept VARCHAR(20) DEFAULT 计算机 );CRE…
阅读更多...
AI小程序添加深度合成类目解决办法

AI小程序添加深度合成类目解决办法

基于文言一心和gpt等大模型做了一个ai助理小程序&#xff0c;在提交“一点AI助理”小程序时&#xff0c;审核如下&#xff1a; 失败原因1 审核失败原因 你好&#xff0c;你的小程序涉及提供提供文本深度合成技术 (如: AI问答) 等相关服务&#xff0c;请补充选择&#xff1a;深度…
阅读更多...
骨传导蓝牙耳机怎么使用？使用骨传导耳机对人体有没有伤害？

骨传导蓝牙耳机怎么使用？使用骨传导耳机对人体有没有伤害？

骨传导蓝牙耳机的使用方法和传统的入耳式蓝牙耳机使用方法相差无几&#xff0c;都是通过蓝牙来进行连接使用&#xff0c;但骨传导耳机会自带内存&#xff0c;所以在此前提上可以存储音乐独立使用&#xff0c;比传统的入耳式蓝牙耳机使用更方便一些。 那么使用骨传导耳机会不会对…
阅读更多...
【方案】世微AP51656 电流采样降压恒流驱动 60V3A LED灯 SOT89-5

【方案】世微AP51656 电流采样降压恒流驱动 60V3A LED灯 SOT89-5

1&#xff0c;方案应用&#xff1a;3A输出 LED灯BOM表 2&#xff0c;方案应用&#xff1a;3A输出 LED灯线路图 3&#xff0c;产品描述 AP51656是一款连续电感电流导通模式的降压恒流源&#xff0c;用于驱动一颗或多颗串联LED输入电压范围从 5 V 到 60V&#xff0c;输出电流 可…
阅读更多...
17.自主练习

17.自主练习

一、建表 1、建库、建表 # 创建数据库 create database mysql_exampleTest; use mysql_exampleTest; # 学生表 CREATE TABLE Student( s_id VARCHAR(20), s_name VARCHAR(20) NOT NULL DEFAULT , s_birth VARCHAR(20) NOT NULL DEFAULT , s_sex VARCHAR(10) NOT NULL…
阅读更多...
油猴脚本注入js获取DY作品数据

油猴脚本注入js获取DY作品数据

油猴脚本的执行时机: 元素还未生成 https://bbs.tampermonkey.net.cn/thread-3843-1-1.html 而在控制台执行时, 通常元素已经生成 逻辑就是在网页每次发送请求时, 拦截它请求的响应数据作操作; 所以当用户作品很多时, 也需要一直滚动到全部作品请求加载完成, 触发下载 &#…
阅读更多...
数据库经典面试题

数据库经典面试题

习题一 1.1 创建表 ①创建Student表 mysql> create table Student ( -> Sno int primary key, -> Sname varchar(255), -> Ssex varchar(10), -> Sdept varchar(50) -> ); Query OK, 0 rows affected (0.01 sec) ②创建Course表 mysql…
阅读更多...
树莓派4B +Ubuntu20.04+ROS1的使用（2）

树莓派4B +Ubuntu20.04+ROS1的使用（2）

首先确定一下主机与从机的ip地址&#xff08;非常重要&#xff09; 在这次实验中&#xff0c;主机是一台Ubuntu20.04.03系统的台式机&#xff0c;我们间通过这台准备来远程遥控树莓派上的ros1系统&#xff0c;它的ip地址是192.168.230.181 从机是一台搭载Ubuntu20.04桌面版ro…
阅读更多...
项目管理十大知识领域之项目人力资源管理

项目管理十大知识领域之项目人力资源管理

一、项目人力资源管理的概述 作为项目管理的重要组成部分&#xff0c;项目人力资源管理旨在有效管理和利用项目团队的人力资源&#xff0c;以实现项目目标。它涵盖了对人员的招聘、培训、激励和绩效管理等方面&#xff0c;旨在确保项目团队的高效运转和成员的专业发展。项目人…
阅读更多...
录课视频太大怎么办？3种方法一键瘦身~

录课视频太大怎么办？3种方法一键瘦身~

录制视频是现代人常用的一种记录生活的方式&#xff0c;但是视频文件大小往往会很大&#xff0c;不利于存储和分享。为了解决这个问题&#xff0c;我们需要使用视频压缩软件来压缩视频文件大小&#xff0c;以便更方便地存储和分享。 方法一&#xff1a;嗨格式压缩大师 嗨格式压…
阅读更多...
el-tree获取当前选中节点及其所有父节点的id(包含半选中父节点的id)

el-tree获取当前选中节点及其所有父节点的id(包含半选中父节点的id)

如下图，我们现在全勾中的有表格管理及其下的子级，而半勾中的有工作台和任务管理及其子级 现在点击保存按钮后，需要将勾中的节点id及该节点对应的父节点，祖先节点的id（包含半选中父节点的id）也都一并传给后端，那这个例子里就应该共传入9个id，我们可以直接将getCheckedK…
阅读更多...
【b站咸虾米】chapter4_vue组件_新课uniapp零基础入门到项目打包（微信小程序/H5/vue/安卓apk）全掌握

【b站咸虾米】chapter4_vue组件_新课uniapp零基础入门到项目打包（微信小程序/H5/vue/安卓apk）全掌握

课程地址&#xff1a;【新课uniapp零基础入门到项目打包&#xff08;微信小程序/H5/vue/安卓apk&#xff09;全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p12&share_sourcecopy_web&vd_sourceb1cb921b73fe3808550eaf2224d1c155 四、vue组件 uni-app官网 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023