1. Flex란 무엇인가요?
Flex는 CSS3에서 도입된 레이아웃 방법으로, 대부분의 사람들은 이를 탄력적 레이아웃이라고 부릅니다. ?
모든 컨테이너를 Flex 레이아웃으로 지정할 수 있습니다
1 #box { 2 display:flex; 3 }
3. Flex의 기본 용어
Flex 레이아웃을 사용하는 요소를
플렉스 요소(플렉스 항목).
플렉스 컨테이너에는 서로 수직인 두 개의 축, 즉보조축(교차축)이 있습니다.
flex 요소는 다음과 같습니다.main end(main end)까지 주축을 따라 순차적으로 배열됩니다.
flex 컨테이너에 여러 행의 flex 요소가 포함되어 있으면cross start부터 cross end.
단일 플렉스 요소가 차지하는 주축 공간을보조 축 길이(교차 크기)라고 합니다. .
스핀들 방향
처음 두 개의 약어 | |
---|---|
flex-direction |
主轴方向 |
flex-wrap |
换行样式 |
flex-flow |
前两个的简写形式 |
justify-content |
主轴对齐方式 |
align-items |
单行的副轴对齐方式 |
align-content | Single -라인 보조 축 정렬 |
align-content
🎜🎜다중 라인 보조 축 정렬🎜🎜 🎜🎜五、flex-direction,设置主轴的对齐方向,有四个值:
row
(默认值):主轴为水平方向,起点在左端。
row-reverse
:主轴为水平方向,起点在右端。
column
:主轴为垂直方向,起点在上沿。
column-reverse
:主轴为垂直方向,起点在下沿。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>flex布局 - by ghostwu</title> <style> #box { display: flex; flex-direction: row; } #box p { width: 100px; height: 100px; background: #09f; margin: 10px; } </style> </head> <body> <p id="box"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> </p> </body> </html>
flex-direction设置为row:
flex-direction设置为row-reverse
flex-direction设置为column,下面的示意图我只截取了前面5个p,后面如果截取的话,图片占的位置太多了,影响体验.
flex-direction设置为column-reverse:
六、flex-wrap :定义子元素超过一行,如何换行,常用属性值:
nowrap(默认值):默认不换行。
wrap:换行,第二行在第一行下面,从左到右
wrap-reverse:换行,第二行在第一行上面,从左到右
1 #box { 2 display: flex; 3 flex-direction: row; 4 flex-wrap: nowrap; 5 }
flex-wrap:nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
七、flex-flow:是flex-direction 和flex-wrap的简写形式,默认是 row nowrap
#box { display:flex; /* flex-flow: row nowrap; */ /* flex-flow: row wrap; */ /* flex-flow: row wrap-reverse; */ /* flex-flow: row-reverse wrap-reverse; */ flex-flow: column wrap; }
八、 justify-content: 子元素在主轴对齐方式
flex-start
(默认值):左对齐
flex-end
:右对齐
center
: 居中
space-between
:两端对齐,项目之间的间隔都相等。
space-around
:每个项目两侧的间隔相等。
#box { display:flex; flex-flow: row wrap; /* justify-content: flex-start; */ /* justify-content: flex-end; */ /* justify-content: center; */ /* justify-content: space-between; */ justify-content: space-around; }
这里主要搞清楚space-between和space-around的区别
justify-content: space-between;
justify-content: space-around;
위 내용은 CSS3 유연한 상자 모델 플렉스 지식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!