CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명

青灯夜游

Jul 11, 2020 pm 04:33 PM

css3flexbox유연한 레이아웃

CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명

1. CSS3 가변 상자

가변 상자는 CSS3의 새로운 레이아웃 모드입니다.

CSS3 유연한 상자(Flexible Box 또는 Flexbox)는 페이지가 다양한 화면 크기와 장치 유형에 적응해야 할 때 요소가 적절한 동작을 갖도록 보장하는 레이아웃 방법입니다.

Flexbox 레이아웃 모델을 도입하는 목적은 컨테이너의 하위 요소에 빈 공간을 배열, 정렬 및 할당하는 보다 효율적인 방법을 제공하는 것입니다.

2. 브라우저 지원

표의 숫자는 이 속성을 지원하는 첫 번째 브라우저의 버전 번호를 나타냅니다.

숫자 바로 뒤에 나오는 -webkit- 또는 -moz-는 지정된 브라우저의 접두사입니다.

Properties
기본 지원(단일 줄 Flexbox)	2 9. 0 21.0 -webkit-	11.0	22.0 18.0 - moz-	6.1 -webkit-	12.1 -webkit-
다중 줄 flexbox	29.0 21.0 -webkit-	11.0	28.0	6.1 -webkit-	17.0 15.0 -웹킷- 12.1

3. CSS3 유연한 상자 콘텐츠

Flexible 상자는 Flex 컨테이너와 Flex 항목으로 구성됩니다.

플렉서블 컨테이너는 디스플레이 속성 값을 flex 또는 inline-flex로 설정하여 플렉서블 컨테이너로 정의됩니다.

유연한 컨테이너에는 하나 이상의 유연한 하위 요소가 포함되어 있습니다.

참고: 유연한 컨테이너 외부와 유연한 하위 요소 내에서는 정상적으로 렌더링됩니다. 플렉스 박스는 플렉스 하위 요소가 플렉스 컨테이너 내에 배치되는 방식만 정의합니다.

Flexible 하위 요소는 일반적으로 Flexbox 내 한 행에 표시됩니다. 기본적으로 컨테이너당 하나의 행만 있습니다.

다음 요소는 elastic 하위 요소가 왼쪽에서 오른쪽으로 연속으로 표시됨을 보여줍니다.

<!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</title>
    <style>
        .flex-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 1200px;
            height: 640px;
            background-color: lightsteelblue;
        }
        .flex-container .flex-item {
            width: 320px;
            height: 240px;
            margin: 10px;
            background-color:lightsalmon;
        }
    </style>
</head>
<body>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명

IV. 일반적으로 사용되는 CSS3 가변 상자 속성

속성	설명
flex-direction	플렉스 컨테이너에서 하위 요소의 배열을 지정하세요
flex-wrap	플렉스 박스의 하위 요소가 상위 컨테이너를 초과할 때 래핑할지 여부를 설정하세요
flex-flow	flex-direction 및 flex- Wrap의 약어
align-items	플렉스 박스 요소의 정렬을 가로축(세로축) 방향으로 설정
align-content	align-items와 유사하게 flex-wrap 속성의 동작을 수정합니다. 그러나 하위 요소 정렬을 설정하는 대신 행 정렬을 설정합니다.
justify-content	주축에서 Flexbox 요소의 정렬을 설정합니다. (가로축) 방향

1. flex-direction 属性

决定项目的方向。

注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。

.flex-container { flex-direction: row | row-reverse | column | column-reverse; }

CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명

属性值

值	描述
row	默认值。元素将水平显示，正如一个行一样。
row-reverse	与 row 相同，但是以相反的顺序。
column	元素将垂直显示，正如一个列一样。
column-reverse	与 column 相同，但是以相反的顺序。

2. flex-wrap 属性

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

值	描述
nowrap	默认值。规定元素不拆行或不拆列。
wrap	规定元素在必要的时候拆行或拆列。
wrap-reverse	规定元素在必要的时候拆行或拆列，但是以相反的顺序。

.flex-container { flex-wrap: nowrap | wrap | wrap-reverse; }

可以取三个值：

（1） nowrap (默认)：不换行。

CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명

（2）wrap：换行，第一行在上方。

CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명

（3）wrap-reverse：换行，第一行在下方。

CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명

3. flex-flow 属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.flex-container { flex-flow: <flex-direction> <flex-wrap> }

4. align-items属性

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

值	描述
stretch	默认值。项目被拉伸以适应容器。
center	项目位于容器的中心。
flex-start	项目位于容器的开头。
flex-end	项目位于容器的结尾。
baseline	项目位于容器的基线上。

1CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명

5. justify-content属性

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

值	描述
flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾。
center	项目位于容器的中心。
space-between	项目位于各行之间留有空白的容器内。
space-around	项目位于各行之前、之间、之后都留有空白的容器内。

1CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명

五、弹性子元素属性

属性	描述
order	设置弹性盒子的子元素排列顺序。
flex-grow	设置或检索弹性盒子元素的扩展比率。
flex-shrink	指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
flex-basis	用于设置或检索弹性盒伸缩基准值。
flex	设置弹性盒子的子元素如何分配空间。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。

1. order属性

.flex-container .flex-item { order: <integer>; }

：用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。

1CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명

2. flex-grow属性

.flex-container .flex-item { flex-grow: <integer>; }

：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

1CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명

3. flex-shrink属性

.flex-container .flex-item { flex-shrink: <integer>; }

：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

1CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명

4. flex-basis属性

.flex-container .flex-item { flex-basis: <integer> | auto; }

：一个长度单位或者一个百分比，规定元素的初始长度。

auto：默认值。长度等于元素的长度。如果该项目未指定长度，则长度将根据内容决定。

5. flex属性

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

.flex-container .flex-item {
flex:flex-grow flex-shrink flex-basis|auto|initial|inherit;
}

值	描述
flex-grow	一个数字，规定项目将相对于其他元素进行扩展的量。
flex-shrink	一个数字，规定项目将相对于其他元素进行收缩的量。
flex-basis	项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。
initial	设置该属性为它的默认值，即为 0 1 auto。
inherit	从父元素继承该属性。

6. align-self属性

.flex-container .flex-item {
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
}

值	描述
auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
stretch	元素被拉伸以适应容器。
center	元素位于容器的中心。
flex-start	元素位于容器的开头。
flex-end	元素位于容器的结尾。
baseline	元素位于容器的基线上。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

1CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명

取值同 align-items。

参考

本文转载自：https://www.jianshu.com/p/5856c4ae91f2

핫 AI 도구

뜨거운 도구

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는