플렉스 컨테이너의 높이 행이 같음
는.list-items 번째row같은 것을 가지다height. 하지만 두번째에 있는 아이템들은row다가 heights. 나는 모든 아이템이 유니폼을 입었으면 합니다.height.
고정 높이를 제공하지 않고 플렉스박스만 사용하지 않고 이를 달성할 수 있는 방법이 있습니까?
나의 ㅇㅇcode
.list {
display: flex;
flex-wrap: wrap;
max-width: 500px;
}
.list-item {
background-color: #ccc;
display: flex;
padding: 0.5em;
width: 25%;
margin-right: 1%;
margin-bottom: 20px;
}
.list-content {
width: 100%;
}<ul class="list">
<li class="list-item">
<div class="list-content">
<h2>box 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h1>h1</h1>
</div>
</li>
</ul>정답은 아니오 입니다.
그 이유는 플렉스박스 사양에 나와 있습니다.
다중 라인 플렉스 컨테이너에서 각 라인의 가로 크기는 라인의 플렉스 항목을 포함하는 데 필요한 최소 크기입니다.
즉, 행 기반 플렉스 컨테이너에 여러 개의 라인이 있는 경우, 각 라인의 높이("크로스 크기")는 라인의 플렉스 항목을 포함하는 데 필요한 최소 높이입니다.
그러나 CSS 그리드 레이아웃에서는 동일한 높이의 행이 가능합니다.
그렇지 않으면 자바스크립트의 대안을 생각해보세요.
이제 이를 달성할 수 있습니다.display: grid:
.list {
display: grid;
overflow: hidden;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
grid-column-gap: 5px;
grid-row-gap: 5px;
max-width: 500px;
}
.list-item {
background-color: #ccc;
display: flex;
padding: 0.5em;
margin-bottom: 20px;
}
.list-content {
width: 100%;
}<ul class="list">
<li class="list-item">
<div class="list-content">
<h2>box 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h1>h1</h1>
</div>
</li>
</ul>그리드 자체는 플렉스박스가 아니지만 플렉스박스 컨테이너와 매우 유사하게 동작하며 그리드 내부의 항목은 플렉스박스가 될 수 있습니다.
응답 그리드를 원하는 경우에는 그리드 레이아웃도 매우 편리합니다. 다른 즉,에,의,을,하도록을 변경하면 .grid-template-columns:
grid-template-columns: repeat(1, 1fr); // 1 column
grid-template-columns: repeat(2, 1fr); // 2 columns
grid-template-columns: repeat(3, 1fr); // 3 columns
등등...
미디어 쿼리와 혼합하여 페이지 크기에 따라 변경할 수 있습니다.
안타깝게도 페이지 크기가 아닌 컨테이너 크기에 따라 열 수를 변경할 때(다시 사용할 수 있는 웹 구성 요소와 함께 사용하면 좋습니다) 브라우저에서 컨테이너 쿼리/요소 쿼리를 지원하지 않습니다.
그리드 레이아웃에 대한 자세한 정보:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
브라우저 간 그리드 레이아웃 지원:
https://caniuse.com/ #http=http-grid
플렉스박스: 모든 플렉스 아이템을 동일한 높이로 만듭니까?
하위항목에서
align-self: stretch;
또는 부모 컨테이너에
justify-content: stretch;
수평적인 문제에 대해서는 flexbox를 사용할 수 있습니다.
.flex-list {
padding: 0;
list-style: none;
display: flex;
align-items: stretch;
flex-wrap: wrap;
justify-content: center;
gap: .5rem;
}
.flex-list li {
width: 120px;
padding: .5rem;
border-radius: 1rem;
background: yellow;
}<ul class="flex-list">
<li>title 1</li>
<li>title 2</li>
<li>title 3<br>new line</li>
<li>title 4<br>new line</li>
<li>title 5<br>new<br>line</li>
<li>title 6</li>
</ul>또는 수평 및 수직 문제 모두에 대해 그리드를 사용하는 경우:
.grid-list {
padding: 0;
list-style: none;
display: grid;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
grid-template-columns: repeat(3, 1fr);
gap: .5rem;
}
.grid-list li {
padding: .5rem;
border-radius: 1rem;
background: yellow;
}
.grid-list li:last-child {
grid-column-start: 2;
} <ul class="grid-list">
<li>title 1</li>
<li>title 2<br>new<br>line</li>
<li>title 3<br>new line</li>
<li>title 4<br>new line</li><li>title 5</li>
<li>title 6<br>new<br>line</li>
<li>title 7</li>
</ul>아니요, 고정된 높이를 설정하지 않으면(또는 스크립트를 사용하지 않으면) 이를 달성할 수 없습니다.
다음은 스크립트를 사용하여 이와 같은 작업을 수행하는 방법을 보여주는 두 가지 답변입니다.
이는 부모 높이가 고정된 경우(Chrome 및 Firefox에서 테스트됨)에서 작동하는 것으로 보입니다.
.child {
height : 100%;
overflow : hidden;
}
.parent {
display: flex;
flex-direction: column;
height: 70vh; // ! won't work unless parent container height is set
position: relative;
}
만약 어떤 이유로 그리드를 사용할 수 없다면, 아마도 그것이 해결책일 것입니다.
매핑하려는 항목을 알고 있으면 한 번에 한 행씩 수행하여 이 작업을 수행할 수 있습니다.해결책인 건 알지만 효과는 있어요.
는 한각의 줄로 . 는 에 4 에 로 로 는 에 height: 50% 버리다, , , , .flex-grow,갖고 있다<RowOne />그리고.<RowTwo />일순간에<div>와 함께flex-column 하면 . 이렇게 하면 효과가 있습니다.
<div class='flexbox flex-column height-100-percent'>
<RowOne class='flex height-50-percent' />
<RowTwo class='flex height-50-percent' />
</div>
당신은 그것을 사용해야 합니다.justify-content:stretch그리고.align-items:stretch플렉스에서 합니다.
다음을 통해 이를 달성할 수 있습니다.
align-items: stretch;
이렇게 하면 모든 항목이 플렉스의 최대 높이로 요소의 높이까지 늘어납니다.
를 할 때flex-direction: row, 당신은 그것을 달성할 수 있습니다.heigh: auto항목:
.parent {
display: flex;
flex-direction: row;
}
.item {
height: auto;
}
비슷한 문제가 있었습니다. 저는 다음 CSS 코드를 사용했습니다.
.Box{
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
justify-content: center;
flex: 1;
}
하지만 화면과 높이가 달라 물건을 중앙에 배치한 것처럼 보였습니다.
그래서 사용자의 정확한 화면 높이를 알려주는 다음 코드를 사용했고 유연성 때문에 완벽하게 응답할 수 있습니다.
var r = document.querySelector(':root');
let height = $(window).height()+"px";
r.style.setProperty('--height', height);:root{
--height: 643px;
}
.Box{
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
justify-content: center;
flex: 1;
height: var(--height);
}
.btn-outline-primary{
/* border-top-left-radius: 25%;
border-top-right-radius: 25%;
border-bottom-left-radius: 25%;
border-bottom-right-radius: 25%; */
width: 100%;
border-radius: 25px;
margin: 0px 5px 5px 0px;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel='stylesheet' href='./Welcome.css'>
<title>Point Of Sale</title>
</head>
<body>
<div class="Box border ">
<h1>Welcome TO POS</h1>
<div class="">
<button type="btn" class="btn btn-outline-primary btn-lg"> Log in</button>
<button type="btn" class="btn btn-outline-primary btn-lg"> Sign in</button>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> -->
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
<script src="./Welcome.js"></script>
</body>
</html>용기의 높이가 역동적인 경우도 있습니다.Flexbox와 함께 작업하는 동안 시나리오에서 해결할 수 있는 방법은 다음과 같습니다.
- 목록 항목 안에 빈 태그를 추가합니다.
- JS를 사용하고 높이를 설정합니다(어수선).
목록 항목 안에 빈 태그 추가:
빈 예를 , 에 만 하면 하면 만 에 예를 들어, 다음과 같은 경우.<span />꼬리표를 매다
.parent {
display: flex;
}
.child {
display: inline-block;
align-self: flex-end;
}
이렇게 하면 됩니다.<span />가에 됩니다.flex-end 항목의 , 의 으로 합니다 합니다 으로 의 .그리고 모든 아이템이 같은 키로 보입니다.폭에도 동일하게 적용될 수 있습니다.
요컨대
필요에 따라 메인 플렉스 박스에 'flex-content' 또는 'flex-content'를 추가하기만 하면 됩니다.
그리고 왈라아!
"P" 태그의 높이를 고정하거나 "list-item"의 높이를 고정하여 할 수 있습니다.
"P"의 높이를 고쳐서 했습니다.
오버플로우는 숨겨야 합니다.
.list{
display: flex;
flex-wrap: wrap;
max-width: 500px;
}
.list-item{
background-color: #ccc;
display: flex;
padding: 0.5em;
width: 25%;
margin-right: 1%;
margin-bottom: 20px;
}
.list-content{
width: 100%;
}
p{height:100px;overflow:hidden;}<ul class="list">
<li class="list-item">
<div class="list-content">
<h2>box 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h1>h1</h1>
</div>
</li>
</ul> 합니다.
이것을 사용합니다.
.list-content{
width: 100%;
height:150px;
}
동일한 높이에 대해 CSS "디스플레이" 속성을 변경해야 합니다.자세한 내용은 주어진 예제를 참조하십시오.
.list{
display: table;
flex-wrap: wrap;
max-width: 500px;
}
.list-item{
background-color: #ccc;
display: table-cell;
padding: 0.5em;
width: 25%;
margin-right: 1%;
margin-bottom: 20px;
}
.list-content{
width: 100%;
}<ul class="list">
<li class="list-item">
<div class="list-content">
<h2>box 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h1>h1</h1>
</div>
</li>언급URL : https://stackoverflow.com/questions/36004926/equal-height-rows-in-a-flex-container
'programing' 카테고리의 다른 글
| 팬더 데이터 프레임의 전체 열에 값 설정 (0) | 2023.09.13 |
|---|---|
| 하나의 명령으로 모든 행을 위로 이동할 수 있는 Mariaadb UPDATE 테이블? (0) | 2023.09.13 |
| Ubuntu에서 코어 덤프 파일을 생성하는 방법 (0) | 2023.09.13 |
| mariadb - select 문이 쿼리 시간이 부정확함을 나타냅니다. (0) | 2023.09.08 |
| 인덱스 뒤에 있는 모든 항목 제거 (0) | 2023.09.08 |