'Vị trí: tuyệt đối' có xung đột với Flexbox không?

Tôi muốn tạo một divthanh ở đầu màn hình mà không ảnh hưởng đến các phần tử khác và phần tử con của nó ở trung tâm.

 .parent {
   display: flex;
   justify-content: center;
   position: absolute;
 }

<div class="parent">
  <div class="child">text</div>
</div>

Khi tôi thêm position: absolutedòng, justify-content: centertrở nên không hợp lệ. Chúng có xung đột với nhau không và giải pháp là gì?

BIÊN TẬP

Cảm ơn các bạn đó là vấn đề của chiều rộng mẹ. Nhưng tôi đang ở trong React Native, vì vậy tôi không thể thiết lập width: 100%. Đã thử flex: 1và align-self: stretchcả hai đều không hoạt động. Tôi đã sử dụng Kích thước để có được chiều rộng đầy đủ của cửa sổ và nó đã hoạt động.

BIÊN TẬP

Kể từ phiên bản React Native mới hơn (tôi với 0,49), nó chấp nhận width: 100%.

Không, vị trí hoàn toàn không xung đột với các thùng chứa flex. Việc biến một phần tử trở thành một vùng chứa linh hoạt chỉ ảnh hưởng đến mô hình bố cục bên trong của nó, tức là cách mà nội dung của nó được trình bày. Vị trí ảnh hưởng đến bản thân phần tử và có thể thay đổi vai trò bên ngoài của nó đối với bố cục luồng.

Đó nghĩa là

• Nếu bạn thêm định vị tuyệt đối vào một phần tử với display: inline-flex, nó sẽ trở thành cấp khối (giống như display: flex), nhưng vẫn sẽ tạo ra ngữ cảnh định dạng linh hoạt.

• Nếu bạn thêm định vị tuyệt đối vào một phần tử với display: flex, nó sẽ được định kích thước bằng cách sử dụng thuật toán thu nhỏ để vừa vặn (điển hình của vùng chứa cấp nội tuyến) thay vì điền sẵn.

Điều đó nói rằng, hoàn toàn định vị xung đột với trẻ linh hoạt .

Vì nó nằm ngoài luồng, phần con được định vị tuyệt đối của thùng chứa flex không tham gia vào bố cục flex.

bạn đã quên chiều rộng của cha mẹ

.parent {
   display: flex;
   justify-content: center;
   position: absolute;
   width:100%
 }

<div class="parent">
  <div class="child">text</div>
</div>

Bạn phải cung cấp width:100%cho phụ huynh cho centervăn bản.

 .parent {
   display: flex;
   justify-content: center;
   position: absolute;
   width:100%
 }

<div class="parent">
  <div class="child">text</div>
</div>

Nếu bạn cũng cần căn giữa theo chiều dọc, hãy cho height:100%vàalign-itens: center

.parent {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   width:100%;
   height: 100%;
 }

Trong trường hợp của tôi, vấn đề là tôi có một phần tử khác ở trung tâm của div với chỉ số z xung đột.

.wrapper {
  color: white;
  width: 320px;
  position: relative;
  border: 1px dashed gray;
  height: 40px
}

.parent {
  position: absolute;
  display: flex;
  justify-content: center;
  top: 20px;
  left: 0;
  right: 0;
  /* This z-index override is needed to display on top of the other
     div. Or, just swap the order of the HTML tags. */
  z-index: 1;
}

.child {
  background: green;
}

.conflicting {
  position: absolute;
  left: 120px;
  height: 40px;
  background: red;
  margin: 0 auto;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
       Centered
    </div>
  </div>
  <div class="conflicting">
    Conflicting
  </div>
</div>