html - 속성 - justify-content




flexbox와 요소를 아래쪽에 정렬 (4)

나는 아이들과 함께 div 가 있습니다.

<div class="content">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <p>Some more or less text</p>
  <a href="/" class="button">Click me</a>
</div>

다음 레이아웃을 원합니다.

 -------------------
|heading 1          |
|heading 2          | 
|paragraph text     |
|can have many      |
|rows               |
|                   |
|                   |
|                   | 
|link-button        |
 -------------------

p 에 얼마나 많은 텍스트가 있는지에 관계없이. 버튼을 흐름에서 벗어나지 않고 항상 맨 아래에 .button 싶습니다. Flexbox로 달성 할 수 있다고 들었지만 작동하지 않습니다.


display : flex를 사용하여 요소를 맨 아래에 배치 할 수 있지만이 경우 flex를 사용하고 싶지는 않습니다. 모든 요소에 영향을 미치기 때문입니다.

flex를 사용하여 요소를 맨 아래에 배치하려면 다음을 시도하십시오.

.container {
  display: flex;
}

.button {
  align-self: flex-end;
}

가장 좋은 방법은 position : 버튼에 절대 위치를 설정하고 bottom: 0 으로 설정하거나 버튼을 컨테이너 외부에 놓고 음수 transform: translateY(-100%) 을 사용하여 다음과 같이 컨테이너에 가져 오는 것입니다.

.content {
    height: 400px;
    background: #000;
    color: #fff;
}
.button {
    transform: translateY(-100%);
    display: inline-block;
}

JSFiddle 확인하십시오


flexbox는 확실하지 않지만 position 속성을 사용하면됩니다.

상위 div position: relative 설정 position: relative <p> 또는 <h1> 수있는 position: relative 및 하위 요소. 설정 position: absolutebottom: 0 .

예:

index.html

<div class="parent">
  <p>Child</p>
</div>

style.css

.parent {
  background: gray;
  width: 10%;
  height: 100px;    
  position: relative;
}
p {
  position: absolute;
  bottom: 0;
}

코드 펜은 여기


자동 여백을 사용할 수 있습니다

justify-content align-self 를 통해 정렬하기 전에 양의 여유 공간이 해당 차원의 자동 여백에 분배됩니다.

따라서 다음 중 하나 (또는 ​​둘 다)를 사용할 수 있습니다.

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
a {
  margin-top: auto;
}
<div class="content">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <p>Some text more or less</p>
  <a href="/" class="button">Click me</a>
</div>

또는 사용 가능한 공간을 채우기 위해 a 커지기 전에 요소를 만들 수 있습니다.

p { flex-grow: 1; } /* Grow to fill available space */

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
p {
  flex-grow: 1;
}
<div class="content">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <p>Some text more or less</p>
  <a href="/" class="button">Click me</a>
</div>


align-self: flex-end; 솔루션 align-self: flex-end; 나를 위해 작동하지 않았지만 flex를 사용하려는 경우를 대비 하여이 작업을 수행했습니다.

결과

 -------------------
|heading 1          |
|heading 2          | 
|paragraph text     |
|                   |
|                   |
|                   | 
|link button        |
 -------------------

암호

참고 : "코드 스 니펫을 실행할 때"아래쪽으로 링크를 보려면 아래로 스크롤해야합니다.

.content {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 300px;
}

.content .upper {
  justify-content: normal;
}

/* Just to show container boundaries */
.content .upper, .content .bottom, .content .upper > * {
  border: 1px solid #ccc;
}
<div class="content">
  <div class="upper">
	  <h1>heading 1</h1>
	  <h2>heading 2</h2>
	  <p>paragraph text</p>
  </div>

  <div class="bottom">
	  <a href="/" class="button">link button</a>
  </div>
</div>





flexbox