教你快速上手Flex弹性盒布局(项目属性)

简介: 教你快速上手Flex弹性盒布局(项目属性)

一,项目属性


项目属性 说明
order 设置项目的排列顺序
flex-grow 设置项目的放大比例
flex-shrink 设置项目的缩小比例
flex-basis 设置弹性盒伸缩基准值
flex 复合属性,代表flex-grow、flex-shrink 和 flex-basis的简写,用于设置弹性盒模型对象的子元素如何分配空间
align-self 设置子元素在侧轴(纵轴)方向上的对齐方式


二,Flex布局语法


2.1,order

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
        }
        .box>div{
            border: 1px solid black;
        }
        .box>div:nth-child(2){
            order: 5;
            background-color: bisque;
        }
        .box>div:nth-child(3){
            order: 2;
            background-color: chocolate;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="height: 100px; width: 40%;">第一个子元素</div>
        <div style="height: 200px; width: 40%;">第二个子元素</div>
        <div style="height: 300px; width: 40%;">第三个子元素</div>
    </div>
</body>
</html>

设置项目的排列顺序,数值越小,排列越靠前。其属性值可以是正数,也可以是负数,默认值为0


2.2,align-self

设置单个flex项目的对齐方式。

2.2-1,center
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
        }
        .box>div{
            border: 1px solid black;
        }
        .box>div:nth-child(2){
            order: 5;
            background-color: bisque;
            align-self: center;
        }
        .box>div:nth-child(3){
            order: 2;
            background-color: chocolate;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="height: 100px; width: 40%;">第一个子元素</div>
        <div style="height: 200px; width: 40%;">第二个子元素</div>
        <div style="height: 300px; width: 40%;">第三个子元素</div>
    </div>
</body>
</html>

** 居中**


2.2-1,flex-end
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
        }
        .box>div{
            border: 1px solid black;
        }
        .box>div:nth-child(2){
            order: 5;
            background-color: bisque;
            align-self: center;
        }
        .box>div:nth-child(3){
            order: 2;
            background-color: chocolate;
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="height: 100px; width: 40%;">第一个子元素</div>
        <div style="height: 200px; width: 40%;">第二个子元素</div>
        <div style="height: 300px; width: 40%;">第三个子元素</div>
    </div>
</body>
</html>

底端对齐


2.3,flex-grow

默认值为0。用于决定项目现有剩余空间的情况下是否放大,默认不放大。

注意:


  • 即使设置了宽度,如果设置了放大,那么宽度失效。
  • 多个flex项目同时放大,如果数值越大,放大的比例也越大。
  • 多个flex项目根据放大比例,重新分配了剩余空间。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            border: 1px solid black;
            display: flex;
            justify-content: space-evenly;
        }
        .box>div{
            border: 1px solid black;
        }
        .box>div:nth-child(1){
            background-color: cadetblue;
            flex-grow: 1;
        }
        .box>div:nth-child(2){
            order: -2;
            background-color: bisque;
            width: 300px;
            flex-grow: 1;           
        }
        .box>div:nth-child(3){
            background-color: chocolate;
            flex-grow: 2;
        }
    </style>
</head>
<body>
    <div class="box">
        <div >第一个子元素</div>
        <div >第二个子元素</div>
        <div >第三个子元素</div>
    </div>
</body>
</html>

设置项目的放大比例,主要用于分配项目的剩余空间,其属性值不能为负数,默认为0


2.3,flex-shrink

  • 不换行、换列的情况下有效。
  • 设置缩小。默认值为1,默认情况下,会等比例缩小,宽度失效。
  • 设为0,表示不缩小。
  • 数值越大,缩小的比例也越大。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            border: 1px solid black;
            display: flex;
        }
        .box>div{
            border: 1px solid black;
        }
        .box>div:nth-child(1){
            background-color: cadetblue;
            width: 400px;
            flex-shrink: 0;
        }
        .box>div:nth-child(2){
            background-color: bisque;
            width: 800px;
            flex-shrink: 2;        
        }
        .box>div:nth-child(3){
            background-color: chocolate;
            width: 1600px;
            flex-shrink: 4;
        }
    </style>
</head>
<body>
    <div class="box">
        <div >第一个子元素</div>
        <div >第二个子元素</div>
        <div >第三个子元素</div>
    </div>
</body>
</html>

**设置项目的缩小比例,即如果空间不足,项目将会缩小。其属性值不能为负数,默认为1

**


2.4,flex

取值默认:0 1 auto。flex属性是 flex-grow、flex-shrink与flex-basis的简写。用于定义项目放大,缩小
与宽度。


flex有两个快捷值:

  • auto。表示(1 1 auto)等分放大缩小。
  • none。表示(0 0 auto)不放大,但等分缩小。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            border: 1px solid black;
            display: flex;
        }
        .box>div{
            border: 1px solid black;
        }
        .box>div:nth-child(1){
            background-color: cadetblue;
            width: 400px;
            flex: (auto(1,0));
        }
        .box>div:nth-child(2){
            background-color: bisque;
            width: 800px;
            flex: (auto(0,1));     
        }
        .box>div:nth-child(3){
            background-color: chocolate;
            width: 1600px;
            flex: (auto(1,1));   
        }
    </style>
</head>
<body>
    <div class="box">
        <div >第一个子元素</div>
        <div >第二个子元素</div>
        <div >第三个子元素</div>
    </div>
</body>
</html>

0ec65d719de73ed4fe2af040f3a3039e_99a9096dc9e04bf6aa6d8aa580d97081.png

为弹性盒模型对象的子元素分配空间


  • 是flex-grow、 flex-shrink 和 flex-basis的简写,后两个属性可选
  • 默认值为0 1 auto
  • 除此之外,属性值还可以设置为auto和none
  • auto:与 1 1 auto 相同
  • flex-grow: 1,表示如果容器有剩余空间,它会放大
  • flex-shrink: 1,表示如果容器空间不足,它会进行收缩
  • flex-basis: auto,表示元素的内容或者宽度(高度)保持一致
  • none:与 0 0 auto 相同
  • flex-grow: 0,表示如果容器有剩余空间,它不会放大
  • flex-shrink: 0,如果容器空间不足,它不会进行收缩
  • flex-basis: auto,表示元素的内容或者宽度(高度)保持一致


小结

  • 如何区分align-items与align-self属性?
  • align-items:是容器属性,用于对项目的对齐方式进行控制
  • align-self :是项目属性,用于对自己本身的对齐方式进行控制
  • Flex弹性盒模型的重点属性有哪些?
  • flex-direction
  • justify-content
  • align-items
  • flex
  • 这些能够快速简单的解决传统布局中垂直居中对齐的难题
  • 说出使用Flex弹性盒模型的注意事项
  • 将容器转为flex布局后,项目不受float的影响


最后


如果有不太明白可以参考上一个【教你快速上手flex弹性布局(属性容器)】


目录
打赏
0
0
0
0
19
分享
相关文章
13.HarmonyOS流式卡片列表实现指南:Flex多行布局详解
在现代移动应用开发中,流式卡片列表是一种常见且实用的UI设计模式。它能够自适应屏幕宽度,在有限空间内高效展示多个内容项。本教程将详细讲解如何使用HarmonyOS的ArkUI框架中的Flex组件实现一个灵活的流式卡片列表,重点关注多行布局与对齐策略的应用。
51 2
07.精通HarmonyOS Flex对齐:从基础到高级布局技巧(上)
在HarmonyOS Next的ArkUI框架中,Flex容器提供了强大而灵活的对齐系统,使开发者能够精确控制子元素在容器中的排列方式。掌握这些对齐技术,是构建专业级用户界面的关键。
63 0
|
1月前
|
5.HarmonyOS Next开发宝典:掌握Flex布局的艺术
Flex布局(弹性布局)是HarmonyOS Next中最强大的布局方式之一,它提供了一种更加高效、灵活的方式来对容器中的子元素进行排列、对齐和分配空间。无论是简单的居中显示,还是复杂的自适应界面,Flex布局都能轻松应对。
63 0
|
1月前
|
10.HarmonyOS Next布局进阶:嵌套Flex容器与空间分配策略
在HarmonyOS Next的ArkUI框架中,Flex布局是构建用户界面的核心技术之一。通过嵌套使用Flex容器,我们可以创建复杂而灵活的界面结构,满足各种应用场景的需求。本教程将深入探讨如何在HarmonyOS Next中使用嵌套Flex容器实现复杂布局,以及如何合理分配和控制空间。
54 0
鸿蒙开发:弹性布局Flex
在实际的开发中,需要掌握主轴与交叉轴的关系、换行规则及子元素属性,同时注意性能与兼容性问题,还有一点,Flex组件在渲染时存在二次布局过程,因此在对性能有严格要求的场景下建议使用Column、Row代替。
137 10
鸿蒙开发:弹性布局Flex
Bootstrap5 Flex(弹性)布局6
使用 `.align-self-*` 类可控制指定子元素的对齐方式,包括 `.align-self-start`, `.align-self-end`, `.align-self-center`, `.align-self-baseline`, 和 `.align-self-stretch`。示例代码展示了如何在一个弹性布局中应用这些类,以实现不同设备上的响应式设计。
Bootstrap5 Flex(弹性)布局5
使用 .align-content-* 控制多行子元素在垂直方向上的堆叠方式,如 .align-content-start、.align-content-center 等。对于单行子元素,使用 .align-items-* 控制对齐,例如 .align-items-start、.align-items-center 等。示例代码展示了不同对齐效果的应用。
flex 布局属性在实际项目中的应用场景有哪些?
flex 布局属性在实际项目中的应用场景有哪些?
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问