จะจัดแนวรายการยืดหยุ่นได้อย่างไร

681

มีวิธี flexbox-ish มากขึ้นในการจัดแนว "ที่อยู่ติดต่อ" ทางด้านขวามากกว่าที่จะใช้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 href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <!--<div class="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>

ขยายตัวอย่างข้อมูล

http://jsfiddle.net/vqDK9/

html css flexbox

— มาร์คโบลเดอร์
แหล่งที่มา

2

คุณสามารถใช้สิทธิ์ลอยได้ แต่มันก็เป็นเช่นเดียวกัน ... ! วิธีที่ดีที่สุดคือใช้ตารางแสดงผลที่มีการจัดแนวข้อความ

— โยฮันน์ Tilotti

แน่นอนว่าถ้าดีกว่า ยังคงมีปัญหาในการจัดตำแหน่ง "ติดต่อ" ทางขวา: jsfiddle.net/vqDK9/1

— Mark Boulder

2

ฉันอัพเดตซอของคุณแล้วjsfiddle.net/vqDK9/2

— Yohann Tilotti

นี่คืออย่างน้อยสองวิธีที่จะทำ: stackoverflow.com/a/33856609/3597276

— Michael Benjamin

454

ไปเลย ตั้งjustify-content: space-betweenบนเฟล็กซ์คอนเทนเนอร์

.main { 
    display: flex; 
    justify-content: space-between;
  }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { text-align: center; }

<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
<!--     <div class="b"><a href="#">Some title centered</a></div> -->
    <div class="c"><a href="#">Contact</a></div>
</div>

ขยายตัวอย่างข้อมูล

— Kevin Suttle
แหล่งที่มา

291

หรือjustify-content: flex-end

— BT

1

ลองตั้งค่าความกว้างเป็น. c ถึง 300px ชื่อไม่อยู่กึ่งกลางอีกต่อไป ใช่แล้วนี่ตอบคำถาม แต่นี่เป็นการออกแบบที่ไม่ดีเลย

— Agamemnus

22

โปรดทราบว่าวิธีนี้อาจไม่ได้ผลตามที่คุณคาดหวังเช่นเมื่อมี.c::afterองค์ประกอบหลอก ในประสบการณ์ของฉันmargin-left: auto;เป็นวิธีที่จะไป

— จะ

13

หรือflex-flow: row-reverse;

— jchook

8

ฉันไม่เห็นว่านี่เป็นคำตอบที่ถูกต้องหากคุณไม่ต้องการจัดตำแหน่งรายการเดียวในคอนเทนเนอร์แบบยืดหยุ่น

— Foxhoundn

1097

วิธีการที่ยืดหยุ่นกว่านั้นคือการใช้autoระยะขอบซ้าย (รายการยืดหยุ่นรักษาระยะขอบอัตโนมัติแตกต่างจากเมื่อใช้ในบริบทการจัดรูปแบบบล็อก)

.c {
    margin-left: auto;
}

ซออัพเดท:

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}

<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <!--<div class="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>

ขยายตัวอย่างข้อมูล

— ไม่มีจุดหมาย
แหล่งที่มา

2

ขอบคุณ คุณต้องการใช้วิธีนี้มากกว่าวิธีแสดงบน Yohann Tilotti ด้านบนหรือไม่? ถ้าเป็นเช่นนั้นทำไม

— Mark Boulder

4

@ MarkBoulder: เพื่อเหตุผลด้านความเข้ากันได้วิธีการของเขาจะดีกว่า แต่ถ้าคุณใช้ flexbox อยู่แล้วคำตอบของฉันก็สมเหตุสมผลดีกว่า

— adrift

4

@ MarkBoulder: พวกเขาทั้งสองทำสิ่งเดียวกันในกรณีนี้ ประโยชน์จะต้องมีคุณสมบัติอื่น ๆ (และพฤติกรรม) ที่เกี่ยวข้องกับรายการดิ้นว่าวิธีตารางไม่ได้ ( flex, orderฯลฯ )

— adrift

3

หากคุณไม่สามารถล้อมรอบองค์ประกอบและคุณจำเป็นต้องลอยพูดว่าสามครั้งที่ถูกต้องให้กำหนดเป้าหมายที่ 3 จากคนสุดท้ายที่มีmargin-left: auto;สไตล์นี้เท่านั้น

— Daniel Sokolowski

2

@ จัสตินคิดออกไม่จำเป็นต้องห่อพวกเขา - ฉันไม่สามารถในกรณีของฉัน การแก้ปัญหาคือการกำหนดเป้าหมายที่ 1 margin-left: auto;ของสามรายการเท่านั้นที่มี

— Daniel Sokolowski

41

หากคุณต้องการใช้ flexbox สำหรับสิ่งนี้คุณควรจะสามารถทำได้ด้วยการทำสิ่งนี้ ( display: flexบนคอนเทนเนอร์flex: 1บนไอเท็มและtext-align: rightบน.c):

.main { display: flex; }
.a, .b, .c {
    background: #efefef;
    border: 1px solid #999;
    flex: 1;
}
.b { text-align: center; }
.c { text-align: right; }

... หรืออีกวิธีหนึ่ง (ง่ายยิ่งกว่า) หากรายการไม่ต้องการพบคุณสามารถใช้justify-content: space-betweenบนคอนเทนเนอร์และลบtext-alignกฎโดยสมบูรณ์:

.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }

นี่คือตัวอย่างของ Codepen เพื่อให้คุณลองได้อย่างรวดเร็ว

— นิคเอฟ
แหล่งที่มา

2

space-betweenเป็นสิ่งที่ฉันกำลังมองหาขอบคุณ!

— Eddie Fletcher

เส้นขอบหายไปเมื่อใช้คำแนะนำที่สองพฤติกรรมที่คาดหวัง codepen.io/oshihirii/pen/RygKRd

— user1063287

38

คุณยังสามารถใช้ฟิลเลอร์เพื่อเติมพื้นที่ที่เหลือ

<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

.filler{
    flex-grow: 1;
}

ฉันได้อัพเดตโซลูชันด้วย 3 เวอร์ชันที่แตกต่างกันแล้ว เนื่องจากการอภิปรายความถูกต้องของการใช้องค์ประกอบฟิลเลอร์เพิ่มเติม หากคุณเรียกใช้โค้ดที่ตัดแล้วคุณจะเห็นว่าโซลูชันทั้งหมดทำสิ่งต่าง ๆ ตัวอย่างเช่นการตั้งค่าคลาสฟิลเลอร์ในรายการ b จะทำให้รายการนี้เติมพื้นที่ที่เหลือ นี่เป็นข้อดีที่ไม่มีพื้นที่ 'ตาย' ที่ไม่สามารถคลิกได้

<div class="mainfiller">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<div class="mainfiller">
    <div class="a"><a href="#">Home</a></div>
    <div class="filler b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>



<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>

ขยายตัวอย่างข้อมูล

— อาร์โน
แหล่งที่มา

3

ในที่สุดคนที่เข้าใจ flexbox

— Kokodoko

9

@Kokodoko ใช่โดยใช้องค์ประกอบ html ที่ไม่ใช่ความหมายอีกหนึ่งรายการเพื่อย้ายองค์ประกอบอื่นคือส่วนบนสุดของ flexbox ที่เข้าใจ ...

— Zanshin13

@ Zanshin13 คำตอบอื่น ๆ ทั้งหมดเขียน css พิเศษมากจนคุณอาจจะทิ้งภาชนะบรรจุที่ยืดหยุ่นและเขียนโค้ดให้ครบทุกอย่างด้วยตัวคุณเอง :)

— Kokodoko

2

@ Kokodoko justify-content: space-betweenเป็น "มาก" CSS อย่างจริงจัง? ไม่จำเป็นต้องมีความคิดเห็นเพิ่มเติม (แต่ถ้าคุณต้องการ - ยินดีต้อนรับสู่การแชท) คำตอบนี้มีสิทธิ์ที่จะอยู่ที่นี่เพราะมันเป็นทางออก แต่ไม่ดีที่สุดอย่างแน่นอน Idk บางทีคุณอาจไม่ได้สังเกต แต่ css ส่วนใหญ่จากคำตอบอื่นเป็นของ OP และคำตอบจริง ๆ แล้วลดจำนวน css ของผู้เขียน (เล็กน้อย) คำตอบนี้ไม่มี css น้อยกว่าและอื่น ๆ (จะไม่ทำงานหากไม่มี css ของ OP - jsfiddle.net/63ma3b56 ) แต่มันมีองค์ประกอบ HTML อีกหนึ่งองค์ประกอบ

— Zanshin13

32

หรือคุณสามารถใช้ justify-content: flex-end

.main { display: flex; }
.c { justify-content: flex-end; }

— Melchia
แหล่งที่มา

3

justify-contentเป็นแอตทริบิวต์ของดิ้นตู้คอนเทนเนอร์, ดูคริส Coyer ของ cheatsheet Flexy: css-tricks.com/snippets/css/a-guide-to-flexbox

— Klaas แวนเดอร์ Weij

1

นี่เป็นทางออกเดียวในหน้านี้ที่เหมาะกับฉัน

— 2847376

19

ง่ายเหมือน

.main {
    display: flex;
    flex-direction:row-reverse;
}

— Cesco
แหล่งที่มา

12

เพิ่มคลาส CSS ต่อไปนี้ในสไตล์ชีตของคุณ:

.my-spacer {
    flex: 1 1 auto;
}

วางองค์ประกอบที่ว่างเปล่าระหว่างองค์ประกอบทางด้านซ้ายและองค์ประกอบที่คุณต้องการจัดแนวขวา:

<span class="my-spacer"></span>

— andreisrob
แหล่งที่มา

สำหรับผู้ที่ไม่เพียง แต่ต้องการจัดตำแหน่งองค์ประกอบเดียว แต่อาจต้องการจัดตำแหน่งองค์ประกอบหนึ่งและให้จัดแนวองค์ประกอบด้านขวา (ภายในเค้าโครงแบบเฟล็กซ์เดียวกัน) นี่คือวิธีที่จะไป!

— อาจารย์เจมส์

8

หากคุณต้องการจัดแนวรายการหนึ่งรายการ (เช่นส่วนหัว) แต่หลังจากนั้นหลายรายการจัดชิดขวา (เช่น 3 ภาพ) จากนั้นคุณจะทำสิ่งนี้:

h1 {
   flex-basis: 100%; // forces this element to take up any remaining space
}

img {
   margin: 0 5px; // small margin between images
   height: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size
}

นี่คือสิ่งที่จะมีลักษณะ (เฉพาะ CSS relavent ที่รวมอยู่ในข้อมูลโค้ดด้านบน)

— TetraDev
แหล่งที่มา

6

'justify-content: flex-end' ทำงานภายในคอนเทนเนอร์ของกล่องราคา

.price-box {
    justify-content: flex-end;
}

— โมฮัมหมัด Adeel
แหล่งที่มา

4

ฉันพบว่าการเพิ่ม 'justify-content: flex-end' ลงใน flex container แก้ปัญหาในขณะที่ 'justify-content: space-between' ไม่ทำอะไรเลย

— คืน
แหล่งที่มา

2

สำหรับผู้ที่ใช้ Angular และ Flex-Layout ให้ใช้สิ่งต่อไปนี้บนคอนเทนเนอร์ flex-item:

<div fxLayout="row" fxLayoutAlign="flex-end">

ดูเอกสาร fxLayoutAlign ที่นี่และเอกสาร fxLayout เต็มรูปแบบที่นี่

— Lindauson
แหล่งที่มา

0

โค้ดตัวอย่างตามคำตอบโดย TetraDev

รูปภาพด้านขวา:

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
}

img {
  margin: 0 5px;
  height: 30px;
}

<div class="main">
  <h1>Secure Payment</h1>
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
</div>

ขยายตัวอย่างข้อมูล

ภาพด้านซ้าย:

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
  text-align: right;
}

img {
  margin: 0 5px;
  height: 30px;
}

<div class="main">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <h1>Secure Payment</h1>
</div>

ขยายตัวอย่างข้อมูล

— 1.21 กิกะวัตต์
แหล่งที่มา