弹性布局:解锁网页设计的无限可能!

我们在项目中常常会用到弹性布局,接下来我们就来学习一下弹性布局中的属性及其用法

容器属性(应用于flex容器)

1. display

  • display: flex;

  • display: inline-flex;

    相同点:将容器内的子元素水平或者垂直排列,默认是水平·

    不同点:display: flex;将元素作为块级元素展示,display: inline-flex;将元素作为行内元素展示

xml 复制代码
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div> 
    </div>
</body>
<style>
    .container {
        display: flex;
        flex-direction: column;
    }

    .item {
        background-color: lightblue;
        padding: 20px;
        margin: 10px;
    }
</style>

效果图:

display: flex;改为display: inline-flex;

2. flex-direction(改变主轴方向)

  • row:项目沿主轴水平排列,起点在左端(默认)。
  • row-reverse:项目沿主轴水平排列,但起点在右端。
  • column:项目沿主轴垂直排列,起点在上沿。
  • column-reverse:项目沿主轴垂直排列,但起点在下沿。

3. flex-wrap(也是上述示例,可以多加几个子元素试试效果,就不一一展示了)

  • nowrap:所有项目都排在一行上。
  • wrap:一行排不下,则项目会换行排列。
  • wrap-reverse:项目换行排列,但第一行在容器的底部。

4. flex-flow

  • flex-directionflex-wrap的简写形式,例如:flex-flow: row wrap;

5. justify-content(效果图就展示一两个,有兴趣可以自行试试)

  • 控制项目在主轴上的对齐方式。
  • flex-start:项目向一行的起始位置靠齐。
  • flex-end:项目向一行的结束位置靠齐。
  • center:项目居中对齐。
  • space-between:项目之间的间隔相等。
  • space-around:项目周围的间隔相等。
  • space-evenly:项目间和边缘间的间隔相等。

6. align-items

  • 控制项目在交叉轴上如何对齐。
  • stretch:拉伸以填满容器(默认值)。
  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。

7. align-content

  • 多行/列对齐方式(仅当有多行/列时生效)。
  • stretchflex-startflex-endcenterspace-betweenspace-aroundspace-evenly的作用类似于justify-content,但应用于多行/列。

项目属性(应用于flex项目)

  1. order
    • 控制项目的排列顺序。默认为0,数值越小,排列越靠前。
css 复制代码
<style>
    .container {
        display: flex;
    }

    .item {
        background-color: lightblue;
        padding: 20px;
        margin: 10px;
        &:nth-child(3){
            order: 0;
        }
        &:nth-child(2){
            order: 1;
        }
        &:nth-child(1){
            order: 2;
        }
    }
</style>
  1. flex-grow
    • 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。例如:给子元素item加上属性flex-grow:1;
  1. flex-shrink

    • 定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
  2. flex-basis

    • 定义在分配多余空间之前,项目占据的主轴空间(main size)。auto表示项目本来的大小。
  3. flex

    • flex-growflex-shrinkflex-basis的简写,默认值为0 1 auto。建议使用这个简写属性而不是单独写三个分开的属性。
  4. align-self

    • 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。接受的值与align-items相同。

以上便是css中弹性布局的常见属性及其用法。欢迎大家指正

相关推荐
xjt_09013 分钟前
浅析Web存储系统
前端
foxhuli22941 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
孤水寒月2 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu2 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp