programing

플렉스박스 : 1열 4개

itmemos 2023. 10. 29. 19:02
반응형

플렉스박스 : 1열 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(출처).이것이 어떤 경우에는 물건들이 포장되어 격자를 형성하지 않는 이유입니다.

이 경우 가장 큰 문제는flex-grow: 1플렉스 아이템에.

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

좀 더 구체적으로 말하자면, 당신의 컨테이너에는 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-basis25%가 됩니다. 즉, 마진으로 인해 실제로 한 행에 세 개의 항목이 발생합니다.

부터.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);
}

여기 또 다른 접근법이 있습니다.

다음과 같은 방법으로도 달성할 수 있습니다.

.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

음의 마진을 사용하고 시궁창을 계산하는 방식으로 이렇게 하겠습니다.

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

자세한 내용은 다음 링크를 참조할 수 있습니다.

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

.parent .child{ 
  flex: 1 1 25%;
  /*Start Run Code Snippet output CSS*/
  padding: 5px; 
  box-sizing: border-box;
  text-align: center;
  border: 1px solid #000;
  /*End Run Code Snippet output CSS*/
}
<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

저는 이 예가 @dowomenfart보다 더 맨발이고 이해하기 쉽다고 생각합니다.

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

이렇게 하면 고기를 바로 자르면서 같은 폭을 계산할 수 있습니다.수학은 훨씬 쉽고 그리고em는 확장성과 모바일 친화성 때문에 새로운 표준입니다.

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

;)

플렉스 랩 + 마이너스 마진

유연성 대.display: inline-block?

왜 마이너스죠?

에지 케이스(열의 첫 번째 요소)에 SCSS 또는 CSS-in-JS를 사용하거나 기본 마진을 설정하고 나중에 외부 마진을 제거합니다.

실행

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

이거 드셔보세요.

.parent-wrapper {
    height:100%;
    width:100%;
    border: 1px solid black;
}
.parent {
    display: grid;
    font-size: 0;
    grid-template-columns: 25% 25% 25% 25%;
}
.child {
    background:blue;
    flex-grow: 1;
    height:100px;
    margin: 10px;
    margin-bottom: 0;
}

.child:last-child {
    margin-bottom: 10px;
}
<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>

https://jsfiddle.net/samet19/gdntwLhb/

사용하지 않는 다른 방법이 있습니다.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!

그것이 전부입니다.좀 더 심미적인 사이즈를 얻기 위해서는 입체감으로 멋을 낼 수 있지만, 이것이 아이디어입니다.

언급URL : https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row

반응형

'programing' 카테고리의 다른 글

아바다 테마에 jQuery 코드를 삽입하는 방법은?  (0) 2023.10.29
detach(), hide() 및 remove()의 차이점 - jQuery  (0) 2023.10.29
MySQL Workbench EER 다이어그램 테이블 색상 변경  (0) 2023.10.29
sqlddeveloper의 여러 오라클 연결에서 쿼리  (0) 2023.10.29
페이지 스크롤에서 활성 메뉴 항목을 변경하시겠습니까?  (0) 2023.10.29

'programing'의 다른글

  • 현재글플렉스박스 : 1열 4개

관련글

댓글

티스토리툴바