flexbox와 요소를 아래쪽에 정렬 | |paragraph text

나는 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로 달성 할 수 있다고 들었지만 작동하지 않습니다.

답변

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

를 통해 정렬하기 이전 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>
스 니펫 확장

답변

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

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

.container {
  display: flex;
}

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

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

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

이 JSFiddle을 확인하십시오

답변

와 함께 해결책이 효과 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는 확실하지 않지만 position 속성을 사용하면됩니다.

세트 부모 div position: relative
수 있습니다 및 하위 요소 <p>또는 <h1>등 세트 position: absolute와 bottom: 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;
}

코드 펜은 여기

답변

<section style="display:flex; flex-wrap:wrap;">
    <div style="display:flex; flex-direction:column; flex:1;">
        <button style="margin-top: auto;"/>
    </div>
    <div style="display:flex; flex-direction:column; flex:1;">
        <button style="margin-top: auto;"/>
    </div>
</section>

데모 : https://codepen.io/ferittuncer/pen/YzygpWX

답변

디스플레이를 flex로 설정 하면 flex속성을 사용하여 확장 할 수있는 콘텐츠와 만들 수없는 콘텐츠를 표시 할 수 있습니다.

플렉스 속성

div.content {
 height: 300px;
 display: flex;
 flex-direction: column;
}

div.up {
  flex: 1;
}

div.down {
  flex: none;
}
<div class="content">
  <div class="up">
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <p>Some more or less text</p>
  </div>

  <div class="down">
    <a href="/" class="button">Click me</a>
  </div>
</div>
스 니펫 확장

답변

이 시도

.content {
      display: flex;
      flex-direction: column;
      height: 250px;
      width: 200px;
      border: solid;
      word-wrap: break-word;
    }

   .content h1 , .content h2 {
     margin-bottom: 0px;
    }

   .content p {
     flex: 1;
    }
   <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>
스 니펫 확장