zoukankan      html  css  js  c++  java
  • 弹性盒子

    <head>

      <meta charset='utf-8' />

      <title>React Turotial</title>

    <style>

    .flex-container {
    display: -webkit-flex;
    display: flex;
    400px;
    height: 250px;
    background-color: lightgrey;
    }
    .flex-item {
    background-color: cornflowerblue;
    100px;
    height: 100px;
    margin: 10px;
    }

    </style>

    </head>

    <div class="flex-container">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
    </div>

    效果图如下:

    也可以这样:

    <head>

      <meta charset='utf-8' />

      <title>React Turotial</title>

    <style>

    .flex-wrap {
    display:flex;
    flex-direction:row;
    color: #0c0;}
    .flex-item {
    100px;
    height:100px;
    background-color: #999;
    margin-right: 5px;
    color:#ccc;
    justify-content:center;
    align-item:center;
    }

    </style>

    </head>

    <div class='flex-wrap'>
    <div class='flex-item'>1</div>
    <div class='flex-item'>2</div>
    <div class='flex-item'>3</div>
    </div>

    效果图如下:

  • 相关阅读:
    第二次结对编程作业
    第5组 团队展示
    第一次结对编程作业
    第一次个人编程作业
    51 Nod 1024 Set
    51 Nod 1007 dp
    YY的GCD 数学
    选课 树形背包dp
    运输问题 费用流
    分配问题 费用流
  • 原文地址:https://www.cnblogs.com/aivnfjgj/p/6169550.html
Copyright © 2011-2022 走看看