最简单的相应布局
父标签CSS配置
display: flex; /*外部容器设置为flex布局 内部才能进行布局操作*/
flex-direction: row;/*表示元素的走向*/
flex-wrap:wrap;/*声明元素是否换行*/
子标签CSS配置
height:200px;
margin:5px;
flex-grow:1;
flex-basis:300px;
这样就可以做到响应式效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<style>
ul{
display: flex; /*外部容器设置为flex布局 内部才能进行布局操作*/
flex-direction: row;/*表示元素的走向*/
flex-wrap:wrap;/*声明元素是否换行*/
/* 在横轴上的对齐方式
* |flex-start:左对齐|flex-end:右对齐|center:横向居中对齐|space-between:左右两端对齐|space-around:同行元素间距相等|
* (只有在不设置 flex-grow 时才起作用)
*/
justify-content: space-around;
/* 在纵轴上的对齐方式
* |flex-start:上对齐|flex-end:下对齐|center:纵向居中对齐|baseline:项目的第一行文字的基线对齐|stretch:[默认]|
* (只有在元素和元素的高度不一样时才体现出来)
*/
align-items:stretch;
/*
* 轴线对齐方式
* flex-start:与交叉轴的起点对齐。
* flex-end:与交叉轴的终点对齐。
* center:与交叉轴的中点对齐。
* space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
* space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
*/
align-content:space-around;
list-style-type:none;
padding:0;
}
li{
height:300px;
/* flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果所有项目的flex-grow属性都为1,
则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。*/
flex-grow:1;
text-align: center;
margin:15px;
border: 1px solid red;
background: #c6c7c9;
}
.lio{
/*width:300px;*/
/*height: 300px;*/
/*flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。
它的默认值为auto,即项目的本来大小。它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。*/
flex-basis:300px;
/*order: 2; !*表示元素的显示,和 z-index 的原理差不多,这个是用来控制元素排列顺序先后,不同的是数值越小排列越靠前*!*/
}
.liw{
/*width:600px;*/
/*height:600px;*/
flex-basis:600px;
/*order: 1; !*表示元素的显示,和 z-index 的原理差不多,这个是用来控制元素排列顺序先后,不同的是数值越小排列越靠前*!*/
}
</style>
</head>
<body>
<ul>
<li class="lio">1</li>
<li class="liw">2</li>
<li class="lio">3</li>
<li class="liw">4</li>
<li class="lio">5</li>
<li class="liw">6</li>
<li class="lio">7</li>
<li class="liw">8</li>
<li class="lio">9</li>
<li class="liw">10</li>
<li class="lio">11</li>
<li class="liw">12</li>
<li class="lio">13</li>
<li class="liw">14</li>
</ul>
</body>
</html>
使用自适应的样式,如:手机页面某个元素不显示,而电脑端显示,或者电脑端不显示手机端显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Title</title>
<style>
ul{
display: flex; /*外部容器设置为flex布局 内部才能进行布局操作*/
flex-direction: row;/*表示元素的走向*/
flex-wrap:wrap;/*声明元素是否换行*/
/* 在横轴上的对齐方式
* |flex-start:左对齐|flex-end:右对齐|center:横向居中对齐|space-between:左右两端对齐|space-around:同行元素间距相等|
* (只有在不设置 flex-grow 时才起作用)
*/
justify-content: space-around;
/* 在纵轴上的对齐方式
* |flex-start:上对齐|flex-end:下对齐|center:纵向居中对齐|baseline:项目的第一行文字的基线对齐|stretch:[默认]|
* (只有在元素和元素的高度不一样时才体现出来)
*/
align-items:stretch;
/*
* 轴线对齐方式
* flex-start:与交叉轴的起点对齐。
* flex-end:与交叉轴的终点对齐。
* center:与交叉轴的中点对齐。
* space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
* space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
*/
align-content:space-around;
list-style-type:none;
padding:0;
}
li{
height:300px;
/* flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果所有项目的flex-grow属性都为1,
则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。*/
flex-grow:1;
text-align: center;
margin:15px;
border: 1px solid red;
background: #c6c7c9;
flex-basis:300px;
}
@media(max-width:600px) {
.lio{
display: none;
}
}
</style>
</head>
<body>
<ul>
<li class="lio">1</li>
<li class="lio">2</li>
<li class="lio">3</li>
<li class="lio">4</li>
<li class="lio">5</li>
<li class="lio">6</li>
<li class="lio">7</li>
<li class="lio">8</li>
</ul>
</body>
</html>