div flex stretch не применяется и не меняет высоту - PullRequest
Новая
       7

div flex stretch не применяется и не меняет высоту

0 голосов
/ 12 июля 2020

Обратите внимание, что для div установлено значение display: flex. Внутри есть несколько таблиц. Я не могу изменить высоту div так, чтобы она занимала 85% страницы без равномерного вытягивания таблиц внутри розового div.

Я пытаюсь равномерно распределить содержимое таблиц внутри div. Я не могу найти правильный набор правил, чтобы заставить его работать. Я не знаю, где изменить класс содержимого или класс .foodiv. 

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

div {
    display: flex;
}

.foodiv {
    background-color: lightcoral;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    flex-grow: 4;
    flex-basis:   auto;
    align-content: stretch;
    align-self: auto;
    width: 100%;
    height: 85%;
    margin: 10px;  
}


.content {
    padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="food.css">
    <title>Document</title>
</head>
<body>
    <div class="foodiv">
    <center>
        <table id="t" style="color:white">
            <tr>
                <td class="content"><a style="text-decoration:none;" href="pizza.html"><button>Pizza</button></a></td>
                <td class="content"><a style="text-decoration:none;" href="pasta.html"><button>Pasta</button></a></td>
                <td class="content"><a style="text-decoration:none;" href="burger.html"><button>Burger</button></a></td>
            </tr>
            <tr>
                <td class="content"><a style="text-decoration:none;" href="noodles.html"><button>Noodles</button></a></td>
                <td class="content"><a style="text-decoration:none;" href="hs.html"><button>Chinese Hot and Sour
                            Soup</button></a></td>
                <td class="content"><a style="text-decoration:none;" href="cgs.html"><button>Carrot Ginger Soup</button></a>
                </td>
            </tr>
            <tr>
                <td class="content"><a style="text-decoration:none;" href="breadroll.html"><button>Bread Roll</button></a>
                </td>
                <td class="content"><a style="text-decoration:none;" href="ps.html"><button>Paneer Sandwich</button></a>
                </td>
                <td class="content"><a style="text-decoration:none;" href="vegetablemaggie.html"><button>Vegetable
                            Maggie</button></a></td>
            </tr>
            <tr>
                <td class="content"><a style="text-decoration:none;" href="frenchtoast.html"><button>French
                            Toast</button></a></td>
                <td class="content"><a style="text-decoration:none;" href="tacos.html"><button>Tacos</button></a></td>
                <td class="content"><a style="text-decoration:none;" href="momos.html"><button>Momos</button></a></td>
            </tr>
            <tr>
                <td class="content"><a style="text-decoration:none;" href="pt.html"><button>Paneer Tikka</button></a></td>
                <td class="content"><a style="text-decoration:none;" href="ccb.html"><button>Crispy Chilly
                            Babycorn</button></a></td>
                <td class="content"><a style="text-decoration:none;" href="ac.html"><button>American Chopsuey</button></a>
                </td>
            </tr>
            <tr>
                <td class="content"><a style="text-decoration:none;" href="q.html"><button>Quesadilla</button></a></td>
                <td class="content"><a style="text-decoration:none;" href="chococake.html"><button>Chocolate
                            Cake</button></a></td>
                <td class="content"><a style="text-decoration:none;" href="lbp.html"><button>Lemon Bar Peeps</button></a>
                </td>
            </tr>
            <tr>
                <td class="content"><a style="text-decoration:none;" href="sbpie.html"><button>Strawberry Pie</button></a>
                </td>
                <td class="content"><a style="text-decoration:none;" href="tiramisu.html"><button>Tiramisu</button></a></td>
                <td class="content"><a style="text-decoration:none;" href="pc.html"><button>Panna Cotta</button></a></td>
            </tr>
            <tr>
                <td class="content"><a style="text-decoration:none;" href="bmc.html"><button>Blueberry Muffin
                            Cake</button></a></td>
                <td class="content"><a style="text-decoration:none;" href="cheesecake.html"><button>Cheesecake</button></a>
                </td>
                <td class="content"><a style="text-decoration:none;" href="cm.html"><button>Chocolate Milkshake</button></a>
                </td>
            </tr>
        </table>
    </center>
    </div>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 12 июля 2020

возникли проблемы с вашим кодом. замените HTML и CSS этим кодом: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="food.css" />
    <title>Document</title>

    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      .foodiv {
        background-color: lightcoral;
        height: 85vh;
        margin: 10px;
        padding: 30px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
      }

      #t {
        display: flex;
      }

      tbody {
        display: flex;
        flex-wrap: wrap;
      }

      button {
        padding: 5px 15px;
      }

      tr {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="foodiv">
      <table id="t" style="color: white;">
        <tbody>
          <tr>
            <td class="content">
              <a style="text-decoration: none;" href="pizza.html"
                ><button>Pizza</button></a
              >
            </td>
            <td class="content">
              <a style="text-decoration: none;" href="pasta.html"
                ><button>Pasta</button></a
              >
            </td>
            <td class="content">
              <a style="text-decoration: none;" href="burger.html"
                ><button>Burger</button></a
              >
            </td>
          </tr>
          <tr>
            <td class="content">
              <a style="text-decoration: none;" href="noodles.html"
                ><button>Noodles</button></a
              >
            </td>
            <td class="content">
              <a style="text-decoration: none;" href="hs.html"
                ><button>Chinese Hot and Sour Soup</button></a
              >
            </td>
            <td class="content">
              <a style="text-decoration: none;" href="cgs.html"
                ><button>Carrot Ginger Soup</button></a
              >
            </td>
          </tr>
          <tr>
            <td class="content">
              <a style="text-decoration: none;" href="breadroll.html"
                ><button>Bread Roll</button></a
              >
            </td>
            <td class="content">
              <a style="text-decoration: none;" href="ps.html"
                ><button>Paneer Sandwich</button></a
              >
            </td>
            <td class="content">
              <a style="text-decoration: none;" href="vegetablemaggie.html"
                ><button>Vegetable Maggie</button></a
              >
            </td>
          </tr>
          <tr>
            <td class="content">
              <a style="text-decoration: none;" href="frenchtoast.html"
                ><button>French Toast</button></a
              >
            </td>
            <td class="content">
              <a style="text-decoration: none;" href="tacos.html"
                ><button>Tacos</button></a
              >
            </td>
            <td class="content">
              <a style="text-decoration: none;" href="momos.html"
                ><button>Momos</button></a
              >
            </td>
          </tr>
          <tr>
            <td class="content">
              <a style="text-decoration: none;" href="pt.html"
                ><button>Paneer Tikka</button></a
              >
            </td>
            <td class="content">
              <a style="text-decoration: none;" href="ccb.html"
                ><button>Crispy Chilly Babycorn</button></a
              >
            </td>
            <td class="content">
              <a style="text-decoration: none;" href="ac.html"
                ><button>American Chopsuey</button></a
              >
            </td>
          </tr>
          <tr>
            <td class="content">
              <a style="text-decoration: none;" href="q.html"
                ><button>Quesadilla</button></a
              >
            </td>
            <td class="content">
              <a style="text-decoration: none;" href="chococake.html"
                ><button>Chocolate Cake</button></a
              >
            </td>
            <td class="content">
              <a style="text-decoration: none;" href="lbp.html"
                ><button>Lemon Bar Peeps</button></a
              >
            </td>
          </tr>
          <tr>
            <td class="content">
              <a style="text-decoration: none;" href="sbpie.html"
                ><button>Strawberry Pie</button></a
              >
            </td>
            <td class="content">
              <a style="text-decoration: none;" href="tiramisu.html"
                ><button>Tiramisu</button></a
              >
            </td>
            <td class="content">
              <a style="text-decoration: none;" href="pc.html"
                ><button>Panna Cotta</button></a
              >
            </td>
          </tr>
          <tr>
            <td class="content">
              <a style="text-decoration: none;" href="bmc.html"
                ><button>Blueberry Muffin Cake</button></a
              >
            </td>
            <td class="content">
              <a style="text-decoration: none;" href="cheesecake.html"
                ><button>Cheesecake</button></a
              >
            </td>
            <td class="content">
              <a style="text-decoration: none;" href="cm.html"
                ><button>Chocolate Milkshake</button></a
              >
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
0 голосов
/ 12 июля 2020

только дочерний элемент вашего гибкого контейнера .foodiv - это тег <center> - один дочерний элемент гибкости может растягиваться, но на элемент внутри («внуки») это не повлияет. настройка гибкости. Сотрите тег <center> и отцентрируйте таблицы другим способом.

...