Flex 레이아웃이란
컨테이너를 Flex 레이아웃으로 지정하는 방법
Flex 기본 구문
display
flex-direction
justify- 콘텐츠
항목 정렬
플라이 랩
자체 정렬
플렉스 플로우
플렉스
순서
예
주사위 레이아웃
성배 레이아웃
참고 기사
레이아웃의 기존 솔루션은 상자 모델을 기반으로 합니다. 디스플레이 속성 + 위치 속성 + 부동 속성에 대해 설명합니다. 예를 들어, 수직 센터링은 달성하기 쉽지 않습니다. Flex 레이아웃은 W3C 조직이 2009년에 제안한 레이아웃 솔루션으로, 다양한 페이지 레이아웃을 간단하고 완전하며 반응적으로 구현할 수 있습니다. 현재는 모든 브라우저에서 지원됩니다. Flex 레이아웃은 향후 레이아웃에서 선호되는 솔루션이 될 것입니다.
display 속성에 값만 추가하면 됩니다. 컨테이너에서 플렉스.
.box{ display: flex; }
구문 : 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: flex-시작 | 플렉스-끝 | 센터 | 기준선 | 스트레치
플렉스박스 요소의 정렬을 가로축(세로축) 방향으로 설정합니다.
다음 그림은 독자가 기준선을 이해하는 데 도움이 될 수 있습니다.
align-content구문: 플렉스-플로우: 노랩 | 워프-리버스
구문:각각의 정렬을 설정합니다. 라인웨이. align-selfalign-content: flex-start | flex-end | center | space-between | space-|늘리기
구문:탄성요소 자체의 정렬을 교차축 방향으로 설정합니다. 이 속성은 align-content와 구별되어야 합니다. align-content의 범위는 각 행이지만 align-self는 특정 행의 특정 탄력적 요소일 뿐입니다. flex-flowalign-self: auto | 플렉스-시작 | 플렉스-끝 | 센터 | 기준선 | 스트레칭
구문: flex-direction 및 flex-wrap의 약어입니다.flex
구문: flex:요소 할당 공간을 지정합니다. flex-basis가 100%이면 flex 모듈이 별도의 라인을 차지한다는 점에 유의해야 합니다. oderflex-grow flex-shrink flex-basis |auto|initial|inherit;
구문: order:유연한 모듈의 순서를 지정합니다. 값 값이 작을수록 우선순위가 높을 수 있습니다. 4. 예시1. 주사위의 레이아웃 주사위 한쪽에 최대 9개까지 놓을 수 있습니다.number|initial|inherit;
下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo。
如果不加说明,本节的HTML模板一律如下。
<p class="box"> <span class="item">>>
上面代码中,p元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目。如果有多个项目,就要添加多个span元素,以此类推。
首先,只有左上角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;}
.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;}
.box { display: flex;}.item:nth-child(2) { align-self: center;}.item:nth-child(3) { align-self: flex-end;}
.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;}
.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;}
.box { display: flex; flex-wrap: wrap;}
圣杯布局(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)!