Heim > Artikel > Web-Frontend > Ausführliche Erklärung, wie CSS3 flexibles Layout implementiert

Ausführliche Erklärung, wie CSS3 flexibles Layout implementiert

青灯夜游nach vorne: 2020-07-11 16:33:063163Durchsuche

1. CSS3 Flexible Box

Flexible Box ist ein neuer Layoutmodus von CSS3.

CSS3 Flexible Box (Flexible Box oder Flexbox) ist eine Layoutmethode, die sicherstellt, dass Elemente ein angemessenes Verhalten aufweisen, wenn die Seite an verschiedene Bildschirmgrößen und Gerätetypen angepasst werden muss.

Der Zweck der Einführung des Flexbox-Layoutmodells besteht darin, eine effizientere Möglichkeit zum Anordnen, Ausrichten und Zuweisen von leerem Raum zu Unterelementen in einem Container bereitzustellen.

2. Browser-Unterstützung

Die Nummer in der Tabelle gibt die Versionsnummer des ersten Browsers an, der dieses Attribut unterstützt.

Das -webkit- oder -moz- direkt nach der Nummer ist das Präfix des angegebenen Browsers.

属性
Basic support (single-line flexbox)	29.0 21.0 -webkit-	11.0	22.0 18.0 -moz-	6.1 -webkit-	12.1 -webkit-
Multi-line flexbox	29.0 21.0 -webkit-	11.0	28.0	6.1 -webkit-	17.0 15.0 -webkit- 12.1

3. Inhalt der flexiblen CSS3-Box

Die flexible Box besteht aus einem Flex-Container und einer Flex-Artikelzusammensetzung.

Ein flexibler Container wird als flexibler Container definiert, indem der Wert der Anzeigeeigenschaft auf Flex oder Inline-Flex gesetzt wird.

Ein Flex-Container enthält ein oder mehrere untergeordnete Flex-Elemente.

Hinweis: Die Außenseite des flexiblen Containers und die Innenseite des flexiblen Unterelements werden normal gerendert. Die Flex-Box definiert nur, wie die untergeordneten Flex-Elemente innerhalb des Flex-Containers angeordnet sind.

Flexible untergeordnete Elemente werden normalerweise in einer Reihe innerhalb der Flexbox angezeigt. Standardmäßig gibt es nur eine Zeile pro Container.

Die folgenden Elemente zeigen die elastischen untergeordneten Elemente, die in einer Reihe von links nach rechts angezeigt werden:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FLEX</title>
    <style>
        .flex-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 1200px;
            height: 640px;
            background-color: lightsteelblue;
        }
        .flex-container .flex-item {
            width: 320px;
            height: 240px;
            margin: 10px;
            background-color:lightsalmon;
        }
    </style>
</head>
<body>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

Ausführliche Erklärung, wie CSS3 flexibles Layout implementiert

4. CSS3 Flexible Box Gemeinsame Attribute

属性	描述
flex-direction	指定弹性容器中子元素排列方式
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行
flex-flow	flex-direction 和 flex-wrap 的简写
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式

1. flex-direction 属性

决定项目的方向。

注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。

.flex-container { flex-direction: row | row-reverse | column | column-reverse; }

Ausführliche Erklärung, wie CSS3 flexibles Layout implementiert

属性值

值	描述
row	默认值。元素将水平显示，正如一个行一样。
row-reverse	与 row 相同，但是以相反的顺序。
column	元素将垂直显示，正如一个列一样。
column-reverse	与 column 相同，但是以相反的顺序。

2. flex-wrap 属性

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

值	描述
nowrap	默认值。规定元素不拆行或不拆列。
wrap	规定元素在必要的时候拆行或拆列。
wrap-reverse	规定元素在必要的时候拆行或拆列，但是以相反的顺序。

.flex-container { flex-wrap: nowrap | wrap | wrap-reverse; }

可以取三个值：

（1） nowrap (默认)：不换行。

Ausführliche Erklärung, wie CSS3 flexibles Layout implementiert

（2）wrap：换行，第一行在上方。

Ausführliche Erklärung, wie CSS3 flexibles Layout implementiert

（3）wrap-reverse：换行，第一行在下方。

Ausführliche Erklärung, wie CSS3 flexibles Layout implementiert

3. flex-flow 属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.flex-container { flex-flow: <flex-direction> <flex-wrap> }

4. align-items属性

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

值	描述
stretch	默认值。项目被拉伸以适应容器。
center	项目位于容器的中心。
flex-start	项目位于容器的开头。
flex-end	项目位于容器的结尾。
baseline	项目位于容器的基线上。

1Ausführliche Erklärung, wie CSS3 flexibles Layout implementiert

5. justify-content属性

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

值	描述
flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾。
center	项目位于容器的中心。
space-between	项目位于各行之间留有空白的容器内。
space-around	项目位于各行之前、之间、之后都留有空白的容器内。

1Ausführliche Erklärung, wie CSS3 flexibles Layout implementiert

五、弹性子元素属性

属性	描述
order	设置弹性盒子的子元素排列顺序。
flex-grow	设置或检索弹性盒子元素的扩展比率。
flex-shrink	指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
flex-basis	用于设置或检索弹性盒伸缩基准值。
flex	设置弹性盒子的子元素如何分配空间。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。

1. order属性

.flex-container .flex-item { order: <integer>; }

：用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。

1Ausführliche Erklärung, wie CSS3 flexibles Layout implementiert

2. flex-grow属性

.flex-container .flex-item { flex-grow: <integer>; }

：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

1Ausführliche Erklärung, wie CSS3 flexibles Layout implementiert

3. flex-shrink属性

.flex-container .flex-item { flex-shrink: <integer>; }

：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

1Ausführliche Erklärung, wie CSS3 flexibles Layout implementiert

4. flex-basis属性

.flex-container .flex-item { flex-basis: <integer> | auto; }

：一个长度单位或者一个百分比，规定元素的初始长度。

auto：默认值。长度等于元素的长度。如果该项目未指定长度，则长度将根据内容决定。

5. flex属性

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

.flex-container .flex-item {
flex:flex-grow flex-shrink flex-basis|auto|initial|inherit;
}

值	描述
flex-grow	一个数字，规定项目将相对于其他元素进行扩展的量。
flex-shrink	一个数字，规定项目将相对于其他元素进行收缩的量。
flex-basis	项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。
initial	设置该属性为它的默认值，即为 0 1 auto。
inherit	从父元素继承该属性。

6. align-self属性

.flex-container .flex-item {
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
}

值	描述
auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
stretch	元素被拉伸以适应容器。
center	元素位于容器的中心。
flex-start	元素位于容器的开头。
flex-end	元素位于容器的结尾。
baseline	元素位于容器的基线上。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

1Ausführliche Erklärung, wie CSS3 flexibles Layout implementiert

取值同 align-items。

参考

本文转载自：https://www.jianshu.com/p/5856c4ae91f2

In Verbindung stehende Artikel

Mehr sehen