Flex는 부트스트랩에 속합니까?-프런트엔드 Q&A-php.cn

Flex는 부트스트랩에 속합니까?

WBOY

풀어 주다： 2022-08-22 16:54:56

원래의

2044명이 탐색했습니다.

Flex 레이아웃은 bootstrap에 속합니다. flex는 탄력적 레이아웃을 나타냅니다. Bootstrap은 flex 클래스를 통해 페이지 레이아웃을 제어할 수 있습니다. flex 레이아웃 스타일을 활성화하려면 ".d-flex" 및 ".d-inline-flex"를 사용하세요. Flex Elastic 레이아웃도 bootstrap3과 bootstrap4의 가장 큰 차이점입니다.

Flex는 부트스트랩에 속합니까?

이 튜토리얼의 운영 환경: Windows 10 시스템, bootstrap5 버전, DELL G3 컴퓨터

flex는 bootstrap에 속합니다

Bootstrap4는 flex 클래스를 사용하여 페이지 레이아웃을 제어합니다

가장 큰 차이점 Bootstrap 3과 Bootstrap 4 사이에는 Bootstrap 4가 있습니다. 레이아웃에는 float 대신 flexbox를 사용하세요.

플렉스 레이아웃 스타일을 활성화하려면 .d-flex 및 .d-inline-flex를 사용하세요.
.flex-row는 기본적으로 왼쪽에서 오른쪽으로 표시되는 하위 요소의 가로 위치를 표시할 수 있습니다. (1, 2,3);
.flex-row-reverse 하위 요소는 왼쪽에서 오른쪽으로 수평으로 표시됩니다(3, 2, 1).
.flex-column은 하위 요소의 수직 효과를 실현합니다. - 요소 및 시작은 위에서 아래로 표시(1, 2, 3)
.flex-column-reverse는 하위 요소의 수직 효과를 실현하고 위에서 아래로 표시합니다(3, 2, 1).
.justify-content -start(end, center, between, around)는 콘텐츠 정렬을 실현합니다.
.align-items-start(end, center, 기준선, 스트레치)는 항목 정렬을 실현합니다. 단일 항목 정렬을 달성하기 위한 align-self-start(end , center, 기준선, 늘이기)

예는 다음과 같습니다.

<div class="d-flex flex-row-reverse border border-dark mt-5 justify-content-center">
            <div class="p-2 border border-success">
                1            </div>
            <div class="p-2 border border-success">
                2            </div>
            <div class="p-2 border border-success">
                3            </div>
        </div>
        <div class="d-flex flex-column-reverse border border-dark mt-5 justify-content-between" style="height: 200px;">
            <div class="p-2 border border-success">
                1            </div>
            <div class="p-2 border border-success">
                2            </div>
            <div class="p-2 border border-success">
                3            </div>
        </div>
        <div class="d-flex  border border-dark mt-5 align-items-baseline" style="height: 200px;">
            <div class="p-2 border border-success align-self-center">
                1            </div>
            <div class="p-2 border border-success">
                2            </div>
            <div class="p-2 border border-success">
                3            </div>
        </div>

로그인 후 복사

예는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>Flex</h2>
  <p>使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素：</p>
  <div class="d-flex p-3 bg-secondary text-white">  
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
</div>
</body>
</html>

로그인 후 복사

출력 결과: