CSS3 유연한 상자 모델 플렉스 지식
- 一个新手원래의
- 2017-10-12 10:38:431658검색
1. Flex란 무엇인가요?
Flex는 CSS3에서 도입된 레이아웃 방법으로, 대부분의 사람들은 이를 탄력적 레이아웃이라고 부릅니다. ?
모든 컨테이너를 Flex 레이아웃으로 지정할 수 있습니다
1 #box {
2 display:flex;
3 }
3. Flex의 기본 용어
- flex 컨테이너(flex 컨테이너)
- 라고 합니다. 요소는
플렉스 요소(플렉스 항목).
플렉스 컨테이너에는 서로 수직인 두 개의 축, 즉 주축(주축) - 과
보조축(교차축)이 있습니다.
flex 요소는 다음과 같습니다. main start - 부터
main end(main end)까지 주축을 따라 순차적으로 배열됩니다.
flex 컨테이너에 여러 행의 flex 요소가 포함되어 있으면 flex 행 - 보조 축을 따라 순서대로 배열됩니다.
cross start부터 cross end.
단일 플렉스 요소가 차지하는 주축 공간을 기본 크기(기본 크기) - 라고 하고, 보조 축 공간을
보조 축 길이(교차 크기)라고 합니다. .
4. 하위 요소의 표시 모드를 제어하기 위해 상위 컨테이너에는 6가지 속성이 설정되어 있습니다.
스핀들 방향
| 처음 두 개의 약어 | |
|---|---|
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!