×
  • 的CSS 弹性盒–完整的初学者指南

  • 柔性显示器

    课程清单

    为了开始使用Flex Display,我们将创建一个非常简单的HTML和CSS。


    HTML结构

    In HTML consider we have a div 容器 which displays the list of items

    index.html
    
    <div class="容器">
      <div class="flex-item item-1">Item 1</div>
      <div class="flex-item item-2">Item 2</div>
      <div class="flex-item item-3">Item 3</div>
      <div class="flex-item item-4">Item 4</div>
      <div class="flex-item item-5">Item 5</div>
    </div>
    

    As you can see we have a parent div with class 容器 and the parent div contains the child div with class flex-item and individual class of each item.

    的CSS设计

    让我们创建一个CSS类以使外观看起来不错

    style.css
    
    body {
        margin: 0;
    }
    .container {
        border: 6px solid black;
    }
    .flex-item {
        color: white;
        font-size: 1.5rem;
        padding: 1rem;
        text-align: center;
    }
    .item-1 {
        background-color: #B4BF35;
    }
    .item-2 {
        background-color: #B95F21;
    }
    .item-3 {
        background-color: #1C4C56;
    }
    .item-4 {
        background-color: #CfB276;
    }
    .item-5 {
        background-color: #6B0803;
    }
    

    之后,我们将显示的是:
    容器
    现在让我们集中讨论第一个属性,即显示属性
    要创建一个flex容器,我们使用display属性并将其设置为flex的值
    因此,在CSS中,首先为flex创建一个类,其名称为 d-flex

    style.css
    
    .d-flex {
      display: flex;
    }
    

    And Add this d-flex class after the 容器 class in html.
    之后,我们将显示的是:
    弹性容器
    正如您看到的项目从左到右的布局一样,您还可以看到容器具有100%的宽度,因为它的行为就像一个块级元素。

    显示内联Flex

    So if you change the diplay: flex to display: inline-flex

    style.css
    
    /* You can create a seperate class for inline flex as `d-inline-flex` */
    .d-flex {
      display: inline-flex;
    }
    

    之后,我们将显示的是:
    弹性容器
    如您所见,黑色边框现在缠绕在弹性项目周围。容器仅占用足够的宽度以容纳其子容器。

    确保始终设置display属性,或者在flex容器上其他任何属性都不起作用。

    演示

    看笔
    弹性盒
    由rehmaanali(@geekstrick)
    密码笔.

    flex容器属性

  • 启用通知    不用了,谢谢