CSS3의 신축성 상자 모형

소개하다.
css2에는 표준 모드의 상자 모형과IE 아래의 괴이한 상자 모형이 존재한다.이 두 가지 방안은 상자 모형의 렌더링 모드를 나타낸다.css3에서 신축성 상자 모형을 새로 추가했고 신축성 상자 모형은 새로 추가된 강력하고 유연한 구조 방안이다.신축성 상자 모형은 css3에서 새로 제기한 레이아웃 방안이다.화면 너비와 장치에 대한 새로운 레이아웃 방안이다.주로 용기 중의 하위 요소를 배열하고 정렬하며 공백 공간을 분배하는 방안의 조정이다.
신구 버전의 탄성 상자 모형은 이전에 css3에서 구 버전의 탄성 상자 모형을 출시한 적이 있다.새 버전의 신축성 상자 모형에 비해 구 버전의 내용은 새 버전과 약간 다르다.그리고 기능적으로 볼 때 구 버전의 탄성 상자 모형은 새 버전의 상자 모형보다 훨씬 강하지 않다. 호환성으로 볼 때 양자는 pc단ie9 이하에서 호환성 문제가 존재하지만 이동단에서 구 버전의 탄성 상자 모형의 호환성은 더욱 좋다.그러나 우리에게 있어서 우리는 여전히 새로운 버전의 탄성 상자 모형에 주력해야 한다. 왜냐하면 구버전의 탄성 상자 모형이 도태되는 것은 필연적이기 때문이다. 휴대전화 단말기의 호환성이 점점 향상됨에 따라 구버전은 반드시 도태될 것이다.또한 새로운 버전은 더욱 강력한 기능을 가지고 있어 우리가 깊이 있게 공부할 가치가 있다.그러면 우리는 신구 두 버전의 탄성 상자 모형에 대해 대비적인 마음으로 공부하면 된다. 새로운 버전을 파악하고 구 버전을 이해하면 언젠가 우리가 구 버전을 사용해야 하더라도 구 버전의 탄성 상자 모형을 쉽게 배울 수 있다.
관련 개념
주축
원소가 한 줄에 배열된 것을 예로 들면 원소가 한 줄에 배열될 때 주축은 원소가 배열된 방향을 나타내고 가로로 배열되면 주축은 가로줄로 이해할 수 있다. 왜냐하면 우리 원소는 기본적으로 왼쪽에서 오른쪽으로 배열되기 때문이다. 그러면 묵인된 상황에서 원소의 주축의 시작 위치는 왼쪽이고 방향은 오른쪽이며 끝점도 오른쪽이라고 할 수 있다.
측축
요소의 수직 방향은 측면 축입니다.기본값은 시작점, 아래는 끝점입니다.
탄성 용기
우리는 탄성 상자 모형을 사용하려면 용기를 탄성 용기로 바꾸어야 한다. 우리는 하위 원소를 포함하는 용기에 디스플레이: flex를 설정하면 이 용기도 탄성 용기가 된다고 말한다.
탄성 서브원소
서브원소의 부원소가 탄성 용기로 변하면 그 중의 모든 서브원소도 자연히 탄성 서브원소로 변한다.
탄성 컨테이너를 생성하는 방법:
　　　　display:flex | inline-flex
탄성 컨테이너 속성

flex-direction

탄성 용기 중성자 원소의 배열 방식 (주축 배열 방식) 속성 값: row: 기본적으로 한 줄에 row-reverse: 반전 가로 배열 (오른쪽 정렬, 뒤에서 앞줄, 마지막 항목은 맨 앞에 배열)column: 세로로 배열합니다.column-reverse: 반전 세로 배열, 아래에서 위로 배열, 마지막 항목은 맨 위에 배열

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-directiontitle>
    <style>
        html,body {
            margin:0;
            padding:0;
        }
        nav {
            height: 500px;
            background-color: lightcyan;
            display: flex;
            flex-direction: row-reverse;/*  1234     4321*/
            flex-direction: column;/*  1234    1234*/
            flex-direction: column-reverse;/*    1234*/
        }
        nav div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            line-height: 100px;
            text-align: center;
            font-weight: bold;
            margin-right: 10px;
        }
    style>
head>
<body>

<nav>
    <div class="d1">1div>
    <div class="d2">2div>
    <div class="d3">3div>
    <div class="d4">4div>
nav>

body>
html>

flex-wrap

탄성 상자의 하위 요소가 부모 용기를 초과할 때 줄 속성 값을 바꿀지 설정합니다: nowrap: 기본값.원소를 줄을 떼지 않거나 열을 떼지 않도록 규정하다.wrap: 원소가 필요할 때 줄을 뜯거나 열을 뜯도록 규정한다.lrap-reverse: 원소가 필요할 때 줄을 뜯거나 열을 뜯는 것을 규정하지만 상반된 순서로 한다.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-wraptitle>
    <style>
        .box {
            height: 600px;
            background-color: lightgoldenrodyellow;
            display: flex;
            /*      wrap，                  */
            /*flex-wrap:wrap;*/
            /*      wrap-reverse          ，       ，         */
            flex-wrap: wrap-reverse;
        }
        .box div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            line-height: 100px;
            text-align: center;
            font-weight: bold;
            margin: 10px;
        }
    style>
head>
<body>

<div class="box">
    
    <div>1div>
    <div>2div>
    <div>3div>
    <div>4div>
    <div>5div>
    <div>6div>
    <div>7div>
    <div>8div>
    <div>9div>
    <div>1div>
    <div>2div>
    <div>3div>
    <div>4div>
    <div>5div>
    <div>6div>
    <div>7div>
    <div>8div>
    <div>9div>
div>

body>
html>

flex-flow

flex-direction과 flex-wrap의 약자

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-wraptitle>
    <style>
        .box {
            height: 600px;
            background-color: lightgoldenrodyellow;
            display: flex;
            flex-flow: row wrap;
        }
        .box div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            line-height: 100px;
            text-align: center;
            font-weight: bold;
            margin: 10px;
        }
    style>
head>
<body>

<div class="box">
    
    <div>1div>
    <div>2div>
    <div>3div>
    <div>4div>
    <div>5div>
    <div>6div>
    <div>7div>
    <div>8div>
    <div>9div>
    <div>1div>
    <div>2div>
    <div>3div>
    <div>4div>
    <div>5div>
    <div>6div>
    <div>7div>
    <div>8div>
    <div>9div>
div>

body>
html>

align-item

신축성 상자 요소가 사이드축(세로축) 방향에서 정렬되는 방식을 설정합니다. 관련 속성 값: flex-start: 신축성 상자 요소의 사이드축(세로축) 시작 위치의 경계가 이 줄의 사이드축 시작 경계에 바짝 붙어 있습니다.flex-end: 탄성 상자 요소의 측축(세로축) 시작 위치의 경계는 이 줄의 측축에 바짝 붙어 경계를 끝냅니다.center: 신축성 상자 요소는 이 줄의 옆축(세로축) 위에 가운데로 배치됩니다.(행 크기가 탄성 상자 요소의 크기보다 작으면 같은 길이가 두 방향으로 넘쳐납니다.)베이스라인: 신축성 상자 요소의 줄 안축과 옆축이 같은 경우 이 값은'flex-start'와 같은 효과가 있습니다.다른 경우 이 값은 베이스라인 정렬에 사용됩니다.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>align-itemtitle>
    <style>
        .box {
            height: 600px;
            background-color: lemonchiffon;
            display: flex;
            /*           */
            /*align-items: flex-start;*/
            /*        */
            /*align-items: flex-end;*/
            /*        */
            /*align-items: center;*/
            align-items: baseline;
        }
        .box div{
            width: 100px;
            height: 100px;
            background-color: lightsalmon;
            text-align: center;
            line-height: 100px;
            font-weight: bold;
            margin:10px;
        }
    style>
head>
<body>
    <div class="box">
        <div>1div>
        <div>2div>
        <div>3div>
        <div>4div>
    div>
body>
html>

align-content

flex-wrap 속성을 수정하는 행위는align-items와 유사하지만 하위 요소의 정렬을 설정하는 것이 아니라 줄의 정렬을 설정합니다(줄과 줄의 정렬 방식).관련 속성:flex-start:줄 간격이 없음flex-end:밑에 정렬이 없음center:가운데에 줄 간격이 없음space-between:양쪽 정렬, 가운데 자동 분배space-around:자동 분배 거리는 이 속성이 한 줄만 있는 신축 용기에 효과가 없음을 주의하십시오.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>align-contenttitle>
    <style>
        nav {
            height: 600px;
            background-color: lemonchiffon;
            display: flex;
            /*    */
            flex-wrap: wrap;
            /*          ，     */
            /*align-content: flex-start;*/
            /*          ，     ，       */
            /*align-content: flex-end;*/
            /*      ，       ，     */
            /*align-content:center;*/
            /*    ，      */
            /*align-content: space-between;*/
            /*      */
            align-content:space-around;
        }
        nav div {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            margin:10px;
        }
    style>
head>
<body>
    <nav>
        <div>1div>
        <div>2div>
        <div>3div>
        <div>4div>
        <div>5div>
        <div>6div>
        <div>7div>
        <div>8div>
        <div>9div>
        <div>10div>
        <div>11div>
        <div>12div>
        <div>13div>
    nav>
body>
html>

justify-content

신축성 상자 요소가 주축(가로축) 방향에 정렬되는 방식을 설정합니다. 관련 속성은 flex-star:t 기본값, 맨 끝 정렬flex-end: 맨 끝 정렬center: 가운데 정렬space-between: 양쪽 정렬, 중간 자동 분배space-around: 자동 분배 거리

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>justify-contenttitle>
    <style>
        nav {
            height: 600px;
            background-color: lightgoldenrodyellow;
            display: flex;
            /*justify-content: flex-start;*/
            /*    ，   1234*/
            /*justify-content: flex-end;*/
            /*    ，  */
            /*justify-content: center;*/
            /*    ，      */
            /*justify-content: space-between;*/
            /*      */
            justify-content: space-around;
        }
        nav div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin:10px;
        }
    style>
head>
<body>
<nav>
    <div>1div>
    <div>2div>
    <div>3div>
    <div>4div>
    <div>5div>
    <div>6div>
nav>
body>
html>

탄성 서브 요소 속성

order

신축성 상자의 하위 요소 배열 순서를 설정합니다.number 정렬 우선 순위, 숫자가 클수록 뒷줄로 갑니다. 기본값은 0이고 음수를 지원합니다.

flex-grow

신축성 상자 요소의 확장 비율을 설정하거나 검색합니다.속성 값: int

flex-shrink

탄성 상자 요소의 수축 비율을 설정하거나 검색합니다.속성 값: int

flex-basis

탄성 박스 신축 기준치를 설정하거나 검색하는 데 사용됩니다.속성 값: int

flex

신축성 상자의 하위 요소를 설정하여 공간을 어떻게 분배하는지는 flex-grow, flex-shrink와 flex-basis 속성의 약자 속성입니다.

align-self

신축성 서브 원소에 사용합니다.컨테이너의 align-items 속성을 덮어씁니다.값은 용기 속성과 같습니다. 단지 이것은 단독으로 어떤 요소를 설정합니다.
전재 대상:https://www.cnblogs.com/wu0379/p/11403870.html

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

CSS3의 신축성 상자 모형

좋은 웹페이지 즐겨찾기