>  기사  >  웹 프론트엔드  >  CSS3 유연한 상자 모델 플렉스 지식

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

一个新手
一个新手원래의
2017-10-12 10:38:431593검색

1. Flex란 무엇인가요?

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

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

1 #box {
2     display:flex;
3 }

3. Flex의 기본 용어

Flex 레이아웃을 사용하는 요소를
    flex 컨테이너(flex 컨테이너)
  • 라고 합니다. 요소는

    플렉스 요소(플렉스 항목).

    플렉스 컨테이너에는 서로 수직인 두 개의 축, 즉
  • 주축(주축)
  • 보조축(교차축)이 있습니다.

    flex 요소는 다음과 같습니다.
  • main start
  • 부터

    main end(main end)까지 주축을 따라 순차적으로 배열됩니다.

    flex 컨테이너에 여러 행의 flex 요소가 포함되어 있으면
  • flex 행
  • 보조 축을 따라 순서대로 배열됩니다.

    cross start부터 cross end.

    단일 플렉스 요소가 차지하는 주축 공간을
  • 기본 크기(기본 크기)
  • 라고 하고, 보조 축 공간을

    보조 축 길이(교차 크기)라고 합니다. .

  • 4. 하위 요소의 표시 모드를 제어하기 위해 상위 컨테이너에는 6가지 속성이 설정되어 있습니다.
flex-direction

스핀들 방향

flex-wrap줄 바꿈 스타일flex-flowjustify-contentSpindle 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;

 

justify-content: space-around;

 

 

위 내용은 CSS3 유연한 상자 모델 플렉스 지식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.