Pertanyaan yang diberi tag «flexbox»

Untuk mengatur jarak minimal antara item-item flexbox yang saya gunakan margin: 0 5pxdi .itemdan margin: 0 -5pxdi wadah. Bagi saya, ini seperti retasan, tetapi saya tidak dapat menemukan cara yang lebih baik untuk melakukan ini. Contoh #box { display: flex; width: 100px; margin: 0 -5px; } .item { background: gray; …

781 css  flexbox 

Apakah ada cara flexbox-ish yang lebih baik untuk meluruskan "Kontak" daripada menggunakan position: absolute? .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> <div class="a"><a …

682 html  css  flexbox 

Pertimbangkan sumbu utama dan sumbu silang wadah fleksibel: Sumber: W3C Untuk menyelaraskan item fleksibel di sepanjang sumbu utama ada satu properti: justify-content Untuk menyelaraskan item fleksibel di sepanjang sumbu silang ada tiga properti: align-content align-items align-self Pada gambar di atas, sumbu utama adalah horisontal dan sumbu silang vertikal. Ini adalah …

678 css  flexbox  language-lawyer  w3c 

Cara memusatkan div secara horizontal, dan vertikal di dalam wadah menggunakan flexbox. Dalam contoh di bawah ini, saya ingin setiap angka di bawah satu sama lain (dalam baris), yang dipusatkan secara horizontal. .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: …

672 html  css  flexbox 

Saya mencoba mengisi ruang vertikal item fleksibel di dalam Flexbox. .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } <div class="container"> <div class="flex-1"></div> …

459 css  flexbox 

Saya memiliki dua divs berdampingan. Saya ingin ketinggian mereka sama, dan tetap sama jika salah satu dari mereka mengubah ukuran. Saya tidak tahu yang satu ini. Ide ide? Untuk memperjelas pertanyaan saya yang membingungkan, saya ingin kedua kotak selalu berukuran sama, jadi jika salah satu tumbuh karena teks ditempatkan ke …

442 html  css  html-table  flexbox 

Saya ingin menggunakan flexbox untuk meluruskan beberapa konten secara vertikal di dalam <li>tetapi tidak memiliki kesuksesan besar. Saya telah memeriksa online dan banyak tutorial yang benar-benar menggunakan pembungkus div yang mendapatkan align-items:centerdari pengaturan fleksibel pada induknya, tapi saya bertanya-tanya apakah mungkin untuk memotong elemen tambahan ini? Saya telah memilih untuk …

424 html  css  flexbox 

Saya ingin memiliki 3 divs disejajarkan di dalam wadah div, sesuatu seperti ini: [[LEFT] [CENTER] [RIGHT]] Wadah penampung 100% lebar (tidak ada set lebar), dan pusat div harus tetap di tengah setelah mengubah ukuran wadah. Jadi saya mengatur: #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} Tapi itu menjadi: [[LEFT] [CENTER] ] [RIGHT] …

392 html  css  flexbox  alignment  css-float 

Saya memiliki tata letak kotak fleksibel sederhana dengan wadah seperti: .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } Sekarang saya ingin item di baris terakhir disejajarkan dengan yang lain. justify-content: space-between;harus digunakan karena lebar dan tinggi kisi dapat disesuaikan. Saat ini sepertinya Di sini, saya ingin item di …

379 css  flexbox  grid-layout 

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

375 html  css  flexbox 

Mencoba flexbox nav yang memiliki hingga 5 item dan hanya 3, tetapi tidak membagi lebar secara merata di antara semua elemen. Biola Tutorial yang saya modelkan setelah ini adalah http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/ KELANCANGAN * { font-size: 16px; } .tabs { max-width: 1010px; width: 100%; height: 5rem; border-bottom: solid 1px grey; margin: 0 …

368 html  css  flexbox 

Adakah yang bisa menunjukkan perbedaan antara align-itemsdan align-content?

366 css  layout  flexbox  alignment 

Bagaimana cara menyelaraskan item navbar ke kanan? Saya ingin memiliki login dan mendaftar di sebelah kanan. Tapi semua yang saya coba sepertinya tidak berhasil. Inilah yang saya coba sejauh ini: <div>sekitar <ul>dengan atribut:style="float: right" <div>sekitar <ul>dengan atribut:style="text-align: right" mencoba kedua hal itu pada <li>tag mencoba semua hal itu lagi dengan …

342 css  twitter-bootstrap  flexbox  bootstrap-4  navbar 

Saya mencoba menyelaraskan elemen secara vertikal dalam pembungkus ID. Saya memberikan properti display:inline-flex;ke ID ini karena pembungkus ID adalah wadah fleksibel. Tetapi tidak ada perbedaan dalam presentasi. Saya berharap semua yang ada di ID pembungkus akan ditampilkan inline. Kenapa tidak? #wrapper { display: inline-flex; /*no difference to display:flex; */ } …

331 css  flexbox 

Saya mencoba memusatkan Container saya di tengah halaman menggunakan Bootstrap 4. Saya sejauh ini tidak berhasil. Bantuan apa pun akan dihargai. Saya telah membangunnya di Codepen.io sehingga kalian dapat bermain dengannya dan biarkan saya tahu apa yang berhasil karena saya kehabisan ide ... Tampilkan cuplikan kode var currentAuthor = ""; …

322 html  css  twitter-bootstrap  flexbox  bootstrap-4