Flex布局

已于 2022-10-04 20:53:43 修改
阅读量378 收藏
点赞数
文章标签： css css3 前端
于 2022-10-04 19:19:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56778759/article/details/127162410
版权

Flex布局

一、Flex布局介绍

1. 什么是flex布局

弹性盒子（flex）是一种用于按行或按列布局元素的一维布局方法，元素可以膨胀以填充额外的空间，收缩以适应更小的空间，适用于任何元素上，如果一个元素使用了flex弹性布局（以下都会简称为：flex布局），则会在内部形成BFC，flex布局已经得到了所有浏览器的支持，这意味着，现在就能放心，安全的使用这项技术。

在这里插入图片描述

二、Flex属性

1. 主轴与侧轴

采用flex布局的元素，称为”容器“ （ flex container），它的所有子元素都是容器的”项目“（flex item），容器默认存在两根轴：水平的主轴（main axis）和垂直的侧轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。

2. 容器属性

在这里插入图片描述

flex-direction：属性决定主轴的方向（即项目的排列方向）

row（默认值）：主轴为水平方向，起点位置在左端

row-reverse：主轴为水平方向，起点在右端

column：主轴为垂直方向，起点在上沿

column-reverse：主轴为垂直方向，起点在下沿

flex-wrap：项目排在一条线上，无论是否给定宽度，都是不会主动换行的。

nowrap（默认值）：不换行

wrap：换行，第一行上方

wrap-reverse：换行第一行在下方

flex-flow：是flex-direction和flex-wrap的简写，默认值row nowrap。

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

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-around：每个项目两侧的间隔相等

space-between：两端对齐，项目之间的间隔都相等

space-evenly：每个项目的间隔与项目和容器之间的间隔相等

align-items：定义项目在侧轴上如何对齐。

flex-start：交叉轴的起点对齐

flex-end：交叉轴的终点对齐

center：交叉轴的中点对齐

baseline：项目的第一行文字的基线对齐

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

align-content：定义了多根轴线的对齐方式，前提是需要设置flex-wrap，否则不会。

flex-start：与侧轴的起点对齐

flex-end：与侧轴的终点对齐

center：与侧轴的中点对齐

space-between：与侧轴两端对齐，轴线之间的间隔平均分布

space-around：每根轴线两侧的间隔都相等

stretch（默认值）：轴线占满整个侧轴
3. 项目属性

在这里插入图片描述

order：定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以是负数。

flex-grow：容器中剩余空间的多少应该分配给项目，也称为扩展规则。最终的项目的宽度为：自身宽度 + 容器剩余空间分配宽度，flex-grow最大值是1，超过1按照1来扩展。

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

flex-basis：指定了子项在容器主轴方向上的初始大小，优先级高于自身的宽度width。

flex：flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。
flex: 1 ==> flex: 1 1 0%

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

三、Flex练习

1. 水平垂直居中

方式一：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>水平垂直居中</title>
    <style>
      .container {
        display: flex;
        width: 400px;
        height: 400px;
        background-color: aqua;
        justify-content: center;
        align-items: center;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

方式二：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>水平垂直居中</title>
    <style>
      .container {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: aqua;
      }
      .box {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
        /* transform: translate(-50%, -50%); */
        width: 100px;
        height: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>
2. 左固右适布局
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>左固右适</title>
    <style>
      .container {
        display: flex;
        width: 900px;
        height: 400px;
        background-color: aqua;
      }
      .box1 {
        width: 200px;
        height: 100%;
        background-color: blue;
      }
      .box2 {
        flex: 1;
        height: 100%;
        background-color: blueviolet;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>
3. 导航栏布局
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>导航栏布局</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
      }
      .box {
        flex: 20%;
      }
      .box a {
        display: flex;
        text-decoration: none;
        flex-direction: column;
        align-items: center;
      }
      .box img {
        width: 64px;
        height: 50px;
      }
      .box span {
        color: #666666;
        text-align: center;
        font-size: 13px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">
        <a href="javascript:;">
          <img src="./images/1.jpg" alt="" />
          <span>天猫新品1</span>
        </a>
      </div>
      <div class="box">
        <a href="javascript:;">
          <img src="./images/2.jpg" alt="" />
          <span>天猫新品2</span>
        </a>
      </div>
      <div class="box">
        <a href="javascript:;">
          <img src="./images/3.jpg" alt="" />
          <span>天猫新品3</span>
        </a>
      </div>
      <div class="box">
        <a href="javascript:;">
          <img src="./images/4.jpg" alt="" />
          <span>天猫新品4</span>
        </a>
      </div>
      <div class="box">
        <a href="javascript:;">
          <img src="./images/5.jpg" alt="" />
          <span>天猫新品5</span>
        </a>
      </div>
      <div class="box">
        <a href="javascript:;">
          <img src="./images/6.jpg" alt="" />
          <span>天猫新品6</span>
        </a>
      </div>
      <div class="box">
        <a href="javascript:;">
          <img src="./images/7.png" alt="" />
          <span>天猫新品7</span>
        </a>
      </div>
      <div class="box">
        <a href="javascript:;">
          <img src="./images/8.jpg" alt="" />
          <span>天猫新品8</span>
        </a>
      </div>
      <div class="box">
        <a href="javascript:;">
          <img src="./images/9.jpg" alt="" />
          <span>天猫新品9</span>
        </a>
      </div>
      <div class="box">
        <a href="javascript:;">
          <img src="./images/10.png" alt="" />
          <span>天猫新品10</span>
        </a>
      </div>
    </div>
  </body>
</html>

四、Flex扩展

1. flex小青蛙游戏
KWANTED
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS常用布局二（flex布局）
BreenCL的博客
07-20 2753
flex布局 前言：flex是flexible box的缩写，译为“弹性布局”，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局，只需要设置“display:flex"即可；行内元素可以通过设置”display:inline-flex“实现；需要注意的是，如果设置了flex布局，则子元素的float、clear和vertical-align属性将失效； 1.基本概念 使用了flex布局的元素，称为flex容器（flex container），简称为”容器“。它所有的子元素自动生成容器成员，
flex布局（详解）
fish_zhangyu的博客
10-13 9042
Flex是的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局.box{行内元素也可以使用flex布局.box{Webkit内核的浏览器，需要加上-webkit前缀。.box{
学习CSS Flexbox 玩flexboxfroggy flexboxfroggy1-24关详解
Jay17的博客
04-07 1130
学习CSS Flexbox 玩flexboxfroggy flexboxfroggy1-24关详解
flex布局
YMYYZ的博客
01-31 8572
flex布局的详细解读
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 9万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
Flex布局 （上万字）超详细讲解 这篇就够了
程序员碎像的博客
02-12 7083
Flex布局，全称为“Flexible Box Layout”，意为“弹性盒布局”。它是一种现代的CSS布局模式，旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化。灵活性：Flex布局允许项目在容器中灵活地扩展和收缩，以填充可用空间或调整大小以适应内容。对齐方式：Flex布局提供了各种对齐选项，可以轻松地实现水平和垂直对齐。方向控制：可以方便地改变主轴的方向，使项目在水平或垂直方向上排列。空间分配。
Flex 布局教程
01-02
Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。... 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
详解CSS中的flex布局
01-19
flex布局又称为弹性布局，任何一个容器都可以指定为flex布局 声明弹性盒子的几种方式 就像前面说的，所有容器都可以指定为flex布局 .box{ display:flex;} 行内元素也可以使用： display:inline-flex; 改变弹性...
flex布局实现上下固定中间滑动的布局方式
11-20
本文主要介绍了flex布局实现上下固定中间滑动的布局方式，分享给大家，具体如下: 例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。 简单介绍一下如何实现 固定头部和尾部，中间部分可滑动...
Flex布局基础知识
01-08
Flex布局 今天在学习css的时候，学到了一个新的布局方式:Flex布局（弹性盒布局）。本人认为挺重要的，首写博客来巩固一下自己今天所学的有关Flex布局的知识，并与大家分享，内容如有错误，欢迎大家来给我指点一下。 ...
携程网站 移动端 Flex布局
06-08
携程网站 移动端 Flex布局，新人可以利用此资源来学习flex布局的应用 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 ...
Flex布局教程
09-28
阮一峰的Flex布局教程，包括语法篇和实例篇，转成PDF格式，方便大家阅读。
flex布局简单总结
01-08
一、flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 注意 任何一个容器都可以指定为 flex 布局（行内元素也可以使用 flex 布局） Webkit 内核的浏览器，必须...
Flex布局.xmind
07-09
Flex布局.xmind
flex弹性布局（详解）
wshwsh_的博客
08-09 8928
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
前端布局 Flex（弹性）布局
qq_63512287的博客
10-15 1万+
前端布局中的Flex布局
flex布局看这一篇就够了
qq_46048008的博客
08-20 1万+
“弹性盒布局”，旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化声明定义容器里面包含着项目元素，使用或声明为弹性容器。
主流布局 flex布局
最新发布
04-25
Flex布局（也称为弹性布局）是种主流的CSS布局方式，它可以方便地实现页面元素的自适应和排列。Flex布局通过定义容器和子元素的属性来实现灵活的布局效果。 在Flex布局中，有两个重要的概念：容器和子元素。容器是...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值