flex布局原理

最新推荐文章于 2024-03-11 20:46:55 发布
最新推荐文章于 2024-03-11 20:46:55 发布
阅读量1.3k 收藏 4
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44868492/article/details/121199231
版权 
flex 是 flexible Box 的缩写，意为弹性布局，
用来为盒状模型提供最大的灵活性，任何一个容器都可以指定flex布局。
  • 当父盒子设置为flex布局以后，子元素的float、clear和vertical属性将失效
  • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

flex布局原理：
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

flex布局实现一个div元素水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      height: 100%;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    div {
      width: 200px;
      height: 200px;
      background: linear-gradient(skyblue 30%, deeppink 70%);
    }
   
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

效果如图：
在这里插入图片描述

1.1 常见的父项属性

  • flex-direction: 设置主轴的方向
  • justify-content: 设置主轴上的子元素排列方式
  • flex-wrap: 设置子元素是否换行
  • align-content: 设置侧轴上的子元素的排列方式（多行）
  • align-items：设置侧轴上的子元素排列方式（当行）
  • flex-flow： 符合属性，相当于同时设置了flex-direction和flex-wrap

1.2 flex-direction 设置主轴的方向

1.主轴与侧轴
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有 行和列
● 默认主轴方向就是x轴的方向，水平向右
● 默认侧轴方向就是y轴方向， 水平向下
2. 属性值
flex-direction 属性决定主轴的方向
注意：主轴和侧轴是会变化的，就看flex-direction设置哪个为主轴，剩下的就是侧轴。

属性值说明
row默认值， 从左向右排列
row-reverse从右向左排列
column从上到下排列
column-reverse从下到上排列
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      display: flex;
      width: 666px;
      height: 333px;
      background: linear-gradient(skyblue, deeppink);
      margin: 50px auto;
      /* 默认属性 */
      flex-direction: row;
    }
    .box > span {
      width: 200px;
      height: 100px;
      background: linear-gradient(orange, purple);
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="box">
    <span>one</span>
    <span>two</span>
    <span>three</span>
  </div>
</body>
</html>

在这里插入图片描述
flex-direction: column;
在这里插入图片描述

1.3 justify-content 设置主轴子元素排列 ★

justify-content 属性定义了项目在主轴上的对齐方式

注意：使用这个属性之前一定要确认好主轴是哪个

属性值说明
flex-start默认值从头部开始 如果主轴是x轴，则从左到右
flex-end从尾部开始
center在主轴居中对齐（如果主轴是x轴则水平居中）
space-around平分剩余空间
space-between先两边贴边 再平分剩余空间（重点）

justify-content: flex-start

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      display: flex;
      width: 666px;
      height: 400px;
      margin: 10px auto;
      background: linear-gradient(45deg, #fff, orange);
      /* justify-content: flex-start; */
      /* justify-content: flex-end; */
      /* justify-content: center; */
      /* justify-content: space-around; */
      justify-content: space-between;
    }
    .box > span {
      width: 150px;
      height: 100px;
      background: linear-gradient(45deg, #fff, deeppink);
    }
  </style>
</head>
<body>
  <div class="box">
    <span>aaa</span>
    <span>bbb</span>
    <span>ccc</span>
  </div>
</body>
</html>

在这里插入图片描述
justify-content: flex-end
在这里插入图片描述
justify-content: center
在这里插入图片描述
justify-content: space-between

在这里插入图片描述

justify-content: space-around
在这里插入图片描述

1.4 flex-wrap 子元素是否换行

默认情况下，项目都排在一条线（又称“轴线”）上。flex默认子元素不换行。

属性值说明
nowrap默认值，不换行
wrap换行
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      display: flex;
      width: 660px;
      height: 400px;
      background: linear-gradient(skyblue, deeppink);
      margin: 50px auto;
      justify-content: flex-start;
      /* 默认 flex-wrap: nowrap; 不换行 */
      /* flex-wrap: nowrap; */
      flex-wrap: wrap;
    }
    .box > span {
      width: 150px;
      height: 100px;
      margin: 0 5px;
      background: linear-gradient(#fff, purple)
    }
  </style>
</head>
<body>
  <div class="box">
    <span>aaa</span>
    <span>bbb</span>
    <span>ccc</span>
    <span>ddd</span>
    <span>eee</span>
    <span>fff</span>
  </div>
</body>
</html>

在这里插入图片描述

1.5 align-items 设置侧轴子元素排列

该属性是控制 子项在侧轴（默认是y轴）上的排列方式 在子项为单项的时候使用

flex-start从上到下
flex-start从上到下
flex-end从下到上
center挤在一起居中（垂直居中）
stretch拉伸（默认值）元素不设置高度
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      display: flex;
      width: 600px;
      height: 400px;
      background: pink;
      margin: 0 auto;
      justify-content: space-between;
      align-items: flex-start;
      /* align-items: flex-end; */
      /* align-items: center; */
      /* align-items: stretch; */
    }
    span {
      width: 150px;
      height: 100px;
      background: orange;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="box">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>
</html>

align-items: flex-start

在这里插入图片描述
align-items: flex-end
在这里插入图片描述
align-items: center
在这里插入图片描述
align-items: stretch
注意：没有设置高度才可以生效
在这里插入图片描述

1.6 align-content 设置侧轴上的子元素的排列方式是（多行）

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），注意：在单行下是没有效果的

属性值说明
flex-start默认在侧轴的头部开始排列
flex-end在侧轴尾部开始排列
center在侧轴中间显示
space-around子项在侧轴平分剩余空间
space-between子项在侧轴先分布在两头，再平分剩余空间
stretch设置子项元素高度平分父元素高度
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      display: flex;
      justify-content: flex-start;
      width: 600px;
      height: 450px;
      background: orange;
      margin: 20px auto;
      flex-wrap: wrap;
      align-content: flex-start;
      /* align-content: flex-end; */
      /* align-content: center; */
      /* align-content: space-around; */
      /* align-content: space-between; */
    }
    span {
      width: 150px;
      height: 100px;
      background: skyblue;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="box">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</body>
</html>

align-content: flex-start

在这里插入图片描述

align-content: flex-end

在这里插入图片描述
align-content: center

在这里插入图片描述
align-content: space-around
在这里插入图片描述
align-content: space-between

在这里插入图片描述
align-content: stretch (没有高度才生效)
在这里插入图片描述

align-content 和 align-items 区别

● align-items 适用于单行情况下、只有上对齐、下对齐、居中和拉伸
● align-content 适用于换行（多行）情况下（单行情况下失效），可以设置上对齐、下对齐、居中、拉伸、以及平均分配剩余空间等属性值。
● 总结就是单行找align-items 多行找align-content

1.7 flex-flow

flex-flow属性是flex-direction 和 flex-wrap 属性的复合属性

flex-flow: row wrap;

2 flex布局子项常见的属性

2.1 flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数。

item {
	flex: <number>;  /*default 0*/
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    section {
      display: flex;
      width: 400px;
      height: 50px;
      background: skyblue;
      margin: 20px auto;
    }
    section div:nth-child(1),
    section div:nth-child(3) {
      width: 40px;
      height: 100%;
    }
    section div:nth-child(2) {
      flex: 1;
    }
    section div:nth-child(1) {
      background: purple;
    }
    section div:nth-child(3) {
      background: orange;
    }
  </style>
</head>
<body>
  <section>
    <div></div>
    <div></div>
    <div></div>
  </section>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    li {
      list-style-type: none;
    }
    ul {
      display: flex;
      width: 400px;
      height: 50px;
      margin: 10px auto;
      background: pink;
    }
    li {
      display: flex;
      flex: 1;
      background: orange;
      flex-direction: column;
    }
    li > span {
      flex: 1;
      background: purple;
      text-align: center;
      color: #fff;
    }
    .top {
      border-bottom: 1px solid #fff;
    }
    .last>span {
      background: linear-gradient(45deg, deeppink, skyblue)
    }
  </style>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>
      <span class="top">span</span>
      <span>span</span>
    </li>
    <li class="last">
      <span class="top">span</span>
      <span>span</span>
    </li>
  </ul>
</body>
</html>

在这里插入图片描述
flex属性总结：
① flex 的分配 与主轴的方向有关，当主轴为 x 轴 那么子元素 和 父元素等高 ，水平方向上按flex值均分，当主轴为y轴则相反。

2.2 align-self 控制子项自己在侧轴上的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    div {
      display: flex;
      width: 600px;
      height: 450px;
      background: pink;
      justify-content: space-between;
    }
    div > span {
      width: 150px;
      height: 100px;
      background: purple;

    }
    div span:nth-child(2) {
      align-self: center;
    }
  </style>
</head>
<body>
  <div>
    <span></span>
    <span></span>
    <span></span>
  </div>
</body>
</html>

在这里插入图片描述

2.3 order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为0

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      display: flex;
      width: 600px;
      height: 400px;
      background: skyblue;
    }
    .box > span {
      width: 150px;
      height: 100px;
      background: orangered;
      order: 1;
    }
    .box span:nth-child(2) {
      order: 0;
    }
  </style>
</head>
<body>
  <div class="box">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>
</html>

在这里插入图片描述

编程老菜鸡
关注
flex布局原理简介
丁哒哒的博客
12-05 4606
前言： 在面试过程中，我发现，flex布局经常被问道，但是其实我只是知道它都有些什么属性及怎么用，但是都没有真正去理解他是怎么实现的，被问到的时候就会觉得不专业，所以看了资料后，简要总结。 一、是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，是W3C 提出的一种新型布局方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 顾名...
flex布局
她还会来吗的博客
04-07 183
flex布局 传统布局与flex布局 传统布局: 兼容性好 布局繁琐 局限性,不能在移动端很好的布局 flex弹性布局: 操作方便，布局极为简单,移动端应用广泛 PC端浏览器支持情况较差 IE11或更低版本,不支持或仅部分支持 flex布局原理 当我们为父盒子设为flex布局以后,子元素的float，clear和vertical-align属性将失效。 总结:就是通过父盒子tianjiaflex属性,来控制子盒子的位置和排列方式 常见属性 常见父属性 flex-direction:设置主轴的方向
Programming Flex2 - 五.Flex框架的基本原理
hbb的专栏
09-16 2323
了解Flex程序的生命周期Flex程序从本质上讲，就是使用了（由AS编写的）Flex框架的Flash程序。但在Flex程序中可以忽略timeline这个概念，所有的内容都集于一帧。事实上Flex程序中的根，是继承flash.display.MovieClip的mx.managers.SystemManager。SystemManager有两帧。第一帧是预加载程序，第二帧是主程序。因此，所有程序在真
flex布局以及原理
黄大仙
08-20 2870
一. flex介绍 flex是 flexible Box的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局 当我们为父盒子设为flex布局以后,子元素的loat、 clear和 vertical-align-属性将失效. 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 采用Flex布局的元素,称为lex容器( flex container),简称容器”。它的所有子元素自动成为容器成员,称为Flex项目( flex item) 总结fex布局原理: 就是通过给
flex布局原理简述
最新发布
2301_80174941的博客
03-11 419
简要介绍了flex布局的原理
基本布局_flex基本布局模板_flex_
09-30
在前端开发中，Flex布局（Flexible Box）是一种强大的盒模型布局方式，允许开发者轻松地创建响应式和动态的用户界面。...这个基础布局模板是一个很好的起点，可以帮助开发者快速上手并深入理解Flex布局的工作原理。
详解flex实现左右布局中按钮溢出隐藏效果
09-22
总之，理解Flex布局的工作原理以及如何利用CSS属性控制元素的溢出是非常重要的。在实际开发中，我们需要灵活运用这些技巧来创建响应式和可维护的网页布局。希望这篇文章能帮助你更好地理解和应用Flex布局，解决实际...
flex布局（弹性布局）
weixin_52984349的博客
07-31 598
flex布局（弹性布局）
Flex 布局 + 原理
程序员小翟
11-08 1801
Flex 布局原理 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。 主轴与侧轴 在flex布局中，是分主轴和侧轴两个方向的。同样的叫法有：行和列、X轴和Y轴。 默认主轴方向是X轴方向，水平向右。 默认侧轴方向是Y轴方向，水平向下。 div { display: flex; width: 80%; height: 300px; background-color: pin...
Flex框架的基本原理.docx
02-28
Flex框架的基本原理.docx Flex框架的基本原理.docx
flex原理
netliving的专栏
04-09 275
一直以来都以为flex是一个神秘的开发，随着近期项目要求，打算研究一下flex的开发，经过一天的查询资料，了解了他的底层的一下原理 首先坚持最终的产物，也就是可以在ie中运行的程序只有flash，所以我们需要编写这样的flash，所以我们采用了一种编程的方式，flex，其中他包含mxml，和actionscript，他们可以混合编程，就像jsp和java代码一样(感谢awFeeling...
flex 布局
weixin_66478060的博客
11-19 563
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值是auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。flex-wrap属性定义，flex布局中默认是不换行的。注：设置子项在侧轴上的排列方式只能用于子项出现换行的情况（多行），在单行下是没有效果的。总结flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。默认值，从头部开始，如果x轴是主轴，则从左到右。注意：子元素是跟着主轴来排列的。
Flash Player简单构成
sysu_2010的专栏
07-08 1534
Flash Player包含4个主要部分：1. 媒体播放器媒体播放器负责渲染和绘画矢量图形、生成文本并处理文本布局、播放和处理音频和视频。2. 虚拟机ActionScript生成的二进制SWF代码，通过虚拟机执行，并置入Flash的显示列表（Display List，我们将在第5
flex布局原理以及各属性详解
卷尾巴
04-13 1247
1 布局原理 1.1flex是flexibleBox的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局 *当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效 *伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 ...
flex布局原理-看完就会
weixin_46055718的博客
12-02 393
flex布局原理 flex是flexible Box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局。（在flex下众生平等） 在使用flex布局之后，子元素的float（浮动），clear（清除浮动）和vertical-align属性将失效 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 采用flex布局的元素，称为flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为flex项目（flex item）简
CSS- flex布局原理及其案例
zzxhahaha的博客
01-15 383
提示：简单的学习掌握FLEX布局** 文章目录前言一、flex设置主轴方向1：说明：2：代码3:实例展示二、主轴排序方式1：说明2.代码3. 实例展示三，换行1：说明2:代码3:实例展示四, 侧轴排序方式1:说明2：代码3:结果五：份数1：说明2：代码3 案例展示 前言 Flex布局原理就是： 给父盒子添加flex属性， 来控制子盒子的位置排 列方式从而实现flex布局 当我们为父盒子设为 flex 布局以后， 子元素的 float、 clear 和 vertical-align 属性将失效。
Flex样式工作原理
TERRY的技术日志
09-22 2751
播放头前进到第二桢，docFrameHandler 函数开始执行。首先会执行很多Singleton.registerClass方法，然后执行有[Mixin]元标签的类的public static function init(fbs:IFlexModuleFactory):void 方法 Flex编译器编译时会生成很多 有[Mixin]元标签的类 其中大部分类都与样式有关，象下面这些 
深入理解Flex布局：原理与实战应用
"Flex布局是现代网页和应用设计中常用的一种布局模式，它允许开发者更加灵活地控制元素的排列、对齐和大小调整。通过使用Flex布局，可以更...这份笔记提供了全面的介绍，对于学习和复习Flex布局原理及用法非常有帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值