CSS3-Flex-Wissen über das flexible Boxmodell-js-Tutorial-php.cn

CSS3-Flex-Wissen über das flexible Boxmodell

一个新手

Freigeben： 2017-10-12 10:38:43

Original

1618 Leute haben es durchsucht

1. Was ist Flex?

Flex ist eine in CSS3 eingeführte Layoutmethode, die die Anordnung und Ausrichtung von Elementen sehr flexibel und effizient steuern kann. Layout.

2. Wie verwende ich Flex?

Jeder Container kann als Flex-Layout bezeichnet werden

1 #box {
2     display:flex;
3 }

Nach dem Login kopieren

3 Grundlegende Terminologie

Elemente, die Flex-Layout verwenden, werden Flex-Container (Flex-Container) <🎜 genannt >, seine untergeordneten Elemente sind Flex-Elemente (Flex-Items).
Der Flex-Container enthält zwei zueinander senkrechte Achsen, nämlich
Die Hauptachse (Hauptachse). ) und Nebenachse (Querachse) .
Flexelemente entlang der Hauptachse starten vom
Hauptstart (Hauptstart) Ordnen Sie der Reihe nach zum Hauptende (Hauptende)
Flex-Leitungen
an Ordnen Sie der Reihe nach entlang der Sekundärachse vom Startpunkt der Sekundärachse (Kreuzanfang) bis zum Endpunkt der Sekundärachse (Kreuzende)
an einzeln Der vom Flexelement eingenommene Hauptachsenraum wird als
bezeichnet, und der belegte Nebenachsenraum wird als
Nebenachsenlänge (Kreuzgröße) bezeichnet.

< tr class="header firstRow">< /tr> td>

Attribut

Bedeutung

属性	含义
`flex-direction`	主轴方向
`flex-wrap`	换行样式
`flex-flow`	前两个的简写形式
`justify-content`	主轴对齐方式
`align-items`	单行的副轴对齐方式
`align-content`	多行的副轴对齐方式

< /th>

Flex-Richtung Hauptachsenrichtung

flex-wrap Zeilenumbruchstil

flex-flow Abkürzung der ersten beiden

justify-content Ausrichtung der Hauptachse

align-items Einzeilige Ausrichtung der Sekundärachse

align-content Mehrere Zeilen der sekundären Achsenausrichtungsmethode

五、flex-direction，设置主轴的对齐方向，有四个值:

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

<!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布局 - by ghostwu</title>
    <style>
        #box {
            display: flex;
            flex-direction: row;
        }
        #box p {
            width: 100px;
            height: 100px;
            background: #09f;
            margin: 10px;
        }
    </style>
</head>

<body>
    <p id="box">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
    </p>
</body>

</html>

Nach dem Login kopieren

flex-direction设置为row：

flex-direction设置为row-reverse

flex-direction设置为column，下面的示意图我只截取了前面5个p,后面如果截取的话，图片占的位置太多了，影响体验.

flex-direction设置为column-reverse:

六、flex-wrap ：定义子元素超过一行，如何换行，常用属性值:

nowrap（默认值）：默认不换行。
wrap：换行，第二行在第一行下面，从左到右
wrap-reverse：换行，第二行在第一行上面，从左到右

1 #box {
2     display: flex;
3     flex-direction: row;
4     flex-wrap: nowrap;
5 }

Nach dem Login kopieren

flex-wrap:nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

七、flex-flow:是flex-direction 和flex-wrap的简写形式，默认是 row nowrap

#box {
    display:flex;
    /* flex-flow: row nowrap; */
    /* flex-flow: row wrap; */
    /* flex-flow: row wrap-reverse; */
    /* flex-flow: row-reverse wrap-reverse; */
    flex-flow: column wrap;
}

Nach dem Login kopieren

八、 justify-content: 子元素在主轴对齐方式

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。

#box {
    display:flex;
    flex-flow: row wrap;
    /* justify-content: flex-start; */
    /* justify-content: flex-end; */
    /* justify-content: center; */
    /* justify-content: space-between; */
    justify-content: space-around;
}

Nach dem Login kopieren

这里主要搞清楚space-between和space-around的区别

justify-content: space-between;

justify-content: space-around;

Das obige ist der detaillierte Inhalt vonCSS3-Flex-Wissen über das flexible Boxmodell. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!