CSS3 유연한 상자 모델 플렉스 지식-JS 튜토리얼-php.cn

CSS3 유연한 상자 모델 플렉스 지식

一个新手

풀어 주다： 2017-10-12 10:38:43

원래의

1611명이 탐색했습니다.

1. Flex란 무엇인가요?

Flex는 CSS3에서 도입된 레이아웃 방법으로, 대부분의 사람들은 이를 탄력적 레이아웃이라고 부릅니다. ?

모든 컨테이너를 Flex 레이아웃으로 지정할 수 있습니다

1 #box {
2     display:flex;
3 }

로그인 후 복사

3. Flex의 기본 용어

Flex 레이아웃을 사용하는 요소를

라고 합니다. 요소는
플렉스 요소(플렉스 항목).
플렉스 컨테이너에는 서로 수직인 두 개의 축, 즉
과
보조축(교차축)이 있습니다.
flex 요소는 다음과 같습니다.
부터
main end(main end)까지 주축을 따라 순차적으로 배열됩니다.
flex 컨테이너에 여러 행의 flex 요소가 포함되어 있으면
보조 축을 따라 순서대로 배열됩니다.
cross start부터 cross end.
단일 플렉스 요소가 차지하는 주축 공간을
라고 하고, 보조 축 공간을
보조 축 길이(교차 크기)라고 합니다. .

<코드> flex-direction

스핀들 방향

flex-wrap줄 바꿈 스타일

flex-flow</code ><th align="center"><strong>처음 두 개의 약어</strong></th><tr class="even"></tr><code>justify-content

Spindle alignmentalign-itemsSingle -라인 보조 축 정렬


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

align-content🎜🎜다중 라인 보조 축 정렬🎜🎜 🎜🎜

五、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>

로그인 후 복사

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 }

로그인 후 복사

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;
}

로그인 후 복사

八、 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;
}

로그인 후 복사

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

justify-content: space-between;