Programing

Flexbox : 행당 4 개 항목

lottogame 2020. 5. 15. 07:59
반응형

Flexbox : 행당 4 개 항목

플렉스 박스를 사용하여 내 페이지에 맞게 동적으로 크기를 조정할 8 개의 항목을 표시하고 있습니다. 항목을 두 개의 행으로 나누려면 어떻게합니까? (행당 4 개)?

관련 내용은 다음과 같습니다.

(아니면 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>

당신은 flex-wrap: wrap컨테이너에 있어 . 기본값 인 nowrap( source ) 를 무시하기 때문에 좋습니다 . 이 항목에서 그리드 형성하기 위해 포장하지 않는 이유는 몇 가지 사례를 .

이 경우 주요 문제는 flex-grow: 1플렉스 아이템에 있습니다.

이 flex-grow속성은 실제로 플렉스 항목의 크기를 지정하지 않습니다. 그 작업은 컨테이너 ( source ) 에 여유 공간을 분배하는 것 입니다. 따라서 화면 크기가 아무리 작아도 각 항목은 라인의 여유 공간의 비례 부분을받습니다.

보다 구체적으로, 컨테이너에는 8 개의 플렉스 아이템이 있습니다. 을 사용 flex-grow: 1하면 각 라인에 여유 공간의 1/8이 수신됩니다. 아이템에 내용이 없으므로 너비가 0으로 줄어들고 줄 바꿈되지 않습니다.

해결책은 항목의 너비를 정의하는 것입니다. 이 시도:

.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>

함께 flex-grow: 1에 정의 flex속기에 대한 필요가 없습니다 flex-basis실제로는 여백에 한 줄에 세 가지 항목을 초래할 것 25 %을 할 수는.

이후 flex-grow행의 여유 공간을 소모합니다, flex-basis단지 랩을 적용 할 충분한해야합니다. 이 flex-basis: 21%경우을 사용하면 여백을위한 충분한 공간이 있지만 다섯 번째 항목을위한 충분한 공간은 없습니다.

.child요소에 너비를 추가하십시오 . 나는 개인적으로 margin-left항상 행 당 4를 원한다면 백분율을 사용 합니다.

데모

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

여기 또 다른 apporach가 있습니다.

이 방법으로도 달성 할 수 있습니다.

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

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

샘플 : https://codepen.io/capynet/pen/WOPBBm

그리고 더 완전한 샘플 : https://codepen.io/capynet/pen/JyYaba

나는 거터에 음의 여백과 calc를 사용하여 이렇게 할 것입니다.

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

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

데모 : https://jsfiddle.net/9j2rvom4/

대체 CSS 그리드 방법 :

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

데모 : 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>

Hope it helps. for more detail you can follow this link

.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>

;)

I believe this example is more barebones and easier to understand then @dowomenfart.

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

This accomplishes the same width calculations while cutting straight to the meat. The math is way easier and em is the new standard due to its scalability and mobile-friendliness.

Flex wrap + negative margin

Why flex vs. display: inline-block?

Why negative margin?

Either you use SCSS or CSS-in-JS for the edge cases (i.e. first element in column), or you set a default margin and get rid of the outer margin later.

Implementation

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;
}

Here's another way without using 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!

That's all there is to it. You can get fancy with the dimensions to get a more aesthetic sizes but this is the idea.

참고URL : https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row

반응형

'Programing' 카테고리의 다른 글

원래 배열을 변경하지 않고 어떻게 배열을 정렬 할 수 있습니까?  (0) 2020.05.15
SVN 작업 디렉토리에서 모든 변경 사항을 제거하려면 어떻게해야합니까?  (0) 2020.05.15
얕은 복사, 딥 카피 및 일반 할당 작업의 차이점은 무엇입니까?  (0) 2020.05.15
ASP.NET MVC Html.ValidationSummary (true)는 모델 오류를 표시하지 않습니다  (0) 2020.05.15
JavaScript 객체 변수에 추가 할 동적 키를 작성하는 방법  (0) 2020.05.15

'Programing'의 다른글

  • 현재글Flexbox : 행당 4 개 항목

관련글

댓글

티스토리툴바