Как использовать flexbox, чтобы содержать содержимое в сетке? - PullRequest
Новая
       6

Как использовать flexbox, чтобы содержать содержимое в сетке?

0 голосов
/ 05 июля 2018

Я хочу использовать flexbox для хранения всего, что находится во втором элементе сетки. В этом случае картина переполняется, и я не знаю почему. Я бы хотел, чтобы он был изменен по высоте и сохранял соотношение сторон. 

body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: grid;
  grid-template: repeat(2, 50vh) / repeat(3, 1fr);
  background-color: #A9A9A9;
}

.wrapper>div:nth-child(even) {
  background-color: #D3D3D3;
}

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

button {
  flex: 1;
  min-height: 40px;
  background: green;
}

img {
  flex: 1;
  max-height: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div class="wrapper">
    <div class="pic1">Div2</div>
    <div class="pic2">
      <button>Div2</button>
      <img src="https://i.imgur.com/VHtXwib.jpg">
    </div>
    <div class="pic3">Div3</div>
    <div class="pic4">Div4</div>
    <div class="pic5">Div5</div>
    <div class="pic6">Div6</div>
  </div>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 05 июля 2018

Вы не можете установить минимальную высоту для кнопки в терминах, которые вы должны использовать div. Если это не вызовет странную проблему переполнения при изменении размера изображения. Взять, я пытаюсь изменить размер окна, посмотреть, если этот эффект вы хотите. 

body {
    height: 100%;
    margin: 0;
}

.wrapper {
    display: grid;
    grid-template: repeat(2, 50vh) / repeat(3, 1fr);
    background-color: #A9A9A9;
}

.wrapper div{
    width:100%;
    height:100%;
}

.wrapper > div:nth-child(even) {
    background-color: #D3D3D3;
}

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

button {
    flex: 1;
    height:30%;
    background: green;
}

img {
    flex : 1;
    max-height: 100%;
}

.custom-img{
    display:block;
    max-height:70%;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="wrapper">
        <div class="pic1">Div2</div>
        <div class="pic2">
                <button>Div2</button>
                <div class="custom-img">
                    <img src="https://i.imgur.com/VHtXwib.jpg">
                </div>
        </div>
        <div class="pic3">Div3</div>
        <div class="pic4">Div4</div>
        <div class="pic5">Div5</div>
        <div class="pic6">Div6</div>
    </div>
</body>
</html>
0 голосов
/ 05 июля 2018

Поскольку вы установили свою кнопку min-height: 40px, когда CSS применяет img max-height: 100%, она фактически получает родительский размер, а не уменьшает кнопку 40px.

Вы можете установить max-height: calc(100% - 40px);, который будет применять родительскую высоту 100% минус 40 пикселей кнопки. 

body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: grid;
  grid-template: repeat(2, 50vh) / repeat(3, 1fr);
  background-color: #A9A9A9;
}

.wrapper>div:nth-child(even) {
  background-color: #D3D3D3;
}

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

button {
  flex: 1;
  min-height: 40px;
  background: green;
}

img {
  flex: 1;
  max-height: calc(100% - 40px);
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div class="wrapper">
    <div class="pic1">Div2</div>
    <div class="pic2">
      <button>Div2</button>
      <img src="https://i.imgur.com/VHtXwib.jpg">
    </div>
    <div class="pic3">Div3</div>
    <div class="pic4">Div4</div>
    <div class="pic5">Div5</div>
    <div class="pic6">Div6</div>
  </div>
</body>

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

Похожие темы

...