flex布局原理

于 2021-11-13 00:04:59 发布
阅读量1.2k 收藏 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>

在这里插入图片描述

编程老菜鸡
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flex布局原理简介
丁哒哒的博客
12-05 4537
前言： 在面试过程中，我发现，flex布局经常被问道，但是其实我只是知道它都有些什么属性及怎么用，但是都没有真正去理解他是怎么实现的，被问到的时候就会觉得不专业，所以看了资料后，简要总结。 一、是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，是W3C 提出的一种新型布局方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 顾名...
【移动端网页布局】flex 弹性布局 ② ( flex 弹性布局原理 | flex 容器属性 | 主轴与侧轴 | 设置主轴方向 flex-direction 样式 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
05-05 2908
一、flex 弹性布局原理 二、flex 容器 ( Flex Container ) 属性 三、设置主轴方向 flex-direction 样式 1、主轴与侧轴 2、设置主轴方向 flex-direction 3、代码示例 - 默认主轴方向: 从左到右 4、代码示例 - 修改主轴方向 : 从右到左 5、代码示例 - 修改主轴方向 : 从上到下 6、代码示例 - 修改主轴方向 : 从下到上
flexbox 弹性盒布局和布局原理
言川的博客
05-03 2万+
flexbox 弹性盒布局和布局原理 最近开始做H5，发现flexbox用的超级广泛，找到了这么一篇文章，https://css-tricks.com/snippets/css/a-guide-to-flexbox/,认为讲的还不错，加上自己的一些测试和理解，就有了这一篇笔记。 新版的flexbox规范分两部分：一部分是container，一部分是 items。 flexbox是一整
flex 原理及使用
qq_37550440的博客
06-24 390
flex-wrap: wrap 换行 <div class="test"> <div> <button v-for="item in 10">{{item}}内容</button> </div> </div> .test div { width: 500px; background-color: white; display: flex; .
Programming Flex2 - 五.Flex框架的基本原理
hbb的专栏
09-16 2303
了解Flex程序的生命周期Flex程序从本质上讲，就是使用了（由AS编写的）Flex框架的Flash程序。但在Flex程序中可以忽略timeline这个概念，所有的内容都集于一帧。事实上Flex程序中的根，是继承flash.display.MovieClip的mx.managers.SystemManager。SystemManager有两帧。第一帧是预加载程序，第二帧是主程序。因此，所有程序在真
详解flex实现左右布局中按钮溢出隐藏效果
09-22
总之，理解Flex布局的工作原理以及如何利用CSS属性控制元素的溢出是非常重要的。在实际开发中，我们需要灵活运用这些技巧来创建响应式和可维护的网页布局。希望这篇文章能帮助你更好地理解和应用Flex布局，解决实际...
从0到1，带你尝鲜flex布局
01-08
文章目录1.flex布局体验1.1传统布局与flex布局2.flex布局原理2.1布局原理总结Flex布局原理3.flex布局父项常见属性3.1 常见父项属性3.2 flex-direction设置主轴方向3.3.justify-content 设置主轴上的子元素排列方式...
深入浅析CSS3中的Flex布局整理
11-21
Flex 布局背后的主要思想是让容器能够改变其项目的宽度 / 高度(和顺序) ，以最佳地填充可用空间(主要是适应各种显示设备和屏幕大小)。 Flex 容器扩展项以填充可用的空闲空间或缩小它们以防止溢出。 最重要的是，...
详解flex多列布局遇到的问题和解决方案
09-22
`的工作原理，并巧妙地利用占位元素来平衡最后一行的元素分布。通过预估可能的列数并相应地添加占位元素，或者使用伪元素，我们可以有效地解决这个问题。这种方法对于动态内容加载或者响应式设计尤为适用，因为它...
flex.md flex属性详解文档
04-14
flex原理和全属性详解flex 是 flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
flex布局换行后均匀分布
热门推荐
donggua_123的博客
09-12 4万+
今天做一个需求的时候发现一个问题，原型需要做出这样的布局效果 首先想到的肯定是flex布局 display: flex; justify-content: space-between; flex-wrap: wrap; 嗯，确实达到了效果，完美！！ 但是当数据不是4的倍数的时候，就出现问题了 可以看到最后一排依然遵循均匀铺开在父级宽度里面，但这显然不是我们想要的效果 如果...
flex布局
weixin_44445363的博客
08-20 147
flex布局 1、布局原理 flex是flexible Box的缩写，意为“弹性布局”。任何一个容器都可以指定为flex布局。 采用flex布局的元素，称为flex容器（flex container），简称容器。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”。 总结flex布局原理： 就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。 2、flex布局父项常见属性 以下6个属性是对父元素设置的： 1、flex-direction : 设置主轴的方向 2、
Flash Player简单构成
sysu_2010的专栏
07-08 1507
Flash Player包含4个主要部分：1. 媒体播放器媒体播放器负责渲染和绘画矢量图形、生成文本并处理文本布局、播放和处理音频和视频。2. 虚拟机ActionScript生成的二进制SWF代码，通过虚拟机执行，并置入Flash的显示列表（Display List，我们将在第5
Flex弹性布局详解
技术无止境，人生仍探索。
05-03 1729
Flex弹性布局 说明：重点是分清楚主轴方向、侧轴方向的设置，作用在父元素和作用在子元素上的属性。 (1)控制方向 flex-direction控制主轴方向，取值有row(默认) |row-reverse | column | column-reverse(垂直方向翻转) align-items控制侧轴方向，取值有strenth(默认) | flex-start(顶部对齐) |flex-end(底...
flex原理
netliving的专栏
04-09 256
一直以来都以为flex是一个神秘的开发，随着近期项目要求，打算研究一下flex的开发，经过一天的查询资料，了解了他的底层的一下原理 首先坚持最终的产物，也就是可以在ie中运行的程序只有flash，所以我们需要编写这样的flash，所以我们采用了一种编程的方式，flex，其中他包含mxml，和actionscript，他们可以混合编程，就像jsp和java代码一样(感谢awFeeling...
圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例
wangchengiii的博客
09-10 4万+
题目要求：针对如下DOM结构，编写CSS，实现三栏水平布局，其中left、right分别位于左右两侧，left宽度为200px，right宽度为300px，main处在中间，宽度自适应。 要求：允许增加额外的DOM节点，但不能修改现有节点顺序。 <div class="container"> 　　<div class="main">main</div> 　　<div class="
Flex布局
kevin的博客
01-19 434
flex弹性布局 开发工具与关键技术：DW、Flex弹性布局 作者：黄桂康 撰写时间：2019.01.16 （一个网页的第一重点就是它的外观，好不好看取决于程序员的布局。） 这一技术是HTML布局中的一种—————flex弹性布局 元素分很多种：行内元素、块级元素………… l 行内元素:就像是在一区域内它们横着并排显示。 l 块级元素：在一区域内竖排着。 给它们宽、高、背景颜...
Flex 弹性盒子布局使用教程
冰川的博客
01-02 1万+
传统的网页布局（layout）解决方案，是基于盒模型，依赖display+float+position属性，这对于那些特殊的布局非常的不方便，比如垂直居中就不易于实现。 2009年，W3C提出了一种新的方案----Flex布局，旨在提供一个更加有效的布局方式，更好的控制项目的对齐和自由分配容器空间，即使它们的大小是未知的或动态的。
滴滴flex布局面试题
最新发布
12-13
滴滴flex布局面试题主要考察...总的来说，掌握flex布局的原理和属性，并能熟练运用flex布局来实现页面布局是滴滴flex布局面试题所关注的主要内容。希望应聘者可以通过对flex布局的深入理解和实际运用来展示自己的能力。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值