Làm thế nào để canh chỉnh đúng mục flex?

680

Có cách nào linh hoạt hơn để căn chỉnh "Liên hệ" hơn là sử dụng position: absolutekhông?

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

Mở rộng đoạn trích

http://jsfiddle.net/vqDK9/

html css flexbox

— Đánh dấu tảng đá
nguồn

2

bạn có thể sử dụng float đúng, nhưng nó cũng giống như vậy ...! Cách tốt nhất là sử dụng bảng hiển thị có căn chỉnh văn bản.

— Yohann Tilotti

Chắc chắn, nếu điều đó tốt hơn. Vẫn gặp sự cố khi căn chỉnh "Liên hệ" mặc dù: jsfiddle.net/vqDK9/1

— Mark Boulder

2

Tôi đã cập nhật fiddle jsfiddle.net/vqDK9/2

— Yohann Tilotti 15/03/2016

Dưới đây là ít nhất hai cách để làm điều đó: stackoverflow.com/a/33856609/3597276

— Michael Benjamin

452

Bạn đi đây Đặt justify-content: space-betweentrên hộp chứa flex.

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

Mở rộng đoạn trích

— Kevin Scos
nguồn

29

Hoặcjustify-content: flex-end

— BT

1

Hãy thử đặt chiều rộng của .c thành 300px. Tiêu đề không còn là trung tâm. Vì vậy, có, điều này trả lời câu hỏi, nhưng điều này phá vỡ thiết kế.

— Agamemnus

22

Lưu ý rằng điều này không phải lúc nào cũng hoạt động theo cách bạn có thể mong đợi, như khi có .c::afteryếu tố giả. Theo kinh nghiệm của tôi, margin-left: auto;là con đường để đi.

— Sẽ

13

Hoặcflex-flow: row-reverse;

— jchook

8

Tôi không thấy đây là một câu trả lời chính xác nếu bạn không sắp xếp chỉ một mục trong thùng chứa flex.

— Foxhoundn

1097

Một cách tiếp cận linh hoạt hơn sẽ là sử dụng autolề trái (các mục flex xử lý lề tự động khác một chút so với khi được sử dụng trong ngữ cảnh định dạng khối).

.c {
    margin-left: auto;
}

Cập nhật fiddle:

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

Mở rộng đoạn trích

— ngoại tình
nguồn

2

Cảm ơn. Cá nhân bạn có thích phương pháp này hơn phương pháp bảng hiển thị của Yohann Tilotti ở trên không? Nếu vậy, tại sao?

— Đánh dấu Boulder

4

@MarkBoulder: Vì lý do tương thích, phương pháp của anh ấy tốt hơn, nhưng nếu bạn đã sử dụng flexbox, câu trả lời của tôi sẽ có ý nghĩa hơn.

— adrift

4

@MarkBoulder: Cả hai đều hoàn thành điều tương tự trong trường hợp này. Ưu điểm sẽ có các tài sản khác (và hành vi) kết hợp với các vật phẩm flex rằng cách tiếp cận bảng không có ( flex, order, vv).

— adrift

3

Nếu bạn không thể bao bọc các yếu tố và bạn cần phải nói ba quyền cuối cùng, hãy nhắm mục tiêu thứ ba từ cuối cùng chỉ với margin-left: auto;kiểu này .

— Daniel Sokolowski

2

@Justin đã tìm ra nó, không cần phải bọc chúng - Tôi không thể trong trường hợp của mình. Giải pháp là chỉ nhắm mục tiêu đầu tiên trong số ba mục margin-left: auto;.

— Daniel Sokolowski

41

Nếu bạn muốn sử dụng flexbox cho việc này, bạn sẽ có thể, bằng cách thực hiện việc này ( display: flextrên hộp đựng, flex: 1trên vật phẩm và text-align: righttrên .c):

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

... Hoặc cách khác (thậm chí đơn giản hơn), nếu các mặt hàng không cần đáp ứng, bạn có thể sử dụng justify-content: space-betweentrên container và loại bỏ text-alignhoàn toàn các quy tắc:

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

Đây là bản demo trên Codepen để cho phép bạn nhanh chóng thử các cách trên.

— Nick F
nguồn

2

space-betweenchính xác là những gì tôi đang tìm kiếm, cảm ơn!

— Eddie Fletcher

Biên giới biến mất khi sử dụng đề nghị thứ hai, hành vi dự kiến? codepen.io/oshihirii/pen/RygKRd

— dùng1063287

38

Bạn cũng có thể sử dụng một phụ để lấp đầy không gian còn lại.

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

Tôi đã cập nhật giải pháp với 3 phiên bản khác nhau. Điều này là do các cuộc thảo luận về tính hợp lệ của việc sử dụng một yếu tố phụ bổ sung. Nếu bạn chạy mã snipped, bạn sẽ thấy rằng tất cả các giải pháp đều làm những việc khác nhau. Ví dụ, thiết lập lớp phụ trên mục b sẽ làm cho mục này lấp đầy khoảng trống còn lại. Điều này có lợi ích là không có không gian 'chết' không thể nhấp được.

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

Mở rộng đoạn trích

— Arno
nguồn

3

Cuối cùng, một người hiểu flexbox

— Kokodoko

9

@Kokodoko yeah, sử dụng thêm một yếu tố html phi ngữ nghĩa để di chuyển một yếu tố khác là mục tiêu hiểu biết hàng đầu ...

— Zanshin13

@ Zanshin13 Tất cả các câu trả lời khác đều viết rất nhiều css mà bạn cũng có thể bỏ ra khỏi hộp chứa flex và tự viết mã toàn bộ :)

— Kokodoko

2

@Kokodoko justify-content: space-betweenlà "rất nhiều" css, nghiêm túc? Không cần bình luận thêm (nhưng nếu bạn muốn - chào mừng bạn đến trò chuyện). Câu trả lời này có quyền ở đây, bởi vì nó là một giải pháp. Nhưng chắc chắn không phải là tối ưu. Idk, có thể bạn không nhận thấy nhưng hầu hết css từ các câu trả lời khác là của OP và câu trả lời thực sự làm giảm (một chút) lượng css của tác giả. Câu trả lời này không có ít css hơn những người khác (sẽ không hoạt động nếu không có css của OP - jsfiddle.net/63ma3b56 ). Nhưng nó có thêm một yếu tố html.

— Zanshin13

32

Hoặc bạn chỉ có thể sử dụng justify-content: flex-end

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

— Melchia
nguồn

3

Các justify-contentthuộc tính là một thuộc tính của flex-container, thấy cheatsheet Flexy Chris Coyer của: css-tricks.com/snippets/css/a-guide-to-flexbox

— Klaas van der Weij

1

Đây là giải pháp duy nhất trên trang này phù hợp với tôi.

— dùng2847376

19

Dễ dàng như

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

— Cgill
nguồn

12

Thêm lớp CSS sau vào biểu định kiểu của bạn:

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

Đặt một phần tử trống giữa phần tử bên trái và phần tử bạn muốn căn phải:

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

— andreisrob
nguồn

Đối với những người không chỉ muốn căn chỉnh một yếu tố duy nhất, nhưng có thể muốn căn chỉnh một yếu tố và phải căn chỉnh một yếu tố khác (trong cùng bố cục flex), đây là cách để đi!

— Sensei James

8

Nếu bạn cần một mục được căn trái (như tiêu đề) nhưng sau đó nhiều mục được căn phải (như 3 hình ảnh), thì bạn sẽ làm một cái gì đó như thế này:

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
}

Đây là những gì sẽ trông như thế nào (chỉ CSS tương đối được bao gồm trong đoạn trích ở trên)

— TetraDev
nguồn

6

'justify-content: flex-end' hoạt động trong hộp giá.

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

— Mohammad Adeel
nguồn

4

Tôi thấy rằng việc thêm 'justify-content: flex-end' vào hộp chứa flex sẽ giải quyết vấn đề trong khi 'justify-content: space-between' không làm gì cả.

— đêm
nguồn

2

Đối với những người sử dụng Angular và Flex-Layout, hãy sử dụng các mục sau trên hộp chứa mục flex:

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

Xem tài liệu fxLayoutAlign tại đây và tài liệu fxLayout đầy đủ tại đây .

— Lindauson
nguồn

0

Mã ví dụ dựa trên câu trả lời của TetraDev

Hình ảnh bên phải:

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

Mở rộng đoạn trích

Hình ảnh bên trái:

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

Mở rộng đoạn trích

— 1,21 gigawatt
nguồn