Korzystam z okna elastycznego, aby wyświetlić 8 elementów, które będą dynamicznie zmieniać rozmiar na mojej stronie. Jak zmusić go do podzielenia przedmiotów na dwa rzędy? (4 na rząd)?

Oto odpowiedni wycinek:

(Lub jeśli wolisz jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/ )

.parent-wrapper {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}
.parent {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
}
.child {
  display: inline-block;
  background: blue;
  margin: 10px 0 0 10px;
  flex-grow: 1;
  height: 100px;
}

<body>
  <div class="parent-wrapper">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</body>

Masz flex-wrap: wrapna pojemniku. To dobrze, ponieważ zastępuje wartość domyślną, którą jest nowrap( źródło ). Z tego powodu w niektórych przypadkach elementy nie są zawijane, aby utworzyć siatkę .

W tym przypadku głównym problemem są flex-grow: 1elementy elastyczne.

flex-growNieruchomość nie faktycznie wielkości flex przedmiotów. Jego zadaniem jest dystrybucja wolnej przestrzeni w kontenerze ( źródle ). Niezależnie od tego, jak mały jest rozmiar ekranu, każdy element otrzyma proporcjonalną część wolnego miejsca w wierszu.

Mówiąc dokładniej, w twoim pojemniku znajduje się osiem elastycznych przedmiotów. Z flex-grow: 1, każdy otrzymuje 1/8 wolnego miejsca na linii. Ponieważ w twoich przedmiotach nie ma treści, mogą się one zmniejszyć do zera i nigdy się nie zawiną.

Rozwiązaniem jest zdefiniowanie szerokości elementów. Spróbuj tego:

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 21%; /* explanation below */
  margin: 5px;
  height: 100px;
  background-color: blue;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Po flex-grow: 1zdefiniowaniu w flexskrócie nie ma potrzeby, flex-basisaby wynosić 25%, co w rzeczywistości spowodowałoby trzy pozycje z rzędu ze względu na marginesy.

Ponieważ flex-growzajmie wolne miejsce w rzędzie, flex-basismusi być wystarczająco duże, aby wymusić zawijanie. W tym przypadku z flex-basis: 21%marginesami jest dużo miejsca, ale nigdy nie ma wystarczającej ilości miejsca na piąty przedmiot.

Dodaj szerokość do .childelementów. Osobiście użyłbym wartości procentowych, margin-leftjeśli chcesz mieć zawsze 4 na wiersz.

PRÓBNY

.child {
    display: inline-block;
    background: blue;
    margin: 10px 0 0 2%;
    flex-grow: 1;
    height: 100px;
    width: calc(100% * (1/4) - 10px - 1px);
}

Oto kolejny aplet.

Możesz to zrobić również w ten sposób:

.parent{
  display: flex;
  flex-wrap: wrap;
}

.child{
  width: 25%;
  box-sizing: border-box;
}

Przykład: https://codepen.io/capynet/pen/WOPBBm

I bardziej kompletna próbka: https://codepen.io/capynet/pen/JyYaba

Zrobiłbym to w ten sposób, używając ujemnych marginesów i obliczeń dla rynien:

.parent {
  display: flex;
  flex-wrap: wrap;
  margin-top: -10px;
  margin-left: -10px;
}

.child {
  width: calc(25% - 10px);
  margin-left: 10px;
  margin-top: 10px;
}

Demo: https://jsfiddle.net/9j2rvom4/

Alternatywna metoda siatki CSS:

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

Demo: https://jsfiddle.net/jc2utfs3/

<style type="text/css">
.parent{
    display: flex;
    flex-wrap: wrap;
}
.parent .child{
    flex: 1 1 25%;
}
</style>    
<div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>

Mam nadzieję, że to pomoże. po więcej szczegółów możesz skorzystać z tego linku

Uważam, że ten przykład jest bardziej prosty i łatwiejszy do zrozumienia niż @dowomenfart.

.child {
    display: inline-block;
    margin: 0 1em;
    flex-grow: 1;
    width: calc(25% - 2em);
}

Dokonuje się tych samych obliczeń szerokości podczas cięcia bezpośrednio do mięsa. Matematyka jest znacznie łatwiejsza i emjest nowym standardem ze względu na skalowalność i łatwość obsługi mobilnej.

.parent-wrapper {
	height: 100%;
	width: 100%;
	border: 1px solid black;
}
	.parent {
	display: flex;
	font-size: 0;
	flex-wrap: wrap;
	margin-right: -10px;
	margin-bottom: -10px;
}
	.child {
	background: blue;
	height: 100px;
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: calc(25% - 10px);
}
	.child:nth-child(even) {
	margin: 0 10px 10px 10px;
	background-color: lime;
}
	.child:nth-child(odd) {
	background-color: orange; 
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	</style>
</head>
<body>
  <div class="parent-wrapper">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</body>
</html>

;)

Flex wrap + ujemny margines

Dlaczego Flex vs. display: inline-block?

• Flex zapewnia większą elastyczność dzięki doborowi elementów
• Wbudowane składanie białych odstępów (patrz 3 wstawki blokowe o szerokości dokładnie 33%, nie pasujące do elementu nadrzędnego )

Dlaczego marża ujemna?

Albo używasz SCSS lub CSS-in-JS dla przypadków krawędzi (tj. Pierwszy element w kolumnie), albo ustawiasz domyślny margines i pozbywasz się zewnętrznego marginesu później.

Realizacja

https://codepen.io/zurfyx/pen/BaBWpja

<div class="outerContainer">
    <div class="container">
        <div class="elementContainer">
            <div class="element">
            </div>
        </div>
        ...
    </div>
</div>

:root {
  --columns: 2;
  --betweenColumns: 20px; /* This value is doubled when no margin collapsing */
}

.outerContainer {
    overflow: hidden; /* Hide the negative margin */
}

.container {
    background-color: grey;
    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * var(--betweenColumns));
}

.elementContainer {
    display: flex; /* To prevent margin collapsing */
    width: calc(1/var(--columns) * 100% - 2 * var(--betweenColumns));
    margin: var(--betweenColumns);
}

.element {
    display: flex;
    border: 1px solid red;
    background-color: yellow;
    width: 100%;
    height: 42px;
}

Oto inny sposób bez użycia calc().

// 4 PER ROW
// 100 divided by 4 is 25. Let's use 21% for width, and the remainder 4% for left & right margins...
.child {
  margin: 0 2% 0 2%;
  width: 21%;
}

// 3 PER ROW
// 100 divided by 3 is 33.3333... Let's use 30% for width, and remaining 3.3333% for sides (hint: 3.3333 / 2 = 1.66666)
.child {
  margin: 0 1.66666% 0 1.66666%;
  width: 30%;
}

// and so on!

To wszystko. Możesz uzyskać wymyślne wymiary, aby uzyskać bardziej estetyczne rozmiary, ale taki jest pomysł.