CSS3布局排版

CSS3布局排版

分栏布局

属性 描述
column-width 栏目宽度
column-count 栏目列数
column-gap 栏目距离
column-rule 栏目间隔线
column-span 是否跨栏显示

样式

1
2
3
4
5
6
7
8
9
10
.wrap{
column-width:300px;
column-count:3;
column-gap:50px;
column-rule:3px dashed blue;
}
h1{
column-span:all;
text-align: center;
}

结构

1
2
3
4
5
<div class="wrap">
<h1>标题标题标题标题标题</h1>
<p>一内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>二内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
</div>

viewport视口

属性 描述
device-width 设备宽度
user-scalable 是否允许用户手动缩放页面
initial-scale 初始缩放值
maximum-scale 放大最大比例
minimum-scale 缩小最小比例

media媒体查询

属性值 描述
screen 用于电脑屏幕,平板电脑,智能手机等。
speech 应用于屏幕阅读器等发声设备
min-width 页面最小可见区域宽度
max-width 页面最大可见区域宽度
min-height 页面最小可见区域高度
max-height 页面最大可见区域高度
orientation 横屏-landscape、竖屏-portrait

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
*{box-sizing: border-box;}
.wrap{
width: 100%;
max-height: 1200px;
border: 5px solid black;
overflow: hidden;
margin: 0 -10px;
}
.wrap div{
width: 24%;
height: 200px;
background: blue;
color: white;
text-align: center;
font-size: 30px;
float: left;
margin:0 .5% 10px;
}
@media screen and (max-width: 1200px){
.wrap div{
width: 32%;
margin:0 .5% 10px;
}
}
@media screen and (max-width: 960px){
.wrap div{
width: 49%;
margin:0 .5% 10px;
}
}
@media screen and (max-width: 640px){
.wrap div{
width: 100%;
margin:0 0% 10px;
}
}

结构

1
2
3
4
5
6
7
8
9
10
11
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>

Flex布局

flex-弹性布局:任何一个元素都可以设置为 Flex 布局

1
2
3
4
5
6
div{
display: flex;
}
span{
display: inline-flex;
}

flex元素属性

flex-direction 排列方向

属性值 描述
row (默认)水平排列,从左往右
row-reverse 水平方向,从右往左
column 垂直排列,从上往下
column-reverse 垂直排列,从下往上
1
2
3
4
5
6
7
8
9
10
11
12
13
.wrap{
width: 400px;
border: 5px solid black;
display: flex;
/*flex-direction:row | row-reverse | column | column-reverse*/
flex-direction: row;
}
.wrap div{
width: 100px;
height: 100px;
background: red;

}
1
2
3
4
5
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

flex-wrap 单行多行

属性值 描述
nowrap (默认)不换行
wrap 往下换行
wrap-reverse 往上换行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.wrap{
width: 400px;
border: 5px solid black;
display: flex;
flex-direction: row;
/*flex-wrap flex-wrap: nowrap | wrap | wrap-reverse;*/
flex-wrap:wrap-reverse;
}
.wrap div{
width: 100px;
height: 100px;
background: red;

}
1
2
3
4
5
6
7
8
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

flex-flow简写

flex-direction和flex-wrap简写

1
2
3
4
/*flex-flow: flex-direction flex-wrap;*/
div{
flex-flow:row wrap;
}

justify-content 水平对齐

属性值 描述
flex-start (默认)左对齐
flex-end 右对齐
center 居中
space-between 两端对齐,元素之间间隔
space-around 两端和元素之间间隔
1
2
3
4
5
6
7
8
9
10
11
12
13
.wrap{
width: 400px;
height: 400px;
border: 5px solid black;
display: flex;
/*justify-content: flex-start | flex-end | center | space-between | space-around;*/
justify-content:space-around;
}
.wrap div{
width: 100px;
height: 100px;
background: red;
}
1
2
3
4
5
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

align-items 垂直对齐

属性值 描述
stretch (默认)元素没设高度时,与父级相等
flex-start 上对齐
flex-end 下对齐
center 居中
baseline 文字的基线对齐
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.wrap{
width: 400px;
height: 400px;
border: 5px solid black;
display: flex;
/*align-items: flex-start | flex-end | center | baseline | stretch;*/
align-items:center;
}
.wrap div{
width: 100px;
height: 100px;
background: red;
}
.wrap div:nth-child(1){
font-size: 30px;
}
.wrap div:nth-child(2){
height: 200px;
}
.wrap div:nth-child(3){
font-size: 60px;
height: 150px;
}
1
2
3
4
5
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

align-content 多行垂直对齐

属性值 描述
stretch (默认)元素没设高度时,占满父级
flex-start 上对齐
flex-end 下对齐
center 居中
space-between 两端对齐,元素之间间隔
space-around 两端和元素之间间隔
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.wrap{
width: 400px;
height: 400px;
border: 5px solid black;
display: flex;
flex-wrap: wrap;
/*align-content: flex-start | flex-end | center | space-between | space-around | stretch;*/
align-content:center;
}
.wrap div{
width: 100px;
height: 100px;
background: red;
}
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

flex子元素属性

order排列顺序

order数值越小,排列越靠前,默认为0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.wrap{
width: 400px;
height: 400px;
border: 5px solid black;
display: flex;
}
.wrap div{
width: 100px;
height: 100px;
background: red;
}
.wrap div:nth-child(2){
order:-1;
}
1
2
3
4
5
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

flex-grow等分剩余空间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.wrap{
width: 400px;
height: 400px;
border: 5px solid black;
display: flex;
}
.wrap div{
height: 100px;
background: red;
margin: 0 5px;
}
.wrap div:nth-child(1){
flex-grow:1;
}
.wrap div:nth-child(2){
flex-grow:2;
}
.wrap div:nth-child(3){
flex-grow:1;
}
1
2
3
4
5
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

flex-shrink缩小比例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.wrap{
width: 400px;
height: 400px;
border: 5px solid black;
display: flex;
}
.wrap div{
width: 200px;
height: 100px;
background: red;
margin: 0 5px;
}
.wrap div:nth-child(1){
flex-shrink:1;
}
.wrap div:nth-child(2){
flex-shrink:2;
}
.wrap div:nth-child(3){
flex-shrink:1;
}
1
2
3
4
5
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

flex-basis 设置大小

在元素分配多余空间之前设置固定大小和设置width/height一样

flex 简写

flex属性是flex-grow, flex-shrink 和 flex-basis的简写 默认值为0 1 auto。

1
2
3
div{
flex: flex-grow flex-shrink flex-basis;
}

align-self 单元素设置对齐

属性值 描述
stretch (默认)元素没设高度时,与父级相等
flex-start 上对齐
flex-end 下对齐
center 居中
baseline 文字的基线对齐
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.wrap{
width: 400px;
height: 400px;
border: 5px solid black;
display: flex;
}
.wrap div{
width: 100px;
height: 100px;
background: red;
margin: 0 5px;
}
.wrap div:nth-child(3){
align-self: flex-end;
}
1
2
3
4
5
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
文章作者: Coio
文章链接: http://yoursite.com/2018/03/24/CSS3布局排版/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Coio
打赏
  • 微信
  • 支付寶