likes
comments
collection
share

弹性布局：解锁网页设计的无限可能！

作者站长头像
站长
· 阅读数 15

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

容器属性（应用于flex容器）

1. display

  • display: flex;

  • display: inline-flex;

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

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

<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-direction和flex-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

  • 多行/列对齐方式（仅当有多行/列时生效）。
  • stretch、flex-start、flex-end、center、space-between、space-around和space-evenly的作用类似于justify-content，但应用于多行/列。

项目属性（应用于flex项目）

  1. order
    • 控制项目的排列顺序。默认为0，数值越小，排列越靠前。
<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-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。建议使用这个简写属性而不是单独写三个分开的属性。

  4. align-self

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

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