Início / coding / Perguntas / 79549772
Accepted
Mark
Asked: 2025-04-02 13:47:27 +0800 CST

Problema de solicitação flexível: é possível alterar a ordem do fluxo?

  • 772

Esta é minha tentativa de criar um modelo CSS com os seguintes recursos:

  • para viewports menores (< 1200px) coluna única, com estes itens:

    1. box-menu
    2. box-data
    3. box-footer

  • para janelas de visualização maiores, mude para um layout de duas colunas:

    • coluna da esquerda: box-menue box-footer sem qualquer rolagem
    • coluna da direita: box-datapermitindo a rolagem desta coluna somente se o conteúdo for maior que a altura disponível

Aqui está meu código:

:root {
  --color-text: #521D03;
  --color-menu-background: #33dd00;
  --color-content-background: #FFFFFF;
  --color-lines: #521D03;
}

html,
body,
.container {
  height: 100%;
}

body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
}

.button {
  display: block;
  font-weight: bold;
  font-size: 32px;
  line-height: 0.9em;
  text-decoration: none;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.box {
  padding: 1em;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  color: var(--color-text);
}

.box-menu {
  background-color: var(--color-menu-background);
  text-align: center;
  justify-content: space-around;
}

.box-data {
  background-color: var(--color-content-background);
  background-color: #aaaaaa;
  flex: 1;
}

.box-footer {
  background-color: var(--color-menu-background);
  line-height: 1em;
  text-align: center;
}

.box-menu .menu-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-data .data-header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-data .data-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-data .data-footer {
  flex: 0 1 150px;
  text-align: center;
}

/* Larger viewports */
@media (min-width: 1200px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .box-menu,
  .box-data,
  .box-footer {
    flex-basis: 50%;
  }

  .box-menu {
    height: calc(100% - 150px);
  }

  .box-footer {
    height: 150px;
  }

  .box-data {
    height: 100%;
    overflow-y: auto;
  }
}
<div class="container">
  <div class="box box-menu">

    <div class="menu-header">
      <h1>MY LOGO</h1>
    </div>

    <div class="menu-content">
      <a class="button" href="/">MENU 1</a>
      <a class="button" href="/">MENU 2</a>
      <a class="button" href="/">MENU 3</a>
    </div>

  </div>
  <div class="box box-data">

    <div class="data-header">
      <div class="nav-section">
        <h3>MY NAV</h3>
      </div>
    </div>

    <div class="data-content">
      MY LONG CONTENT

      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
    </div>

    <div class="data-footer">
      <div class="menu-content">
        <a class="button clear">MY BUTTON</a>
      </div>
    </div>

  </div>

  <div class="box box-footer">
    MY FOOTER
  </div>

</div>

O código de viewport menor está funcionando bem. Quando ele muda para o layout de duas colunas, o box-footeré colocado (como esperado) depois do box-datacausando uma lacuna:

brecha

Tentei consertar com a orderpropriedade, mas ela altera a ordem dos itens, não a ordem do fluxo.

Pelo que entendi, o flex contará 1. superior esquerdo, 2. superior direito, 3. inferior esquerdo, etc. Em vez disso, para atender às minhas necessidades, deveria ser 1 superior esquerdo (menu), 2 inferiores esquerdos (rodapé) e 3 superiores direitos (dados).

Como colocar o box-footerlogo abaixo box-menusem deixar espaço?

html

2 respostas

  1. Best Answer

    Para esse tipo de layout, usar grid layout em vez de flex é mais apropriado. Você pode definir o grid-templateque quiser dependendo do tamanho da tela:

    .container {
  display: grid;
  grid-template:
    "menu"
    "data"
    "footer";
}

@media (min-width: 1200px) {
  .container {
    grid-template:
      "menu data"
      "footer data";
    grid-template-columns: 1fr 1fr;
  }
}

    E então atribua a cada um grid-area:

    .box-menu {
  grid-area: menu;
}

.box-data {
  grid-area: data;
}

.box-footer {
  grid-area: footer;
}

    Aqui está o trecho atualizado:

    :root {
  --color-text: #521D03;
  --color-menu-background: #33dd00;
  --color-content-background: #FFFFFF;
  --color-lines: #521D03;
}

html,
body,
.container {
  height: 100%;
}

body {
  margin: 0;
}

.container {
  display: grid;
  grid-template:
    "menu"
    "data"
    "footer";
}

.button {
  display: block;
  font-weight: bold;
  font-size: 32px;
  line-height: 0.9em;
  text-decoration: none;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.box {
  padding: 1em;
  box-sizing: border-box;
  color: var(--color-text);
}

.box-menu {
  background-color: var(--color-menu-background);
  text-align: center;
  grid-area: menu;
}

.box-data {
  background-color: var(--color-content-background);
  grid-area: data;
  background-color: #aaaaaa;
}

.box-footer {
  background-color: var(--color-menu-background);
  line-height: 1em;
  text-align: center;
  grid-area: footer;
  height: max-content;
}

.box-data .data-footer {
  text-align: center;
}

/* Larger viewports */
@media (min-width: 1200px) {
  .container {
    grid-template:
      "menu data"
      "footer data";
    grid-template-columns: 1fr 1fr;
  }

  .box-data {
    overflow-y: auto;
  }
}
    <div class="container">
  <div class="box box-menu">

    <div class="menu-header">
      <h1>MY LOGO</h1>
    </div>

    <div class="menu-content">
      <a class="button" href="/">MENU 1</a>
      <a class="button" href="/">MENU 2</a>
      <a class="button" href="/">MENU 3</a>
    </div>

  </div>
  <div class="box box-data">

    <div class="data-header">
      <div class="nav-section">
        <h3>MY NAV</h3>
      </div>
    </div>

    <div class="data-content">
      MY LONG CONTENT

      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
    </div>

    <div class="data-footer">
      <div class="menu-content">
        <a class="button clear">MY BUTTON</a>
      </div>
    </div>

  </div>

  <div class="box box-footer">
    MY FOOTER
  </div>

</div>

    • 1

  2. Hoje em dia, o CSS grid é a escolha óbvia, mas o flexbox também é fácil:

    @media (min-width: 1200px) {
  /* container should stay column and wrap */
  .container {
    flex-wrap: wrap;
  }

  .box-menu {
    height: calc(100% - 150px);
  }
 
  .box-footer {
    height: 150px;
    order: 1; /* box footer should come before box-data */
  }

  .box-data {
    overflow-y: auto;
    order: 2; /* box footer should come before box-data */
  }
}


    :root {
  --color-text: #521D03;
  --color-menu-background: #33dd00;
  --color-content-background: #FFFFFF;
  --color-lines: #521D03;
}

html,
body,
.container {
  height: 100%;
}

body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
}

.button {
  display: block;
  font-weight: bold;
  font-size: 32px;
  line-height: 0.9em;
  text-decoration: none;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.box {
  padding: 1em;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  color: var(--color-text);
}

.box-menu {
  background-color: var(--color-menu-background);
  text-align: center;
  justify-content: space-around;
}

.box-data {
  background-color: var(--color-content-background);
  background-color: #aaaaaa;
  flex: 1;
}

.box-footer {
  background-color: var(--color-menu-background);
  line-height: 1em;
  text-align: center;
}

.box-menu .menu-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-data .data-header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-data .data-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-data .data-footer {
  flex: 0 1 150px;
  text-align: center;
}

/* Larger viewports */
@media (min-width: 1200px) {
  /* container should stay column and wrap */
  .container {
    flex-wrap: wrap;
  }

  .box-menu {
    height: calc(100% - 150px);
  }
 
  .box-footer {
    height: 150px;
    order: 1; /* box footer should come before box-data */
  }

  .box-data {
    overflow-y: auto;
    order: 2; /* box footer should come before box-data */
  }
}
    <div class="container">
  <div class="box box-menu">

    <div class="menu-header">
      <h1>MY LOGO</h1>
    </div>

    <div class="menu-content">
      <a class="button" href="/">MENU 1</a>
      <a class="button" href="/">MENU 2</a>
      <a class="button" href="/">MENU 3</a>
    </div>

  </div>
  <div class="box box-data">

    <div class="data-header">
      <div class="nav-section">
        <h3>MY NAV</h3>
      </div>
    </div>

    <div class="data-content">
      MY LONG CONTENT

      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
      </p>
    </div>

    <div class="data-footer">
      <div class="menu-content">
        <a class="button clear">MY BUTTON</a>
      </div>
    </div>

  </div>

  <div class="box box-footer">
    MY FOOTER
  </div>

</div>

    • 1

relate perguntas