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

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

容器属性(应用于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中弹性布局的常见属性及其用法。欢迎大家指正

相关推荐
东风西巷15 小时前
PDFgear:免费全能的PDF处理工具
前端·pdf·软件需求
森之鸟15 小时前
Mac电脑上如何打印出字体图标
前端·javascript·macos
mCell16 小时前
GSAP 入门指南
前端·javascript·动效
gnip16 小时前
组件循环引用依赖问题处理
前端·javascript
Aotman_17 小时前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
Nan_Shu_61417 小时前
Web前端面试题(1)
前端·面试·职场和发展
lypzcgf17 小时前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台
百思可瑞教育18 小时前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育
患得患失94918 小时前
【个人项目】【前端实用工具】OpenAPI to TypeScript 转换器
前端·javascript·typescript
大前端helloworld18 小时前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·javascript·面试