Làm thế nào để sắp xếp theo chiều dọc văn bản trong một flexbox?

Tôi muốn sử dụng flexbox để sắp xếp theo chiều dọc một số nội dung bên trong <li>nhưng không có thành công lớn.

Tôi đã kiểm tra trực tuyến và nhiều hướng dẫn thực sự sử dụng div trình bao bọc lấy align-items:centertừ cài đặt flex trên cha mẹ, nhưng tôi tự hỏi liệu có thể cắt bỏ phần tử bổ sung này không?

Tôi đã chọn sử dụng flexbox trong trường hợp này vì chiều cao của danh sách sẽ là động %.

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  align-self: center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

Thay vì sử align-self: centerdụng align-items: center.

Không cần phải thay đổi flex-directionhoặc sử dụng text-align.

Đây là mã của bạn, với một điều chỉnh, để làm cho tất cả hoạt động:

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  /* align-self: center;    <---- REMOVE */
  align-items: center;   /* <---- NEW    */
  background: silver;
  width: 100%;
  height: 20%; 
}

Các align-selftài sản áp dụng cho các mục flex . Ngoại trừ của bạn likhông phải là một mục linh hoạt bởi vì cha mẹ của nó ul- không - display: flexhoặc không display: inline-flexđược áp dụng.

Do đó, ulkhông phải là một container flex, likhông phải là một mục flex và align-selfkhông có tác dụng.

Tài align-itemssản tương tự align-self, ngoại trừ nó áp dụng cho container flex .

Vì lilà một thùng chứa flex, align-itemscó thể được sử dụng để tập trung theo chiều dọc các phần tử con.

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  /* align-self: center; */
  align-items: center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

bản demo

Về mặt kỹ thuật, đây là cách thức align-itemsvà align-selfcông việc ...

Các align-itemstài sản (trên thùng) đặt giá trị mặc định của align-self(vào các mục). Do đó, align-items: centercó nghĩa là tất cả các mục flex sẽ được đặt thành align-self: center.

Nhưng bạn có thể ghi đè mặc định này bằng cách điều chỉnh các align-selfmục riêng lẻ.

Ví dụ: bạn có thể muốn các cột có chiều cao bằng nhau, vì vậy bộ chứa được đặt thành align-items: stretch. Tuy nhiên, một mục phải được ghim lên trên cùng, vì vậy nó được đặt thành align-self: flex-start.

thí dụ

Làm thế nào là văn bản một mục flex?

Một số người có thể tự hỏi làm thế nào một dòng văn bản ...

<li>This is the text</li>

là một yếu tố con của li.

Lý do là văn bản không được bao bọc rõ ràng bởi một yếu tố cấp độ nội tuyến được gói bằng thuật toán bởi một hộp nội tuyến. Điều này làm cho nó trở thành một yếu tố nội tuyến ẩn danh và con của cha mẹ.

Từ thông số CSS:

9.2.2.1 Hộp nội tuyến ẩn danh

Bất kỳ văn bản nào được chứa trực tiếp bên trong một phần tử khối chứa phải được coi là một phần tử nội tuyến ẩn danh.

Đặc tả flexbox cung cấp cho hành vi tương tự.

4. Vật phẩm linh hoạt

Mỗi dòng con của một container flex trở thành một mục flex và mỗi dòng văn bản liền kề được chứa trực tiếp bên trong một container flex được bọc trong một mục flex ẩn danh.

Do đó, văn bản trong lilà một mục flex.

Câu trả lời được bình chọn nhiều nhất là để giải quyết vấn đề cụ thể này được đăng bởi OP, trong đó nội dung (văn bản) đang được bọc bên trong một inline-blockyếu tố. Một số trường hợp có thể là về việc định tâm một phần tử bình thường theo chiều dọc bên trong một thùng chứa , cũng được áp dụng trong trường hợp của tôi, vì vậy tất cả những gì bạn cần là:

align-self: center;

Cách tốt nhất là chỉ lồng một flexbox bên trong flexbox . Tất cả bạn phải làm là cung cấp cho trẻ align-items: center. Điều này sẽ theo chiều dọc của văn bản bên trong cha mẹ của nó.

// Assuming a horizontally centered row of items for the parent but it doesn't have to be
.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  display: flex;
  align-items: center;
}

KẾT QUẢ

HTML

<ul class="list">
  <li>This is the text</li>
  <li>This is another text</li>
  <li>This is another another text</li>
</ul>

Sử dụng align-itemsthay vì align-selfvà tôi cũng thêm flex-directionvào column.

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.list {
  display: flex;
  justify-content: center;
  flex-direction: column;  /* <--- I added this */
  align-items: center;   /* <--- Change here */
  height: 100px;
  width: 100%;
  background: silver;
}

.list li {  
  background: gold;
  height: 20%; 
}

Sử dụng display: flexbạn có thể kiểm soát sự liên kết dọc của các yếu tố HTML.

.box {
  height: 100px;
  display: flex;
  align-items: center; /* Vertical */
  justify-content: center; /* Horizontal */
  border:2px solid black;
}

.box div {
  width: 100px;
  height: 20px;
  border:1px solid;
}

<div class="box">
  <div>Hello</div>
  <p>World</p>
</div>

Bạn có thể thay đổi ulvà lihiển thị thành tablevà table-cell. Sau đó, vertical-alignsẽ làm việc cho bạn:

ul {
    height: 20%;
    width: 100%;
    display: table;
}

li {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: silver;
    width: 100%; 
}

http://codepen.io/anon/pen/pckvK