Flex 布局

最新推荐文章于 2024-07-21 21:06:06 发布
最新推荐文章于 2024-07-21 21:06:06 发布
阅读量582 收藏 11
点赞数 5
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49002903/article/details/116172954
版权

文章目录

flex布局

1.flex布局原理

flex布局是 flexible Box 的缩写，意为：”弹性布局“，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex 布局。

  • 当我们为盒子设为flex 布局以后，子元素的 float、 clear 和 vertical-align 属性将失效。
  • 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局。

采用 flex 布局的元素，称为 flex 容器（flex container），简称 “容器” 。它的所有子元素自动成容器成员，称为 flex 项目（flex item），简称 “项目”。

总结：

就是通过给父级盒子添加 flex属性，来控制盒子的位置和排列方式。

2.常见父项属性

flex-direction设置主轴的方向（默认为x轴）
justify-content设置主轴上的子元素排列方式
flex-warp设置子元素是否换行
align-content设置侧轴上的子元素排列方式（多行）
align-items设置侧轴上的子元素排列方式（单行）
flex-flow复合属性，相当于同时设置了flex-direction和flex-warp

（1）flex-direction 设置主轴的方向

注意：将X轴或Y轴设置为主轴后，另一个轴将默认为侧轴。

属性值：

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>flex_direction</title>
  <style>
    .container {
      display: flex;
      width: 600px;
      height: 400px;
      background-color: pink;
      justify-content: center;
      /* flex-direction设置主轴的方向 默认为x轴 
        * row ：默认值 X轴
        * row-reverse: 从右到左
        * column：从上到下 （Y轴）
        * column-reverse：从下到上
      */
      flex-direction: column;
    }

    .container span {
      width: 150px;
      height: 150px;
      background-color: purple;
      margin: 10px;
    }
  </style>
</head>

<body>
  <div class="container">
    <span>1</span><span>2</span><span>3</span>
  </div>
</body>

</html>

本例展示了将容器的主轴设置为 Y轴。效果图如下所示：

image-20210426160310670

（2）justify-content属性 —— 设置主轴上子元素的排列方式

属性值：

flex-start默认值 从头部开始 如果主轴是X轴，则从左到右
flex-end从尾部开始排列
center在主轴居中对齐（如果主轴是X轴则水平居中）
space-around平分剩余空间
space-between先两边贴边，再平分剩余空间（重点）
<!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>justify-content属性</title>
  <style>
    .container {
      display: flex;
      width: 600px;
      height: 400px;
      background-color: pink;
      /* 
        justify-content 设置主轴上子元素的排列方式
          * flex-start：默认值 从头部开始
          * flex-end：从尾部开始
          * center：在主轴居中对齐（如果主轴是X轴则水平居中）
          * space-around：平分剩余空间
          * space-between：先两边贴边，再平分剩余空间
       */
      justify-content: space-between;
    }

    .container span {
      width: 150px;
      height: 150px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <div class="container">
    <span>1</span><span>2</span><span>3</span>
  </div>
</body>

</html>

上述代码示例展示的是：space-between属性值的效果，如下图所示：

image-20210426162125600

（3）flex-wrap —— 设置子元素是否换行

属性值：

nowrap默认值 不换行
wrap换行

如下示例代码所示：

<title>flex-warp属性</title>
  <style>
    .container {
      display: flex;
      width: 600px;
      height: 400px;
      background-color: pink;
      /* 
        flex-wrap 设置子元素是否换行
          * nowrap：默认值 不换行
          * wrap：换行
       */
      flex-wrap: wrap;
    }

    .container span {
      width: 150px;
      height: 150px;
      background-color: purple;
      margin: 5px;
    }
  </style>
</head>

<body>
  <div class="container">
    <span>1</span><span>2</span><span>3</span>
    <span>4</span><span>5</span><span>6</span>
  </div>
</body>

如下图所示：第一张为换行效果，第二张为不换行效果。

image-20210426172956410
image-20210426173107343

（4）align-items 设置侧轴上的子元素排列方式（单行）

属性值：

flex-start默认值 从上到下
flex-end从下到上
center挤在一起居中（垂直居中）
stretch拉伸
<title>align-items属性</title>
  <style>
    .container {
      display: flex;
      width: 600px;
      height: 400px;
      background-color: pink;
      /* 
        align-items 设置侧轴上子元素排列方式（单行内容时）
          * flex-start：默认值 从上到下
          * flex-end：从下到上
          * center：挤在一起居中（垂直居中）
          * stretch：拉伸
       */
      align-items: center;
    }

    .container span {
      width: 150px;
      height: 150px;
      background-color: purple;
      margin: 5px;
    }
  </style>
</head>

<body>
  <div class="container">
    <span>1</span><span>2</span><span>3</span>
  </div>
</body>

如下图展示了align-items 为center时的效果。

image-20210426174901229

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

属性值：

flex-start默认值 在侧轴的头部开始排列
flex-end在侧轴的尾部开始排列
center在侧轴中间显示
space-around子项在侧轴平分剩余空间
space-between子项在侧轴先分布在两头，在平分剩余空间
stretch设置子项元素高度平分父元素高度

注意：此属性只在多行情况下生效，或者就是添加了flex-wrap属性为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>align-content属性</title>
  <style>
    .container {
      display: flex;
      width: 600px;
      height: 400px;
      background-color: pink;
      /* 
        align-content 设置侧轴上子元素排列方式（多行）
          * flex-start：默认值 在侧轴的头部开始排列 
          * flex-end：在侧轴的尾部开始排列
          * center：在侧轴中间显示
          * space-around：子项在侧轴平分剩余空间
          * space-between：子项在侧轴先分布在两头，再平分剩余空间
          * stretch：设置子项元素高度平分父元素高度
       */
      flex-wrap: wrap;
      align-content: space-around
    }

    .container span {
      width: 150px;
      height: 150px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <div class="container">
    <span>1</span><span>2</span><span>3</span>
    <span>4</span><span>5</span><span>6</span>
  </div>
</body>

</html>

如下图所示展示了align-content属性值为：space-around 时的效果：

image-20210426193328072

（6）flex-flow 属性

flex-flow 属性是flex-direction 和 flex-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>flex-flow属性</title>
  <style>
    .container {
      display: flex;
      width: 600px;
      height: 400px;
      background-color: pink;
      /* 
          flex-flow属性 等同于 同时使用 flex-direction属性和 flex-wrap属性
       */
      flex-flow: wrap column;
    }

    .container span {
      width: 150px;
      height: 150px;
      background-color: purple;
      margin: 5px;
    }
  </style>
</head>

<body>
  <div class="container">
    <span>1</span><span>2</span><span>3</span>
    <span>4</span><span>5</span><span>6</span>
  </div>
</body>

</html>

效果图如下所示：

image-20210426194035314

3.常见的子项属性

  • flex 子项目占的份数
  • align-self 控制子项自己在侧抽的排列方式
  • order 属性定义子项的排列顺序（前后顺序）

（1）flex 子项目占的份数

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

示例代码如下：

<!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>lex子项flex份数</title>
  <style>
    .container {
      display: flex;
      width: 600px;
      height: 150px;
      margin: 0 auto;
      background-color: pink;
    }

    /* 
      将父元素的宽度分为6份
      第一个div占3份，第二个占1份，第三个占2份
    */
    .container div:nth-child(1) {
      height: 150px;
      width: 100px;
      background-color: purple;
      flex: 3;
    }

    .container div:nth-child(2) {
      background-color: orange;
      flex: 1;
    }

    .container div:nth-child(3) {
      height: 150px;
      width: 100px;
      background-color: greenyellow;
      flex: 2;
    }
  </style>
</head>

<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

</html>

效果图如下所示：

image-20210426201014538

（2）algin-self 属性 控制子项自己在侧轴上的排列方式

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

auto设置为父元素的 align-items值，如果该元素没有父元素的话，就设置为 stretch
flex-start在自己的侧轴上 头部对齐
flex-end在自己的侧轴上 尾部对齐
centerflex 元素会对齐到 侧轴的中间，如果该元素的宽大于容器将在两个方向均等溢出
baseline所有的 flex 元素会沿着基线对齐
stretchflex 元素将会基于容器的宽和高进行拉伸
<!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>align-self属性</title>
  <style>
    .container {
      display: flex;
      width: 600px;
      height: 400px;
      background-color: pink;
      align-items: flex-start;
    }

    .container span {
      width: 150px;
      height: 150px;
      background-color: purple;
    }

    /* 
        align-self 控制子项自己在侧轴上的排列方式
          * auto: 跟随父级的 algin-items属性的样式，如果该元素没有父元素的话，就设置为 stretch
          * flex-start：默认值 从头部开始
          * flex-end：从尾部开始
          * center：在侧轴居中对齐（
          * baseline：基线对齐
          * stretch：拉伸
       */
    .container span:nth-child(3) {
      align-self: flex-end;
    }
  </style>
</head>

<body>
  <div class="container">
    <span>1</span><span>2</span><span>3</span>
  </div>
</body>

</html>

image-20210426210053653

（3） order 属性定义项目的排列顺序

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

注意：该属性和 z-index不一样

<!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>子项目order属性</title>
  <style>
    .container {
      display: flex;
      width: 600px;
      height: 400px;
      background-color: pink;
    }

    .container span {
      width: 150px;
      height: 150px;
      background-color: purple;
      margin: 10px;
    }

    .container span:nth-child(2) {
      /* order属性：
        默认值为0 ，数值越小，元素余额靠前
      */
      order: -1;
    }
  </style>
</head>

<body>
  <div class="container">
    <span>1</span><span>2</span><span>3</span>
  </div>
</body>

</html>

image-20210426205436486

不苒
关注
  • 5
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Flex 布局教程
01-02
Flex布局，也称为Flexbox，是一种CSS布局方案，它的特点是可以创建灵活的响应式布局，简化了垂直居中等传统布局问题的解决方案。Flex布局的主要目标是提供一种更加有效的方式来布置、对齐和分配容器中项目之间的空间...
CSS常用布局二（flex布局）
BreenCL的博客
07-20 3815
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 3万+
Flex是的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局.box{行内元素也可以使用flex布局.box{Webkit内核的浏览器，需要加上-webkit前缀。.box{
flex弹性布局(详解)
最新发布
msq6678的博客
07-21 1673
Flex弹性盒布局前言布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009 年，W3C 提出了一种新的方案—— Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。一、什么是Flex弹性布局？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的。
Flex布局 （上万字）超详细讲解 这篇就够了
制定持续可量化的目标，不断坚持。
02-12 3万+
Flex布局，全称为“Flexible Box Layout”，意为“弹性盒布局”。它是一种现代的CSS布局模式，旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化。灵活性：Flex布局允许项目在容器中灵活地扩展和收缩，以填充可用空间或调整大小以适应内容。对齐方式：Flex布局提供了各种对齐选项，可以轻松地实现水平和垂直对齐。方向控制：可以方便地改变主轴的方向，使项目在水平或垂直方向上排列。空间分配。
flex布局看这一篇就够了
qq_46048008的博客
08-20 2万+
“弹性盒布局”，旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化声明定义容器里面包含着项目元素，使用或声明为弹性容器。
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 13万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
Flex布局教程
09-28
Flex布局，全称Flexible Box Layout，又称为弹性盒布局，是CSS3提供的一种新的布局模型。在传统CSS布局中，页面布局往往依赖于盒模型、display属性、position属性和float属性的组合使用，这些方式在实现复杂的布局...
flex布局实例DOM
01-15
Flex布局，全称为“Flexible Box”，也称作弹性盒布局，是CSS3中的一种布局模式，旨在提供一种更加高效、灵活的方式来对网页或应用程序中的容器内的子元素进行排列、对齐和分配空间。这种布局模式在响应式设计、...
Flex布局让子项保持自身高度的实现
01-19
在用了Flex布局会发现，当水平排列后，会发现所有子项的高度都变成一样的了。   这是因为Flex 布局会默认： 把所有子项变成水平排列。 默认不自动换行。 让子项与其内容等宽，并把所有子项的高度变为最高子项的...
flex布局实现上下固定中间滑动的布局方式
11-20
【标题】：“flex布局实现上下固定中间滑动的布局方式” 【内容详解】 在现代网页设计中，使用Flex布局能够方便地实现各种复杂的界面布局，其中包括一种常见的需求：上下固定，中间可滑动的布局。这种布局适用于...
flex布局分享.pptx
11-06
Flex布局是一种现代网页和应用程序设计中的布局模式，它允许开发者更灵活地控制元素在容器内的排列方式，解决了传统布局方式（如盒模型）在处理复杂布局时的诸多不便。Flex布局于2009年由W3C提出，现在已经得到了...
详解CSS3伸缩布局盒模型Flex布局
09-22
Flex布局，全称为Flexible Box布局，是CSS3中引入的一种全新的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和动态内容时。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布局
YMYYZ的博客
01-31 8750
flex布局的详细解读
Flex布局全面介绍
qq_59305028的博客
07-17 8338
Flex基本介绍
flex弹性布局（详解）
wshwsh_的博客
08-09 1万+
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
Flex布局完全指南：从入门到精通
"Flex布局教程" Flex布局是一种现代的、响应式的网页布局方式，由W3C在2009年提出，旨在简化复杂的传统布局模式，如基于盒模型的display属性、position属性和float属性的组合。随着浏览器对Flex布局的广泛支持，它...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不苒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值