유연한 레이아웃(Flex Layout)에 대한 자세한 소개

零下一度
풀어 주다: 2017-07-17 15:03:51
원래의
2796명이 탐색했습니다.

1. 유연한 레이아웃

일상 생활에서 우리는 일반적으로 다음과 같은 레이아웃 유형을 사용합니다.

1. 플로팅 + 위치 지정

2. 적응형(백분율)

3. 반응형 레이아웃

4. 유연한 레이아웃(Flex 레이아웃)

오늘 정리하고 싶은 것은 가장 일반적으로 사용되는 유연한 레이아웃이지만 블록 태그와 인라인 블록 태그에는 차이가 있습니다.

{:;
}
input{
  :;
}
로그인 후 복사

 물론 돈처럼 모든 사람이 모든 것을 좋아할 수는 없고, 나름의 장점과 단점도 있습니다.

장점: 호환성은 모든 브라우저를 지원하고(Webkit 코어가 있는 브라우저는 -webkit-를 추가해야 함) 사용자 기본 설정에 따라 조정될 수 있으며 모든 컨테이너를 Flex 레이아웃으로 지정할 수 있습니다. -webkit-),可以随用户的喜好进行调节,可以将任何一个容器指定为Flex布局。

  缺点:因为弹性布局可调节,所以有巨大的可能性,需要花很多的时间进行调整;有些弹性设计要为IE6单独设计样式,不过……IE6还有多少人在用(⊙﹏⊙)b。

  注意:当我们使用了弹性布局,那么在CSS里的float、clear和vertical-align就会失效。

二、  弹性布局的属性

  首先是作为弹性布局的容器的属性。  

  1.flex-direction属性

 

  flex-direction决定了容器的方向。

div {
  flex-direction: row | row-reverse | column | column-reverse;
}
로그인 후 복사

  四个值分别为:row(默认值)从左向右、row-reverse从右向左、column从上到下、column-reverse从下到上。

 

  2.flex-wrap属性

 

  默认情况下的布局一般在同一行,当设置了flex-wrap属性之后将自动将排列不下的内容进行换行。

div{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
로그인 후 복사

  四个值分别为:nowrap(默认值)不换行、wrap向下换行、wrap-reverse向上换行。

 

  3.flex-flow属性

 

  flex-flow属性是以上两种属性的简写形式,默认值是row nowrap。

div {
  flex-flow: <flex-direction> || <flex-wrap>;
}
로그인 후 복사

  

  4.justify-content属性

 

  justify-content属性定义了在容器方向上的对齐方式。

div {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
로그인 후 복사

  flex-start(默认值):向左对齐。

  flex-end:向右对齐。

  center: 居中对齐。

  space-between:两端对齐,每一个子元素等距离间隔,子元素与容器边框无间隔。

  space-around:每个子元素两侧的间隔相等。子元素之间的间隔比子元素与容器边框的间隔大一倍。

 

  5.align-items属性

 

  align-items属性定义在垂直容器方向上的对齐方式。

div {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
로그인 후 복사

  flex-start:垂直方向的起点对齐。

  flex-end:垂直方向的终点对齐。

  center:垂直方向的中点对齐。

  baseline: 与第一个子元素中文字的基线对齐。

  stretch(

  단점: 유연한 레이아웃은 조정 가능하기 때문에 가능성이 크고 조정하는 데 많은 시간이 필요합니다. 일부 유연한 디자인은 IE6에 대해 별도의 스타일링이 필요하지만...아직도 IE6를 사용하는 사람이 얼마나 됩니까? .

 참고: 유연한 레이아웃을 사용하는 경우 CSS의 부동, 지우기 및 수직 정렬이 유효하지 않습니다.

2. 유연한 레이아웃의 속성

 

첫 번째는 유연한 레이아웃 역할을 하는 컨테이너의 속성입니다.

 

 
🎜1.flex-direction 속성🎜🎜🎜🎜🎜🎜 flex-direction은 컨테이너의 방향을 결정합니다. 🎜🎜
div {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
로그인 후 복사
🎜🎜 네 가지 값은 왼쪽에서 오른쪽으로 행(기본값), 오른쪽에서 왼쪽으로 행 역방향, 위에서 아래로 열, 아래에서 위로 열 역순입니다. 🎜🎜 🎜🎜  🎜🎜2.flex-wrap 속성 🎜🎜🎜🎜 🎜🎜  기본적으로 flex-wrap 속성을 설정하면 정렬할 수 없는 내용은 자동으로 줄 바꿈됩니다. 🎜🎜
.son {
  order: <integer>;
}
로그인 후 복사
로그인 후 복사
🎜🎜 네 가지 값은 다음과 같습니다. nowrap(기본값)은 줄 바꿈하지 않고, 줄 바꿈은 아래쪽으로 줄 바꿈하고, Wrap-reverse는 위쪽으로 줄 바꿈합니다. 🎜🎜 🎜🎜 🎜🎜3.flex-flow attribute🎜🎜🎜🎜🎜🎜 flex-flow 속성은 위 두 속성의 약어이며 기본값은 row nowrap입니다. 🎜🎜
.son {
  flex-grow: <number>; /* default 0 */}
로그인 후 복사
로그인 후 복사
🎜🎜 🎜🎜 🎜🎜4.justify-content attribute🎜🎜🎜🎜 🎜🎜 justify-content 속성은 컨테이너 방향의 정렬을 정의합니다. 🎜🎜
.son {
  flex-shrink: <number>; /* default 1 */}
로그인 후 복사
로그인 후 복사
🎜🎜 flex-start(기본값): 왼쪽으로 정렬합니다. 🎜🎜 flex-end: 오른쪽으로 정렬합니다. 🎜🎜 center: 가운데 정렬. 🎜🎜 Space-between: 양쪽 끝을 정렬하고 각 하위 요소의 간격을 동일하게 유지하며 하위 요소와 컨테이너 테두리 사이에 간격이 없습니다. 🎜🎜 space-around: 각 하위 요소의 양쪽 공백이 동일합니다. 하위 요소 사이의 간격은 하위 요소와 컨테이너 테두리 사이의 간격의 두 배입니다. align-items 속성은 수직 컨테이너 방향의 정렬을 정의합니다. 🎜🎜
.son {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
로그인 후 복사
로그인 후 복사
🎜🎜 flex-start: 시작점을 세로 방향으로 정렬합니다. 🎜🎜 flex-end: 수직 끝점 정렬. 🎜🎜 center: 중심점을 세로 방향으로 정렬합니다. 🎜🎜 기준선: 첫 번째 하위 요소에 있는 텍스트의 기준선에 맞춰 정렬됩니다. 🎜🎜 stretch(기본값): 하위 요소가 높이를 설정하지 않거나 높이가 자동으로 설정된 경우 컨테이너의 전체 높이를 차지합니다. 🎜🎜 🎜🎜  🎜🎜6.align-content 속성 🎜🎜🎜🎜 🎜🎜  align-content 속성은 하위 요소의 양방향 정렬을 정의합니다. 🎜🎜rreee🎜

  flex-start:当容器方向子元素刚好填满时,与垂直方向的起点对齐。

  flex-end:当容器方向子元素刚好填满时,与垂直方向的终点对齐。

  center:当容器方向子元素刚好填满时,与垂直方向的中点对齐。

  space-between:当容器方向子元素刚好填满时,垂直方向两端对齐,子元素之间的等距离间隔。

  space-around:两个方向两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

  stretch(默认值):占满整个垂直方向。

 

  下面就是具有弹性布局容器中子元素的属性

  1.order属性

 

  order属性定义了子元素的排列顺序,数值小的在前。

 

.son {
  order: <integer>;
}
로그인 후 복사
로그인 후 복사

 

  

  2.flex-grow属性

 

  flex-grow属性定义了子元素的放大比例,默认值为0。

.son {
  flex-grow: <number>; /* default 0 */}
로그인 후 복사
로그인 후 복사

  当给所有子元素设置该属性为1,那么将等分所有空间,如果单独给某一个子元素设置n倍,那么该子元素将占据的空间比其他子元素多n倍。

  

  3.flex-shrink属性

 

  flex-shrink属性定义了子元素的缩小比例,默认值为1。

.son {
  flex-shrink: <number>; /* default 1 */}
로그인 후 복사
로그인 후 복사

  给所有子元素设置该属性为1,当空间不足时那么所有子元素将等比例缩小平分所有空间,如果单独给某一个子元素设置0,那么该子元素将在空间不足时不缩小。

  

  4.flex-basis属性

 

  该属性定义了给子元素分配空间时其占据的空间为多少,可以设置为与其width和height属性一样的值,那么它将被分配固定的空间大小。

  

  5.flex属性

 

  该属性为flex-growflex-shrink 和 flex-basis的简写。

 

  6.align-self属性

 

  该属性允许设置过的子元素有与其他子元素不一样的对齐方式,可以覆盖align-items属性。

.son {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
로그인 후 복사
로그인 후 복사

 Auto: 기본값으로, 상위 항목의 align-items 속성이 기본적으로 상속됨을 나타냅니다.

 flex-start: 시작점을 세로 방향으로 정렬합니다.   flex-start:垂直方向的起点对齐。

  flex-end:垂直方向的终点对齐。

  center:垂直方向的中点对齐。

  baseline: 与第一个子元素中文字的基线对齐。

  stretch(

 flex-end: 수직 끝점 정렬.

 center: 중심점을 수직 방향으로 정렬합니다.

기준선: 첫 번째 하위 요소에 있는 텍스트의 기준선에 맞춰 정렬됩니다.

 stretch(기본값): 하위 요소가 높이를 설정하지 않거나 높이가 자동으로 설정된 경우 컨테이너의 전체 높이를 차지합니다. 🎜🎜 🎜 flex 레이아웃(elastic 레이아웃) 🎜🎜🎜 1. 컨테이너의 속성은 다음과 같습니다. flex-dirction: (주축 방향 결정) (즉, 항목 배열 방향) 값: row/ row-reverse/column/column-reverse / flex-wrap: (한 축을 정렬할 수 없는 경우 줄 바꿈하는 방법) 값: nowrap(기본값): 줄 바꿈이 없습니다. Wrap: 첫 번째 줄을 맨 위에 오게 하여 줄 바꿈합니다. Wrap-reverse: 아래 첫 번째 줄로 줄바꿈합니다. flex-flow: (flex-flow 속성은 flex-direction 속성과 flex-wrap 속성의 약어입니다. 기본값은 row nowrap입니다.) justify-content: (justify-content 속성은 항목의 정렬을 정의합니다. 기본 축.) 값 가져오기: flex-start(기본값): 왼쪽 정렬 flex-end: 오른쪽 정렬 가운데: 가운데 space-between: 양쪽 끝에 정렬, 항목 사이의 간격은 동일합니다. space-around: 각 항목이 양쪽에 동일한 간격으로 배치됩니다. 따라서 항목 사이의 공간은 항목과 테두리 사이의 공간의 두 배입니다. align-items (교차축 정렬 방법) 값: flex-start/flex-end/center/baseline/stretch align-content (여러 축의 정렬을 정의합니다. 항목에 축이 하나만 있는 경우 이 속성에는 effect 함수) 값 : flex-start : 교차축의 시작점에 맞춰 정렬합니다. flex-end: 교차축의 끝점에 맞춰 정렬됩니다. 중심: 교차축의 중간점에 정렬됩니다. space-between : 교차축의 양끝에 맞춰 정렬하며, 축 사이의 간격이 고르게 분포되도록 합니다. space-around: 각 축이 양쪽에서 동일한 간격으로 배치됩니다. 따라서 축 사이의 거리는 축과 프레임 사이의 거리의 두 배입니다. Stretch(기본값): 축이 전체 교차 축을 차지합니다. ~                                               값이 작을수록 앞쪽으로 배열됩니다. 기본값은 0입니다. flex-grow 속성은 항목의 확대 비율을 정의합니다. 즉, 남은 공간이 있으면 확대되지 않습니다. flex-shrink 속성은 항목의 축소 비율을 정의합니다. 기본값은 1입니다. 즉, 공간이 부족하면 항목이 축소됩니다. Flex 기반 항목(기본 크기)이 차지하는 기본 축 공간입니다. 브라우저는 이 속성을 사용하여 기본 축에 추가 공간이 있는지 계산합니다. 기본값은 프로젝트의 원래 크기인 auto입니다. flex align-self를 사용하면 단일 항목을 다른 항목과 다르게 정렬하여 align-items 속성을 재정의할 수 있습니다. 기본값은 auto입니다. 이는 상위 요소의 align-items 속성을 상속함을 의미합니다. 상위 요소가 없으면 Stretch와 동일합니다. 🎜

위 내용은 유연한 레이아웃(Flex Layout)에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿