flex布局的常见属性_div flex属性

父项属性

flex-direction

flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。
flex-direction 的取值：

举例说明：

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
1
2
3
4
5

①父元素不设置flex-direction时，默认水平方向为主轴，元素从左向右排列

div {
   width: 500px;
    height: 200px;
    background-color: pink;
    display: flex;
    
}

span {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    border: 1px solid red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

②父元素设置flex-direction时

div {
   width: 500px;
    height: 400px;
    background-color: pink;
    display: flex;
    flex-direction: column;
}

span {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    border: 1px solid red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

justify-content（主轴上子元素的排列）

使用①：

div {/* 父元素 */
   width: 500px;
    height: 200px;
    background-color: pink;
    display: flex;
    justify-content: flex-start;
}

span {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    border: 1px solid red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

使用②：

div {
   /* 父元素 */
    width: 500px;
    height: 200px;
    background-color: pink;
    display: flex;
    justify-content: flex-end;
}

span {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    border: 1px solid red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

使用③：

div {
   /* 父元素 */
    width: 500px;
    height: 200px;
    background-color: pink;
    display: flex;
    justify-content: center;
}

span {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    border: 1px solid red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

使用④：

div {
   /* 父元素 */
    width: 500px;
    height: 200px;
    background-color: pink;
    display: flex;
    justify-content: space-around;
}

span {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    border: 1px solid red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

使用⑤：

div {
   /* 父元素 */
    width: 500px;
    height: 200px;
    background-color: pink;
    display: flex;
    justify-content: space-between;
}

span {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    border: 1px solid red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

flex-wrap

div {
   /* 父元素 */
    width: 400px;
    height: 300px;
    background-color: pink;
    display: flex;
}

span {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    border: 5px solid red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

默认子元素不换行，如果装不开，则缩小子元素宽度。

若要换行，则设置父元素：flex-wrap: wrap;

align-items 侧轴上的子元素排列方式（单行 ）

div {
        /* 父元素 */
        width: 400px;
        height: 300px;
        background-color: pink;
        display: flex;
        align-items: center;
    }
    
    span {
        height: 100px;
        width: 100px;
        background-color: skyblue;
        border: 5px solid red;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div>
   <span>1</span>
   <span>2</span>
   <span>3</span>
</div>
1
2
3
4
5

align-content 设置侧轴上的子元素的排列方式（多行）

div {
   /* 父元素 */
    width: 400px;
    height: 300px;
    background-color: pink;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

span {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    border: 5px solid red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
</div>
1
2
3
4
5
6
7

若给div设置：align-content: space-between;效果为：

若给div设置：align-content: space-around;效果为：

子项属性

flex 属性

定义子项目分配剩余空间，用çex来表示占多少份数。

div {
   /* 父元素 */
    width: 400px;
    height: 300px;
    background-color: pink;
    display: flex;
}

span {
    height: 100px;
    flex: 1;
    background-color: skyblue;
    border: 5px solid red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
1
2
3
4
5