【CSS3】 CSS3: 플렉스 박스

1. Flex 레이아웃이란

2. 컨테이너를 Flex 레이아웃으로 지정하는 방법

3. Flex 기본 구문

1. display

2. flex-direction

3. justify- 콘텐츠

4. 항목 정렬

5. 플라이 랩

6. 자체 정렬

7. 플렉스 플로우

8. 플렉스

9. 순서

4. 예

1. 주사위 레이아웃

2. 성배 레이아웃

5. 참고 기사

1. Flex 레이아웃이란 무엇입니까?

레이아웃의 기존 솔루션은 상자 모델을 기반으로 합니다. 디스플레이 속성 + 위치 속성 + 부동 속성에 대해 설명합니다. 예를 들어, 수직 센터링은 달성하기 쉽지 않습니다. Flex 레이아웃은 W3C 조직이 2009년에 제안한 레이아웃 솔루션으로, 다양한 페이지 레이아웃을 간단하고 완전하며 반응적으로 구현할 수 있습니다. 현재는 모든 브라우저에서 지원됩니다. Flex 레이아웃은 향후 레이아웃에서 선호되는 솔루션이 될 것입니다.

둘째, 컨테이너를 Flex 레이아웃으로 지정하는 방법

display 속성에 값만 추가하면 됩니다. 컨테이너에서 플렉스.

.box{
  display: flex;
}

3. Flex의 기본 구문

display

구문 : display:flex;

는 Flex를 지정합니다.

플렉스 방향

구문: 플렉스-방향:행 |행-역방향 |열 |열-역방향

유연한 하위 요소가 상위 컨테이너에 정렬되는 순서를 지정합니다. direction:rtl; 또는 direction:ltr; rtl과 ltr은 오른쪽에서 왼쪽, 왼쪽 약어 오른쪽으로.

justify content

구문:

justify-content: flex-start | flex-end | center | space-between | space-주변

콘텐츠 정렬( justify-content 속성은 Flex 컨테이너에 적용되어 Flex 컨테이너의 기본 축을 따라 Flex 항목을 정렬합니다.

개념이해도 :

그 중 우주주변에서 저자는 간단한 공식을 정리했다:

x=(W₂-N*W₁)/(2N)

x: 양쪽 왼쪽 너비입니다.

W₂: 모듈의 너비입니다.

W₁: 서브모듈의 너비(각 짝수)입니다.

N:

align-items

구문: align-items: flex-시작 | 플렉스-끝 | 센터 | 기준선 | 스트레치

플렉스박스 요소의 정렬을 가로축(세로축) 방향으로 설정합니다.

다음 그림은 독자가 기준선을 이해하는 데 도움이 될 수 있습니다.

flex-wrap

구문: 플렉스-플로우: 노랩 | 워프-리버스

align-content

구문:

align-content: flex-start | flex-end | center | space-between | space-|늘리기

각각의 정렬을 설정합니다. 라인웨이.

align-self

구문:

align-self: auto | 플렉스-시작 | 플렉스-끝 | 센터 | 기준선 | 스트레칭

탄성요소 자체의 정렬을 교차축 방향으로 설정합니다. 이 속성은 align-content와 구별되어야 합니다. align-content의 범위는 각 행이지만 align-self는 특정 행의 특정 탄력적 요소일 뿐입니다.

flex-flow

구문: flex-direction 및 flex-wrap의 약어입니다.

flex

구문: flex:

flex-grow flex-shrink flex-basis |auto|initial|inherit;

요소 할당 공간을 지정합니다. flex-basis가 100%이면 flex 모듈이 별도의 라인을 차지한다는 점에 유의해야 합니다.

oder

구문: order:

number|initial|inherit;

유연한 모듈의 순서를 지정합니다. 값 값이 작을수록 우선순위가 높을 수 있습니다.

4. 예시

1. 주사위의 레이아웃

주사위 한쪽에 최대 9개까지 놓을 수 있습니다.

下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。

如果不加说明，本节的HTML模板一律如下。

<p class="box">  <span class="item">>>

上面代码中，p元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。

1.1 单项目

首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。

.box {  display: flex;}

设置项目的对齐方式，就能实现居中对齐和右对齐。

.box {  display: flex;  justify-content: center;}

.box {  display: flex;  justify-content: flex-end;}

设置交叉轴对齐方式，可以垂直移动主轴。

.box {  display: flex;  align-items: center;}

.box {  display: flex;  justify-content: center;  align-items: center;}

.box {  display: flex;  justify-content: center;  align-items: flex-end;}

.box {  display: flex;  justify-content: flex-end;  align-items: flex-end;}

1.2 双项目

.box {  display: flex;  justify-content: space-between;}

.box {  display: flex;  flex-direction: column;  
justify-content: space-between;}

.box {  display: flex;  flex-direction: column;  
justify-content: space-between;  align-items: center;}

.box {  display: flex;  flex-direction: column;  
justify-content: space-between;  align-items: flex-end;}

.box {  display: flex;}.item:nth-child(2) {  align-self: center;}

.box {  display: flex;  
justify-content: space-between;}.item:nth-child(2) {  align-self: flex-end;}

1.3 三项目

.box {  display: flex;}.item:nth-child(2) {  align-self: center;}.item:nth-child(3) {  
align-self: flex-end;}

1.4 四项目

.box {  display: flex;  flex-wrap: wrap;  justify-content: flex-end;  
align-content: space-between;}

HTML代码如下。

<p class="box">  <p class="column"><span class="item">><span class="item">>  >  
<p class="column"><span class="item">><span class="item">>  >>

CSS代码如下。

.box {  display: flex;  flex-wrap: wrap;  align-content: space-between;}
.column {  flex-basis: 100%;  display: flex;  justify-content: space-between;}

1.5 六项目

.box {  display: flex;  flex-wrap: wrap;  align-content: space-between;}

.box {  display: flex;  
flex-direction: column;  
flex-wrap: wrap;  
align-content: space-between;
}

HTML代码如下。

<p class="box">  <p class="row"><span class="item">>
<span class="item">><span class="item">>  >  <p class="row"><span class="item">>  >  
<p class="row"> <span class="item">> <span class="item">>  >>

CSS代码如下。

.box {  display: flex;  flex-wrap: wrap;}
.row{  flex-basis: 100%;  display:flex;}
.row:nth-child(2){  justify-content: center;}
.row:nth-child(3){  justify-content: space-between;}

1.6 九项目

.box {  display: flex;  flex-wrap: wrap;}

2,圣杯布局

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

HTML代码如下：

<p class="flex-container">
  <header class="header">头部header>
  <article class="main"><p>主体p>
  article>
  <aside class="aside aside1">边栏 1aside>
  <aside class="aside aside2">边栏 2aside>
  <footer class="footer">底部footer>p>

CSS代码入下：

.flex-container {
display: -webkit-flex;display: flex;  
    -webkit-flex-flow: row wrap;flex-flow: row wrap;font-weight: bold;text-align: center;
}
.flex-container > * {padding: 10px;flex: 1 100%;
}
.main {text-align: left;background: cornflowerblue;
}
.header {background: coral;}
.footer {background: lightgreen;}
.aside1 {background: moccasin;}
.aside2 {background: violet;}@media all and (min-width: 600px) {.aside { flex: 1 auto; }}

@media all and (min-width: 800px) {
.main    
{ 
flex: 3 0px; 
}
.aside1 
{ 
order: 1; 
} 
    .main    
    { order: 2; 
    }
    .aside2 { order: 3; }
    .footer  
    { 
    order: 4; 
    }
    }

以上就是【CSS3】 CSS3:弹性盒子（Flex Box）的内容，更多相关内容请关注PHP中文网（www.php.cn）！