html 속성 - flexbox를 사용하여 요소를 아래쪽에 맞 춥니 다.




단점 사용법 (5)

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

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

.container {
  display: flex;
}

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

가장 좋은 방법은 position : absolute를 버튼에 설정하고 bottom: 0 설정하는 것입니다 bottom: 0 또는 컨테이너 외부에 버튼을 배치하고 negative transform: translateY(-100%) 를 사용하여 다음과 같이 컨테이너에 가져올 수 있습니다.

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

JSFiddle 확인

나는 몇몇 아이들과 가진 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 , .button 에서 .button 않고 항상 맨 아래에 .button 싶습니다. 나는 이것이 Flexbox로 달성 할 수 있다고 들었지만 작동시키지 못한다.


귀하의 유스 케이스에, 그냥이 일을 할 것입니다

.content {  
  display: flex;
  flex-direction: column;
}
p {
  flex-grow: 1;
}

화면 하단에 버튼을 붙이고 싶다면 이렇게 할 수 있습니다.

.content{
  display: flex;
  flex-direction: column; 
}
.content a{
  position: fixed;
  bottom: 0;
}

codepen


align-self: flex-end; 있는 솔루션 align-self: flex-end; 나를 위해 작동하지 않았지만 당신이 flex를 사용하고자 할 때를 대비해이 작업을 수행했습니다.

CSS

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

HTML

<div class="content">
  <div>
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <p>Some more or less text</p>
  </div>

  <div>
    <a href="/" class="button">Click me</a>
  </div>
</div>

결과 :

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

이 시도

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


span6 에 대한 스타일을 추가해야합니다.

.row-fluid .span6 {
  display: table-cell;
  vertical-align: bottom;
  float: none;
}

그리고 이것은 당신의 바이올린입니다 : http://jsfiddle.net/sgB3T/





html css flexbox