baseline-source

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Thuộc tính baseline-source CSS xác định đường cơ sở nào được sử dụng khi các hộp cấp inline có nhiều đường cơ sở khả dụng, chẳng hạn như inline block nhiều dòng hoặc flex container inline. Các giá trị cho phép chọn giữa căn chỉnh theo đường cơ sở đầu tiên, đường cơ sở cuối cùng, hoặc để trình duyệt tự quyết định dựa vào kiểu hộp.

Cú pháp

css

/* Giá trị từ khóa */
baseline-source: auto;
baseline-source: first;
baseline-source: last;

/* Giá trị toàn cục */
baseline-source: inherit;
baseline-source: initial;
baseline-source: revert;
baseline-source: revert-layer;
baseline-source: unset;

Giá trị

auto: Chỉ định căn chỉnh last baseline cho inline-block, căn chỉnh first baseline cho mọi thứ khác.
first: Chỉ định căn chỉnh first baseline.
last: Chỉ định căn chỉnh last baseline.

Định nghĩa chính thức

Initial value	`auto`
Applies to	inline-level boxes
Inherited	no
Computed value	as specified
Animation type	discrete

Cú pháp chính thức

baseline-source = 
  auto   |
  first  |
  last

Ví dụ

Lựa chọn đường cơ sở trong inline flex containers

Ví dụ này minh họa cách dùng thuộc tính baseline-source để kiểm soát căn chỉnh đường cơ sở của inline flex containers.

HTML

HTML của chúng ta bao gồm nhiều phần tử <span>, là các vùng chứa inline chung cho nội dung phụ. Ba phần tử <span> chứa các phần tử <span> con lồng nhau.

html

<span>Baseline ___</span>

<span class="box first">
  <span>First</span>
  <span>A</span>
  <span>B</span>
  <span>C</span>
</span>

<span class="box auto">
  <span>Auto</span>
  <span>A</span>
  <span>B</span>
  <span>C</span>
</span>

<span class="box last">
  <span>A</span>
  <span>B</span>
  <span>C</span>
  <span>Last</span>
</span>

CSS

body {
  font-family: sans-serif;
}

.box {
  border: 2px solid #888888;
  width: 50px;
}

span {
  padding: 0.4rem;
}

Chúng ta định nghĩa tất cả các hộp là inline flex containers. Hộp .first sử dụng đường cơ sở đầu tiên, hộp .auto sử dụng đường cơ sở mặc định (là first cho inline flex containers), và hộp .last sử dụng đường cơ sở cuối cùng.

css

.box {
  display: inline-flex;
  flex-direction: column;
}

.first {
  baseline-source: first;
}

.auto {
  baseline-source: auto;
}

.last {
  baseline-source: last;
}

Kết quả

Đặc tả

Specification
CSS Inline Layout Module Level 3 # baseline-source

Tương thích trình duyệt

Xem thêm

Thuộc tính vertical-align
Tổng quan căn chỉnh hộp CSS

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content