Колонка Flex не растягивается без чрезмерного расширения содержания - PullRequest
Новая
       4

Колонка Flex не растягивается без чрезмерного расширения содержания

1 голос
/ 12 мая 2019

Я работаю над макетом моей страницы HTML / CSS. Я ищу боковую панель + основной контент и над ними навигационную панель.

На этой картинке макет кажется "хорошим", но я хочу растянуть все до полного размера моей страницы. Без раздражения от этой навигационной панели, потому что мой основной контент чрезмерно расширяется (~ 56px)

problem

Я написал следующий код ... 

html,
body {
  margin: 0 auto;
  height: 100%;
}

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

.wrapper>* {
  flex: 1 100%;
}

.main {}

.sidebar {}

@media all and (min-width: 600px) {
  .sidebar {
    flex: 1 0 0;
  }
}

@media all and (min-width: 800px) {
  .main {
    flex: 3 0px;
  }
  .sidebar {
    order: 1;
  }
  .main {
    order: 2;
  }
}
<body>
  <div class="wrapper">
    <header class="header">
      <nav class="navbar navbar-light bg-light">
        <span class="navbar-brand mb-0 h1">Navbar</span>
      </nav>
    </header>
    <article class="main">
      <app-root></app-root>
    </article>
    <aside class="sidebar">Aside 1</aside>
  </div>
</body>

Ответы [ 2 ]

1 голос
/ 13 мая 2019

Из моих комментариев к этому вопросу проблема заключается в том, что вы используете wrapping flexbox для этого макета;Вы должны завернуть aside и article в другой flexbox, чтобы это работало.Проверьте демонстрацию ниже (опущены медиа-запросы для мобильного просмотра): 

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0 auto;
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column; /* column flexbox */
  border: 1px solid red;
  height: 100%;
}

section,
aside,
header {
  border: 1px solid;
}

.wrapper section {
  display: flex; /* wraps article and aside into a flexbox */
  flex: 1; /* fill remaining space */
}

article {
  flex: 1; /* fill remaining space */
}
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="wrapper">
  <header class="header">
    <nav class="navbar navbar-light bg-light">
      <span class="navbar-brand mb-0 h1">Navbar</span>
    </nav>
  </header>
  <section>
    <aside class="sidebar">Aside 1</aside>
    <article class="main">
      Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum
      some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here
    </article>
  </section>
</div>
0 голосов
/ 12 мая 2019

Flex в основном используется в качестве однонаправленного макета. Хотя он может использоваться как у вас, лучше держать его сосредоточенным на одной строке в вашем случае. Просто переместите .header за пределы .wrapper: 

<body>
  <header class="header">
    <nav class="navbar navbar-light bg-light">
      <span class="navbar-brand mb-0 h1">Navbar</span>
    </nav>
  </header>
  <div class="wrapper">
    <aside class="sidebar">Aside 1</aside>
    <article class="main">
      <app-root></app-root>
    </article>
  </div>
</body>

Теперь просто установите размер по умолчанию для боковой панели и размер жидкости для вашей статьи: 

.wrapper {
    display: flex;
}

.sidebar {
    flex: 0 0 300px; /* will not grow, will not shrink, will have starting width of 300px */
}

.main {
    flex: 1 1 0; /* will grow, will shrink, will have starting width of 0 - aka it will fill all space available (page width minus 300px) */
}

Затем вы можете использовать медиазапросы, чтобы изменить размер .sidebar по умолчанию на экранах разных размеров, и .main адаптируется для заполнения всего доступного пространства.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...