CSS3弹性盒子常用使用方法详解

最新推荐文章于 2024-04-16 19:33:42 发布
最新推荐文章于 2024-04-16 19:33:42 发布
阅读量1.7k 收藏 9
点赞数 3
分类专栏： HTML5+CSS3 文章标签： css3 html flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzh1251994430/article/details/109188141
版权

CSS3中的弹性盒子

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现；2009年，W3C提出了一种新的方案—Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

弹性盒子是 CSS3 的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

组成内容

弹性盒子由弹性容器和弹性子元素组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

使用

1.基本用法

<style>
    /*body {
        direction: rtl;/*设置 direction 属性为 rtl (right-to-left),
               弹性子元素的排列方式也会改变 ，整体从右到左
    }*/    
    .flex-container{
        display: flex;
        width: 450px;
        height: 150px;
        background-color: darkcyan;
    }
    .flex-item{
        width: 130px;
        height: 125px;
        margin: 10px;
        background-color: yellowgreen;
    }  
</style>
<body>
    <div class="flex-container">
        <div class="flex-item one">盒子1</div>
        <div class="flex-item tow">盒子2</div>
        <div class="flex-item three">盒子3</div>
    </div>
</body>

在这里插入图片描述

2.flex-direction使用（弹性子元素在父容器中的位置）

<style>
    /*flex-direction的值有:
        row：横向从左到右排列（左对齐），默认的排列方式。（设置主轴方向为x轴）
        row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。（负x轴）
        column：纵向排列。（设置主轴方向为y轴）
        column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。（负y轴）
    */
    
    .flex-container{
        display: flex;
        width: 450px;
        background-color: darkcyan;
        flex-direction: row-reverse;
    }
    
    .flex-item{
        width: 130px;
        height: 125px;
        margin: 10px;
        background-color: yellowgreen;
    }
    
</style>

<body>
    <div class="flex-container">
        <div class="flex-item one">盒子1</div>
        <div class="flex-item tow">盒子2</div>
        <div class="flex-item three">盒子3</div>
    </div>
</body>

在这里插入图片描述

3.justify-content 的使用（弹性子元素在父容器中的位置） 如下：盒子居中显示

  <style>
    /*justify-content 主轴属性
         flex-start：从左到右排列（主轴起点）
         flex-end：从右到左排列（主轴终点）
         center：中间开始排列（主轴居中）
         space-between：平分（两端会有间隙 子元素间的的间隙是两端的两倍）
         space-around：平分，且两边占1/2（两端没有间隙）
    */
    
    .flex-container{
        display: flex;
        width: 500px;
        background-color: darkcyan;
        justify-content: center;
    }
    
    .flex-item{
        width: 130px;
        height: 125px;
        margin: 10px;
        background-color: yellowgreen;
    }
    
</style>

<body>
    <div class="flex-container">
        <div class="flex-item one">盒子1</div>
        <div class="flex-item tow">盒子2</div>
        <div class="flex-item three">盒子3</div>
    </div>
</body>

在这里插入图片描述

4.align-items的使用（设置或检索弹性盒子元素在副轴（y轴）方向上的对齐方式）如下：从底部开始显示

  <style>
    /*align-items 副轴属性
         flex-start： 顶部开始
         flex-end： 低部开始
         center 居中
         baseline 弹性盒子元素的行内轴与侧轴为同一条
         stretch 默认值  在在副轴起点方向对齐 ，如果没有给副轴大小，那么铺满父元素的整个副轴方向如果给了副轴方向大小（效果和flex-start一样）
    */
    
    .flex-container{
        display: flex;
        width: 500px;
        height: 211px;
        background-color: darkcyan;
        align-items: flex-end;
    }
    
    .flex-item{
        width: 130px;
        height: 125px;
        margin: 10px;
        background-color: yellowgreen;
    }
    
</style>

<body>
    <div class="flex-container">
        <div class="flex-item one">盒子1</div>
        <div class="flex-item tow">盒子2</div>
        <div class="flex-item three">盒子3</div>
    </div>
</body>

在这里插入图片描述

5.flex-wrap的使用（定弹性盒子的子元素换行方式）如下：自动换行

<style>
  /* flex-wrap 自动换行属性
        nowrap  默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
        wrap  弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
    */
    
    .flex-container{
        display: flex;
        width: 300px;
        background-color: darkcyan;
        flex-wrap:wrap;
    }
    
    .flex-item{
        width: 130px;
        height: 125px;
        margin: 10px;
        background-color: yellowgreen;
    }
    
</style>

<body>
    <div class="flex-container">
        <div class="flex-item one">盒子1</div>
        <div class="flex-item tow">盒子2</div>
        <div class="flex-item three">盒子3</div>
    </div>
</body>

在这里插入图片描述

6.flex 用于指定弹性子元素如何分配空间。（弹性子元素占比）

 <style>
    /*flex 属性用于指定弹性子元素如何分配空间。
        比例分配
    */
    .flex-container{
        display: flex;
        width: 400px;
        height: 165px;
        background-color: darkcyan;
    }
    
    .flex-item{
        margin: 10px;
        background-color: yellowgreen;
    }
    
    .one{
        flex: 2;
    }
    .tow{
        flex: 1;
    }
    .three{
           flex: 1;
    }
    
</style>

<body>
    <div class="flex-container">
        <div class="flex-item one">盒子1</div>
        <div class="flex-item tow">盒子2</div>
        <div class="flex-item three">盒子3</div>
    </div>
</body>

在这里插入图片描述

小白张幺幺
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS弹性盒相关属性详细讲解
qq_63178915的博客
06-15 217
在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的弹性盒项目则平均分布，并确保两两之间的空白空间相等。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的弹性盒项目与其前一个项目对齐。各行向弹性盒容器的起始位置堆叠。
设置主轴方向和弹性盒子换行~~~~
weixin_57320268的博客
02-14 3486
1. 主轴默认是水平方向, 侧轴默认是垂直方向 修改主轴方向属性: flex-direction 属性值 作用 row 行, 水平(默认值) column *列, 垂直 row-reverse 行, 从右向左 column-reverse 列, 从下向上 flex-direction：column; 修改完毕，主轴是Y轴， 侧轴是X轴。 2.弹性盒子换行 特性： 给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，
css flex shrink,CSS 弹性盒子 flex的三个属性：grow、shrink、basis
weixin_42515842的博客
08-04 484
首先介绍flex-grow属性，flex-grow会在容器太大时对元素作出调解。如果图片A的flex-grow属性的值为 1，，图片B的flex-grow为 2，那么 2 的会比 1 的扩大两倍：也许“扩大两倍”这个观点未便于理解，我们可以换一种说法。首先要理解一个词“残剩空间”：具备flex环境的父容器(display:flex;)默认有一条从左往右的主轴，而残剩空间就是父容器在主轴标的目的上还...
Flex布局（秒懂弹性盒子的使用）
最新发布
百赢出品，必属精品
04-16 2257
Flex 弹性盒子是一种 CSS 布局模型，用于设计灵活的、可自适应的布局结构。通过 Flex 布局，你可以轻松地创建水平或垂直方向的布局，使内容在容器中动态地适应空间。基本概念Flex 弹性盒子模型是一种 CSS 布局模型，用于创建灵活的、自适应的布局结构。该模型由容器（Flex Container）和项目（Flex Item）组成，容器是 Flex 项目的父元素。主要属性display: 定义一个块级容器为 Flex 容器，可以是flex或。
关于移动端使用html rem单位 刷新 页面挤在一起 或第一次打开网页在一推的问题...
weixin_34202952的博客
12-05 681
问题的原因就是rem 会根据html根节点开始从小到大的单位进行渲染 所以第一次或刷新的时候会出现网页很小的现象 解决：如果使用rem单位设置html fontsize为设计图宽度的大小就可以了 转载于:https://www.cnblogs.com/lixinglong/p/7986925.html...
CSS3弹性盒子详解
weixin_42145856的博客
09-28 1624
什么是弹性盒子 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 ...
CSS3 弹性盒子和常用标签
菜鸟心声：学的不仅是技术，更是梦想！
02-25 400
CSS3弹性盒子 学习目标 掌握CSS3弹性盒子的使用方法 掌握CSS3弹性盒子的水平分布方法 重点 掌握CSS3弹性盒子的垂直分布的方法 重点 掌握CSS3弹性盒子排序的用法 CSS3 弹性盒子属性 属性 描述 display 指定 HTML 元素盒子类型。 flex-direction 指定了弹性容器中子元素的排列方式。 justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。 align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式
详解CSS3弹性伸缩盒
01-18
弹性盒子对于前端web网页布局来说，有着举足轻重的作用，移动端也是如此。掌握了弹性盒子用法，对于目前编写自适应页面很重要。掌握这种布局规则，是一项必备技能。 弹性伸缩盒模型说明 主轴（main axis） 是...
CSS3 Flex 弹性布局实例代码详解
01-19
//行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 二、容器属性 1. flex-direction flex-direction 决定项目的...
css flex 弹性布局详解
09-24
CSS Flex（弹性布局）是一种强大的布局模式，特别适用于创建响应式设计，因为它允许开发者更灵活地控制元素在容器中的对齐方式和排列顺序。在本文中，我们将深入探讨Flex布局的关键概念，包括基本用法、父容器属性...
CSS中的元素定位方法详解
12-13
理解并熟练掌握这些CSS定位方法，能让你在构建网页时更加得心应手，创造出符合设计需求的精美界面。同时，由于不同浏览器可能存在差异，使用reset CSS或normalize.css等工具可以帮助解决跨浏览器兼容性问题。在实践...
css3.0.rar_2012_CSS3
09-14
11. **Flexbox布局**：弹性盒子布局模型（`display: flex`）提供了一种更简便的方法来处理复杂的一维布局，如网格和列表。 12. **Grid布局**：CSS Grid布局（`display: grid`）是二维布局的新标准，用于创建网格...
flex布局（弹性盒子一）
m0_72959685的博客
08-22 8489
这样弹性盒子就开启了。
Flex弹性布局元素被挤压变扁问题
也许明天 '的博客
12-06 2486
出现被挤扁的情况，不能显示实际的宽度解决方法： 有一个 flex-shrink 属性，可以解决元素被挤压的问题。 flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。flex-shrink 的默认值为 1，将会自动按照默认值 1 在所有因子相加之后计算比率来进行空间收缩。 当给子盒子加上flex-shrink: 0，子盒子不会被压缩宽度；
CSS之弹性盒子模型（Flex布局）
fcc627的博客
04-26 2126
文章目录一、Flex布局是什么？二、基本概念三、容器的属性3.1 flex-direction属性3.2 justify-content属性3.3 flex-wrap属性3.4 align-items属性3.5 align-content属性3.6 flex-flow属性四、项目的属性4.1 flex属性4.2 align-self属性4.3 order属性五、相关案例5.1 案例1：flex设置主轴上的子元素排列方式5.2 案例2：flex-wrap子元素是否换行5.3 案例3：flex子项和flex份数
弹性盒子自动换行小Demo
HHppGo的博客
06-23 741
弹性盒子自动换行Demo
关于弹性盒子Flex布局
Nooneandyou_的博客
05-12 852
Flex弹性布局 说明：重点是分清楚主轴方向，侧轴方向的设置，作用在父元素和作用在子元素上的属性。 (1)控制方向 flex-direction控制主轴方向，取值有row(默认) |row-reverse | column | column-reverse(垂直方向翻转) align-items控制侧轴方向，取值有strenth(默认) | flex-start(顶部对齐) |flex-end(底...
使用flex-wrap实现弹性盒自动换行
热门推荐
digger_419的博客
11-04 2万+
布局的时候，我们常常会需要一行排列3/4/5/6个盒子，必要时自动换行，这时可以借助CSS3中的flex-wrap属性。 flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit; nowrap为默认值，wrap必要时实现自动换行，reverse必要时换行并反向排列 关键是在父元素中设置flex-wrap值为wrap, 然后是设置子元素的wi...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值