Sejajarkan elemen ke bawah dengan flexbox

375

Saya punya divbeberapa anak:

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

dan saya ingin tata letak berikut:

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

Terlepas dari berapa banyak teks di dalam psaya ingin tetap .buttonselalu di bagian bawah tanpa mengeluarkannya dari arus. Saya pernah mendengar ini bisa dicapai dengan Flexbox tetapi saya tidak bisa membuatnya berfungsi.

supersize
sumber
7
Berikan saja postition: absolute; bottom 0;?
Jonathan
12
@ Jonathan bungkusnya tidak memiliki ketinggian tetap. Jika saya mengeluarkannya, itu akan tumpang tindih dengan teks
supersize
2
@supersize Q lama tapi Anda bisa memberikan pembungkus position:relative- itu konyol karena saya pikir itu relatif secara default tetapi Anda telah SET agar posisi absolut anak terkandung. Maka bottom:0akan cocok siram.
Jacksonkr
Jacksonkr benar, ini adalah solusi TERBAIK, yang lain terlalu panjang, terlalu berbelit-belit atau tidak berfungsi dengan benar
Barbz_YHOOL
2
@Jacksonkr posisi default div statictidak relative.
supersize

Jawaban:

641

Anda dapat menggunakan margin otomatis

Sebelum penyelarasan melalui justify-contentdan align-self, setiap ruang bebas positif didistribusikan ke margin otomatis di dimensi itu.

Jadi, Anda dapat menggunakan salah satu dari ini (atau keduanya):

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

Atau, Anda dapat membuat elemen sebelum atumbuh untuk mengisi ruang yang tersedia:

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

Oriol
sumber
2
Bagi saya, ini berfungsi di Chrome, tetapi tidak di Safari di iOS 10.2. Adakah yang bisa mengkonfirmasi?
Matius
@Oriol Saya suka pendekatan ini, tetapi bukan efek samping dari kehilangan margin yang runtuh, apa yang akan Anda lakukan tentang ini?
Neil
11
flex-grow bekerja untuk saya. Begini cara saya melakukannyahtml { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } #site-content { flex: 1; }
protoEvangelion
2
Juga catatan tambahan, ingatlah height: 100%pada elemen induk yang Anda coba dorong sesuatu ke bawahmargin-top: auto;
skolind
1
"Setiap ruang bebas positif didistribusikan ke margin otomatis di dimensi itu." itu hal-hal kecil seperti ini yang sangat elegan, bagi saya solusi ini adalah 2 baris kode berdasarkan jawaban Anda. terima kasih :)
danjah
146

Anda dapat menggunakan display: flex untuk memposisikan elemen ke bawah, tetapi saya tidak berpikir Anda ingin menggunakan flex dalam hal ini, karena itu akan mempengaruhi semua elemen Anda.

Untuk memposisikan elemen ke bawah menggunakan flex coba ini:

.container {
  display: flex;
}

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

Taruhan terbaik Anda adalah mengatur posisi: absolut ke tombol dan mengaturnya bottom: 0, atau Anda dapat menempatkan tombol di luar wadah dan menggunakan negatif transform: translateY(-100%)untuk membawanya dalam wadah seperti ini:

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

Periksa JSFiddle ini

Roumelis George
sumber
6
jika Anda menginginkannya di bagian bawah, pastikan untuk mengatur arah fleksibel ke kolom.
Viliami
3
Bagaimana jika saya tidak dapat memberikan ketinggian?
Tandai
Apa yang berhasil untuk saya adalah: `` `. content {display: flex; arah fleksibel: kolom; justify-content: flex-end; } <div class = "content"> <a class="bottom"> Sesuatu </a> </div> `` `
gsalgadotoledo
84

Solusi dengan align-self: flex-end;tidak bekerja untuk saya tetapi yang ini jika Anda ingin menggunakan flex:

Hasil

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

Kode

Catatan: Saat "menjalankan cuplikan kode" Anda harus menggulir ke bawah untuk melihat tautan di bagian bawah.

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

Timo
sumber
1
konten adalah wadah kolom yang menampung 2 wadah lainnya, dengan konten-justify: space-between; Anda memberi tahu flexbox untuk mendorong wadah menjauh satu sama lain sebanyak mungkin (dalam hal ini dibatasi oleh ketinggian wadah konten)
ConquerorsHaki
itu bukan hasil nyata, itu akan memiliki ruang antara setiap item (maka namanya)
Barbz_YHOOL
1
@Barbz_YHOOL Tidak, ini berfungsi jika Anda menambah tinggi kontainer (lihat contoh yang diperbarui)
Timo
1
Setelah mencari banyak, ini sempurna! Terima kasih.
Rudy
1
Dengan sedikit modifikasi, jawaban ini bekerja sempurna untuk saya, terima kasih
RealMJDev
2

Tidak yakin tentang flexbox tetapi Anda dapat menggunakan properti posisi.

set div position: relative elemen induk dan anak yang mungkin berupa <p>atau <h1>dll. set position: absolutedan bottom: 0.

Contoh:

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

Pena kode di sini.

Sanjay Shr
sumber
1
position:fixedtidak akan bekerja karena itu tidak akan relatif terhadap wadah yang ada di dalamnya. Mungkin maksud Anda position:absolute?
Sensoray
1
Sementara kode ini dapat menjawab pertanyaan, memberikan konteks tambahan tentang mengapa dan / atau bagaimana kode ini menjawab pertanyaan meningkatkan nilai jangka panjangnya.
rollstuhlfahrer
1
Jawaban yang diperbarui.
Sanjay Shr
1

masukkan deskripsi gambar di sini

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

Demo: https://codepen.io/ferittuncer/pen/YzygpWX

ferit
sumber
0

Saat mengatur tampilan Anda agar fleksibel , Anda bisa menggunakan flexproperti untuk menandai konten mana yang dapat tumbuh dan konten mana yang tidak bisa.

Properti fleksibel

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>

Tomas Vancoillie
sumber
-1

Coba ini

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

mohxn ayaz
sumber
-1

Saya baru saja menemukan solusi untuk ini.

bagi mereka yang tidak puas dengan jawaban yang diberikan dapat mencoba pendekatan ini dengan flexbox

CSS

    .myFlexContainer {
        display: flex;
        width: 100%;
    }

    .myFlexChild {
        width: 100%;
        display: flex;

        /* 
         * set this property if this is set to column by other css class 
         *  that is used by your target element 
         */
        flex-direction: row;

        /* 
         * necessary for our goal 
         */
        flex-wrap: wrap;
        height: 500px;
    }

    /* the element you want to put at the bottom */
    .myTargetElement {
        /*
         * will not work unless flex-wrap is set to wrap and 
         * flex-direction is set to row
         */
        align-self: flex-end;
    }

HTML

    <div class="myFlexContainer">
        <div class="myFlexChild">
            <p>this is just sample</p>
            <a class="myTargetElement" href="#">set this to bottom</a>
        </div>
    </div>
aj pergi
sumber