>  기사  >  웹 프론트엔드  >  【CSS3】 CSS3: 플렉스 박스

【CSS3】 CSS3: 플렉스 박스

PHP中文网
PHP中文网원래의
2016-12-05 13:26:301890검색

  1. Flex 레이아웃이란

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

  3. Flex 기본 구문

    1. display

    2. flex-direction

    3. justify- 콘텐츠

    4. 항목 정렬

    5. 플라이 랩

    6. 자체 정렬

    7. 플렉스 플로우

    8. 플렉스

    9. 순서

    1. 주사위 레이아웃

    2. 성배 레이아웃

  4. 참고 기사

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=(W2-N*W1)/(2N)

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

W2: 모듈의 너비입니다.

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

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代码如下:

9b5daa3407e0c48a5f3f492558298fbb
  72c941ffd0db4f4b78a97b702d08b85e头部header>
  ca9edeb25e209951e9499be9e0cce7cfe388a4556c0f65e1904146cc1a846bee主体p>
  article>
  4dd108320b3638b22adf08f41207540f边栏 1aside>
  d99b8f80ee6d46f6044aed7273c60db0边栏 2aside>
  14b51f17a31fa25726e48adc19e8a249底部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)!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:使用CSS3实现一个3D相册다음 기사:旅游网站首页