>  기사  >  웹 프론트엔드  >  CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명

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

青灯夜游
青灯夜游앞으로
2020-07-11 16:33:063163검색

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

1. CSS3 가변 상자

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

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

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

2. 브라우저 지원

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

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

Properties CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명 CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명 CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명 CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명 CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명
기본 지원(단일 줄 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

相关推荐:CSS视频教程

위 내용은 CSS3가 유연한 레이아웃을 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 jianshu.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제