CSS3flex弹性盒子

最新推荐文章于 2024-08-10 17:13:35 发布
最新推荐文章于 2024-08-10 17:13:35 发布
阅读量180 收藏 1
点赞数 1
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51654260/article/details/111479993
版权

flex弹性盒子

一、弹性盒子是 CSS3 的一种新的布局模式。
1、CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
2、引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
3、弹性盒子与绝对定位的比较
优点： flex：flexible box 弹性盒子。可以轻松控制元素的排列，对齐和顺序。
弹性盒子没有脱离标准的文档流，绝对定位脱离了标准文档流。

<style>
/*弹性盒子子元素居中*/
        .father{
            width: 400px;
            height: 400px;
            margin: 0 auto;
            margin-top: 50px;
            border: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .son{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>

二、flex声明
1、 声明定义：
使用display：flex或display：inline-flex 声明一个容器为弹性盒子。这个容器中的子元素们，会遵循弹性布局。
【注】一般是使用display:flex. inline-flex极少用。
flex:如果没有为父元素设置宽，默认为100%；
inline-flex：如果没有设置宽，，默认为所有子元素的宽的和。
例如

<style>
       .father {
           height: 400px;
           /* width: 400px; */
           margin: 0 auto;
           margin-top: 50px;
           border: 1px solid black;
           display: flex;
       }
       
       .son {
           width: 100px;
           height: 100px;
           background-color: blue;
       }
       
       .father2 {
           height: 400px;
           margin: 0 auto;
           margin-top: 50px;
           border: 1px solid black;
           display: inline-flex;
       }
       
       .son2 {
           width: 100px;
           height: 100px;
           background-color: blue;
       }
   </style>
</head>
<body>
   <div class="father">
       <div class="son">
       </div>
       <div class="son">
       </div>
       <div class="son">
       </div>
   </div>
   <div class="father2">
       <div class="son2">
       </div>
       <div class="son2">
       </div>
       <div class="son2">
       </div>
   </div>
</body>
</html>

在这里插入图片描述
三、flex-direction
用于设置盒子中的子元素的排列方向。
row 从左到右水平排列子元素（默认值）
column 从上往下垂直排列子元素
row-reverse 从右到左排列子元素
column-reverse 从下往上垂直排列子元素

 <style>
        .father {
            width: 500px;
            height: 400px;
            margin: 0 auto;
            margin-top: 50px;
            border: 1px solid black;
            display: flex;
            /*flex-direction: row;
            flex-direction:  row-reverse;
            flex-direction: column;*/
            flex-direction:  column-reverse ;
        }    
        .son {
            width: 100px;
            height: 100px;
            background-color: blue;
            background-clip: content-box;
            padding: 0 10px;
            box-sizing: border-box;
            font-size: 30px;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="father">
        <div class="son">1
        </div>
        <div class="son">2
        </div>
        <div class="son">3
        </div>
    </div>
</body>
</html>

flex-direction: row从左到右水平排列子元素
在这里插入图片描述
flex-direction: row-reverse 从右到左排列子元素
在这里插入图片描述
flex-direction: column从上往下垂直排列子元素
在这里插入图片描述
flex-direction: column-reverse 从下往上垂直排列子元素
在这里插入图片描述
四、flex-wrap
规定flex容器是单行还是多行，是否换行
nowrap:不换行（默认值）
wrap：换行
wrap-reverse 反向换行。
flex-flow
是flex-direction与flex-wrap的组合写法。
flex-flow:flex-direction flex-wrap；
例如

<style>
       .father {
           width: 400px;
           height: 400px;
           margin: 0 auto;
           margin-top: 50px;
           border: 1px solid black;
           display: flex;
           flex-flow: column wrap-reverse;
       }        
       .son {
           width: 100px;
           height: 100px;
           background-color: blue;
           background-clip: content-box;
           padding: 0 10px;
           box-sizing: border-box;
           font-size: 30px;
           line-height: 100px;
           text-align: center;
       }
   </style>
</head>
<body>
   <div class="father">
       <div class="son">1
       </div>
       <div class="son">2
       </div>
       <div class="son">3
       </div>
       <div class="son">4
       </div>
       <div class="son">5
       </div>
   </div>
</body>
</html>

子元素从上到下排列反向换行
在这里插入图片描述
五、弹性盒子与弹性元素
弹性盒子：指的是使用display：flex或display：inline-flex声明的容器。
弹性元素：指的是弹性盒子中的子元素。
主轴与侧轴（交叉轴）
主轴方向：为子元素排列的方向。可以通过flex-direction改变。
侧轴方向：与主轴方向垂直，为子元素的换行方向。可以通过flex-wrap改变。
六、justify-content
用于控制弹性元素在主轴上的排列方式。
flex-start 元素紧靠主轴的起点（默认值）
在这里插入图片描述

flex-end 元素紧靠主轴的终点。
在这里插入图片描述

center 元素在主轴上居中。
在这里插入图片描述
space-between 第一元素紧靠起点，最后一个元素紧靠终点，余下的元素平均分配剩余空间。
在这里插入图片描述
space-around 每个元素两侧的间隔相等。元素之间的间隔比元素与容器边框的间隔要大一倍。
在这里插入图片描述
space-evenly 元素间距平均分配
在这里插入图片描述

<style>
        .father {
            width: 500px;
            height: 400px;
            margin: 0 auto;
            margin-top: 50px;
            border: 1px solid black;
            display: flex;
            flex-flow: row wrap;
            justify-content:  flex-start ;
            justify-content: flex-end ;
            justify-content:  center ;
            justify-content: space-between;
            justify-content: space-around ;
            justify-content: space-evenly;
        }        
        .son {
            width: 100px;
            height: 100px;
            background-color: blue;
            background-clip: content-box;        
            box-sizing: border-box;
            font-size: 30px;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">1
        </div>
        <div class="son">2
        </div>
        <div class="son">3
        </div>
        <div class="son">4
        </div>
    </div>
</body>
</html>

七、align-items
控制元素在侧轴上的排列方式。
多行单行都适用的属性。
flex-start 从侧轴开始的地方对齐
flex-end 从侧轴结束的地方对齐
center 中间对齐
stretch 拉伸 没有设置侧轴方向上的宽/高时，等于父盒子的宽或高。
例如

    <style>
        .father {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            margin-top: 50px;
            border: 1px solid seagreen;
            display: flex;
            flex-flow: row wrap;
            align-content: stretch;
        }        
        .son {
            width: 100px;           
            background-color: sienna;
            background-clip: content-box;
            box-sizing: border-box;
            font-size: 30px;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>  
    <div class="father">
        <div class="son">1
        </div>
        <div class="son">2
        </div>
        <div class="son">3
        </div>
    </div>
</body>
</html>

在这里插入图片描述
align-content
控制元素在侧轴上的排列方式。只适用于多行显示的弹性容器。
stretch 拉伸
flex-start 元素紧靠行的起点
flex-end 元素紧靠行的终点
center 元素在行中居中
space-between 第一个元素紧靠行的起点，最后一个元素紧靠行的终点，余下元素平均分配剩余空间
space-around 元素在侧轴方向上的间隔相等。
space-evenly 元素间距离平均分配
八、弹性元素：
不要再去设置float。
设置完绝对定位后，该元素就不再是弹性元素了，不参与弹性布局。
弹性元素均为块级元素。
align-self:
用于控制单个元素在侧轴上的排列方式。
stretch 拉伸
flex-start
flex-end
center
九、 flex-grow
用于将弹性盒子的可用空间，按照比例分配给弹性元素。

<style>
      .father {
          width: 400px;
          height: 300px;
          margin: 0 auto;
          margin-top: 50px;
          border: 1px solid seagreen;
          display: flex;
          flex-flow: row wrap;
      }      
      .son {
          width: 100px;
          height: 100px;
          background-color: sienna;
          background-clip: content-box;
          box-sizing: border-box;
          font-size: 30px;
          line-height: 100px;
          text-align: center;
          flex-grow: 1;
      }       
      .son:nth-child(2) {
          background-color: cadetblue;
          flex-grow: 2;
      }
  </style>
</head>
<body>
  <div class="father">
      <div class="son">1
      </div>
      <div class="son">2
      </div>
      <div class="son">3
      </div>
  </div>
</body>
</html>

在这里插入图片描述
九、flex-shrink
在弹性盒子装不下子元素时，对子元素缩小的比例设置。
1.计算缺少的值。
2.当前元素应该缩小比例：802/(1001+802+1001)=44.4%
3.应该缩小的值：缺少的值缩小的比例=8044.4%=35.6px
4.最终尺寸：缺少的值-应该缩小的值 80-35.6=44.4px；

  <style>
        .father{
            width: 200px;
            height: 300px;
            margin: 0 auto ;
            margin-top: 50px;
            border: 1px solid seagreen;
            display: flex;
            flex-flow: row nowrap;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: sienna;
            background-clip: content-box;
            box-sizing: border-box;
            font-size: 30px;
            line-height: 100px;
            text-align: center;
            flex-grow: 1;
        }
        .son:nth-child(2){
            width: 80px;
            background-color: cadetblue;
            flex-shrink: 2;
        }
    </style>
</head>
<body>

在这里插入图片描述
十、flex-basis
大部分情况下与宽度相等。优先级比宽要高。定义了元素在主轴上的空间。

       <style>
        .father {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            margin-top: 50px;
            border: 1px solid seagreen;
            display: flex;
            flex-flow: row nowrap;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: sienna;
            background-clip: content-box;
            box-sizing: border-box;
            font-size: 30px;
            line-height: 100px;
            text-align: center;
        }
        
        .son:nth-child(2) {
            flex-basis: 80px;
            width: 100px;
            background-color: cadetblue;
        }
    </style>
</head>

<body>
  
    <div class="father">
        <div class="son">1
        </div>
        <div class="son">2
        </div>
        <div class="son">3
        </div>
    </div>
</body>
</html>

在这里插入图片描述
复合写法：
flex：flex-grow flew-shrink flex-basis
order:
用于控制弹性元素的位置。默认为0，数值越小越靠前。

 <style>
      .father {
          width: 300px;
          height: 300px;
          margin: 0 auto;
          margin-top: 50px;
          border: 1px solid seagreen;
          display: flex;
          flex-flow: row nowrap;
      }     
      .son {
          width: 100px;
          height: 100px;
          background-color: sienna;
          background-clip: content-box;
          box-sizing: border-box;
          font-size: 30px;
          line-height: 100px;
          text-align: center;
      }
      
      .son:nth-child(2) {
          width: 100px;
          background-color: cadetblue;
          flex: 2 1 100px;
          order: -2;
      }
  </style>
</head>
<body>
  <div class="father">
      <div class="son">1
      </div>
      <div class="son">2
      </div>
      <div class="son">3
      </div>
  </div>
</body>
</html>

在这里插入图片描述

明天T
关注
弹性盒子（flex）
技术的搬运工
12-29 900
弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。
Flex弹性盒子
天空之外
06-19 203
这篇文章主要是分享了Flex弹性盒模型的基本概念, 简要介绍了Flex弹性盒模型的发展历程，最后重点介绍了Flex container六个属性以及Flex item的六个属性。下面我们就一一的往下看： 基本概念 Flex弹性盒模型是2009年W3C提出的一种新的布局方案，叫做Flex布局也叫作弹性盒子模型。它可以完整、简便、响应式的实现各种页面布局。布局的最外层元素叫做Flex容器（flex co...
CSS 学习笔记 - 弹性布局
灵台方寸山斜月三星洞
09-03 638
CSS 学习笔记 - 弹性布局参考资料 ul{ display: flex; justify-content: space-between; } li{ flex: auto; } 属性 用于 说明 justify-content 容器 分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间 flex-direction 容器 内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向) flex-wrap 容器 指定 flex 元素单行显示还是多行显
Flex布局（弹性布局）
最新发布
ORANGE_3iING的博客
08-10 5635
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式对父容器设置的属性作用属性值设置主轴的方向row 默认值从左到右row-reverse 从右到左column 从上到下column-reverse 从下到上设置主轴上的子元素排列方式> 注意:使用这个属性之前一定要确定好主轴是哪个flex-start：默认值，从头部开始，如果主轴是x轴，则从左到右flex-end：从尾部开始排列center：在主轴居中对齐(如果主轴是x轴则水平居中)space-around：平分剩余空间。
flexbox简介
weixin_34175509的博客
10-22 125
flexbox简介 什么是flexbox flexbox是一种新的布局方式，这种布局方式是2009年W3C提出的方案。它可以简便，完整，完成页面的布局。目前，它已经得到所有浏览器的支持。 但是flexbox从2009年以来，有各种版本的变化，比如2009年版本和2011年版本差别比较大。 为什么要有flexbox 每个新事物出现都有其历史使命的。flexbox也是如此，传统的布局依赖于屏幕的宽度和...
flex 布局
afakerc的博客
06-24 136
flex Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性，更多的细节将在别的文档中探索。我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由fl
css3弹性盒子模型（Flex）
m0_63760882的博客
03-21 852
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式.，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 主轴：表示水平方向 侧轴（交叉轴、副轴）：表示垂直方向 弹性盒子（项目）：表示要操作的元素 设置弹性盒子 将父元素设置成弹性盒子容器 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效 子
css3弹性盒子flex实现三栏布局的实现
01-22
弹性盒子本身就是并排的，我们设置宽度即可。 用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex...
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
详解css3 flex弹性盒自动铺满写法
11-19
CSS3（层叠样式表第三版）为Web开发带来了革命性的变革，其核心特性之一就是引入了flexbox模型，即弹性盒子布局。这一模型极大地简化了Web页面的布局方式，尤其是当需要在不同屏幕尺寸和设备上展示时。本文将详解CSS...
flex弹性盒子
weixin_43465508的博客
03-28 427
弹性盒子是一种用于按行或者按列布局的一维布局方法，元素可以膨胀以填充额外的空间，缩小以适应更小的空间。
Flex布局
01-12 236
Flex布局flex布局是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局，包括行内元素，例如： .box{ display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ displ...
flex(弹性盒子)
记录编程学习笔记
08-18 376
弹性盒子是CSS3的一种新的布局模式CsS3新增布局方式操作方便，布局简单，移动端使用广泛-PC端浏览器支持情况较差IE11及更低版本的浏览器中，不支持或部分支持在盒模型中较为灵活引入弹性盒布局模型的目的: 是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间数值越小，排列越靠前，默认为0.注意:和z-index不一样。/* 项目排序次序 order 属性属性值：数值、没有单位，默认0，数值越小，排列越靠前*/.item {
CSS3 弹性盒子(Flex Box)
热门推荐
qq_52301431的博客
04-05 1万+
25、CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒子（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 案例，实现水平垂直居中： 正在上传…重新上传取消 绝对定位与负边距实现 #container{ position:relative; } ..
Flexbox
嗯...
08-02 846
Flexbox（弹性盒子布局）是一种用于在网页中进行灵活的布局的CSS模块。它提供了一种简单而强大的方式来对网页元素进行排列、对齐和分布，适应不同屏幕大小和设备的需求。Flexbox 使用一维的布局模型，可以在水平或垂直方向上创建弹性的容器和项目。弹性容器（Flex Container）是父元素，用于包含弹性项目弹性项目（Flex Item）是子元素，放置在弹性容器内align-self 会覆盖 align-items 属性如下，start 会覆盖掉 last baseline。
flex弹性盒子模型
memedadexixaofeifei的博客
01-01 226
弹性盒子模型的基础与float浮动的区别
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值