From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/flex-basis/index.html | 224 +++++++++++++++++++++++++++++++++ 1 file changed, 224 insertions(+) create mode 100644 files/ru/web/css/flex-basis/index.html (limited to 'files/ru/web/css/flex-basis') diff --git a/files/ru/web/css/flex-basis/index.html b/files/ru/web/css/flex-basis/index.html new file mode 100644 index 0000000000..ab77e783d5 --- /dev/null +++ b/files/ru/web/css/flex-basis/index.html @@ -0,0 +1,224 @@ +--- +title: flex-basis +slug: Web/CSS/flex-basis +translation_of: Web/CSS/flex-basis +--- +
{{CSSRef}}
+ +

CSS свойство flex-basis задает базовый размер флекс элемента по основной оси. Это свойство определяет размер контент-бокса, если не задано иначе через {{Cssxref("box-sizing")}}.

+ +
{{EmbedInteractiveExample("pages/css/flex-basis.html")}}
+ + + +
+

Внимание: в случае, если для элемента одновременно заданы flex-basis (отличное от auto) и width ( или height в случае flex-direction: column), flex-basis имеет приоритет.

+
+ +

{{cssinfo}}

+ +

Синтаксис

+ + + +
/* Устанавливает <'ширину'> */
+flex-basis: 10em;
+flex-basis: 3px;
+flex-basis: auto;
+
+/* Intrinsic sizing keywords */
+flex-basis: fill;
+flex-basis: max-content;
+flex-basis: min-content;
+flex-basis: fit-content;
+
+/* Автоматически изменяет размер на основе содержимого элемента */
+flex-basis: content;
+
+/* Глобальное значения */
+flex-basis: inherit;
+flex-basis: initial;
+flex-basis: unset;
+
+ + + +

Свойство flex-basis задается через ключевое слово content или через <'width'>.

+ +

Значения

+ +
+
<'ширина'>
+
An absolute {{cssxref("<length>")}}, a {{cssxref("<percentage>")}} родительского flex контейнера главное size свойство, или ключевое слово auto. Негативные значения не допустимы.
+
content
+
Автоматический задает размер на основе содержимого элемента flex.
+
+
Заметка: Это значение отсутствовало в первоначальном релизе Flexible Box Layout, и, следовательно, некоторые предыдущие релизы не будут поддерживать его. Аналогичный эффект можно получить, используя auto вместе с основным размером (width или height) auto.
+ +
+

История:

+ +
    +
  • Первоначально, flex-basis:auto означает "смотреть на значения width или height".
    • +
  • Затем flex-basis:auto был изменен на автоматический размер, а "main-size" было введено как ключевое слово, означающее "смотреть на значения width или height".  Это было реализован в  баге 1032922.
    • +
  • Затем в баге 1093316 это было возвращено обратно, поэтому auto снова означает "смотреть на значения width или height"; а новое ключевое слово content было введено для автоматического размера. ({{bug("1105111")}} охватывает добавление этого ключевого слова).
    • +
+
+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML

+ +
<ul class="container">
+  <li class="flex flex1">1: flex-basis test</li>
+  <li class="flex flex2">2: flex-basis test</li>
+  <li class="flex flex3">3: flex-basis test</li>
+  <li class="flex flex4">4: flex-basis test</li>
+  <li class="flex flex5">5: flex-basis test</li>
+</ul>
+
+<ul class="container">
+  <li class="flex flex6">6: flex-basis test</li>
+</ul>
+
+ +

CSS

+ +
.container {
+  font-family: arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex {
+  background: #6AB6D8;
+  padding: 10px;
+  margin-bottom: 50px;
+  border: 3px solid #2E86BB;
+  color: white;
+  font-size: 20px;
+  text-align: center;
+  position: relative;
+}
+
+.flex:after {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 100%;
+  margin-top: 10px;
+  width: 100%;
+  color: #333;
+  font-size: 18px;
+}
+
+.flex1 {
+  flex-basis: auto;
+}
+
+.flex1:after {
+  content: 'auto';
+}
+
+.flex2 {
+  flex-basis: max-content;
+}
+
+.flex2:after {
+  content: 'max-content';
+}
+
+.flex3 {
+  flex-basis: min-content;
+}
+
+.flex3:after {
+  content: 'min-content';
+}
+
+.flex4 {
+  flex-basis: fit-content;
+}
+
+.flex4:after {
+  content: 'fit-content';
+}
+
+.flex5 {
+   flex-basis: content;
+}
+
+.flex5:after {
+  content: 'content';
+}
+
+.flex6 {
+  flex-basis: fill;
+}
+
+.flex6:after {
+  content: 'fill';
+}
+
+ +

Results

+ +

{{EmbedLiveSample('Example', '860', '360', '', 'Web/CSS/flex-basis')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.flex-basis")}}

+ +

See also

+ + + +
+ +
+
+
+
+ +
+ +
+
+ +
+
+
-- cgit v1.2.3-54-g00ecf