Сделать CSS flexbox шириной его внутренних элементов - PullRequest
Новая
       8

Сделать CSS flexbox шириной его внутренних элементов

0 голосов
/ 28 октября 2018

В этом jsfiddle http://jsfiddle.net/54rp7x29/ я установил flexbox для хранения элементов фиксированной ширины.Но внешний элемент container шире, чем элементы внутри него.Как я могу установить его не больше, чем нужно?И всегда быть не больше, чем нужно при изменении размера экрана (что приведет к тому, что больше или меньше элементов flexbox окажутся в одной строке)?

Это HTML: 

<div id="container">
  <div id="content"></div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Это css: 

html {
  max-width: 60%;
}

#content {
  background-color: green;
  height: 20px;
}

#container {
  background-color: yellow;
}

#container>div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#container>div>div {
  width: 80px;
  height: 100px;
  background-color: gray;
  margin: 3px;
}

Ответы [ 2 ]

0 голосов
/ 28 октября 2018

Я хочу удалить внешнее желтое пространство, если хотите, добавьте display: table; в контейнере.

0 голосов
/ 28 октября 2018

Надеюсь, это то, что вы ищете?здесь только что я удалил HTML-тег из CSS.если еще, пожалуйста, дайте мне знать 

<!DOCTYPE html> 
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    #content {
        background-color: green;
        height: 20px; 
    }
    #container {
        display: inline-block;
        background-color: yellow;
    }
    #container>div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #container>div>div {
        width: 80px;
        height: 100px;
        background-color: gray;
        margin: 3px;
    }
    </style>
</head>
<body>
    <div id="container">
    <div id="content"></div>
    <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div> 
    </div>
</body>

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

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

...