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

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(

div {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

.son {
  order: <integer>;
}

.son {
  flex-grow: <number>; /* default 0 */}

.son {
  flex-shrink: <number>; /* default 1 */}

.son {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

.son {
  order: <integer>;
}

.son {
  flex-grow: <number>; /* default 0 */}

.son {
  flex-shrink: <number>; /* default 1 */}

.son {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

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