flex弹性盒模型布局
时间：5年前 阅读：5054
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
border: 2px solid darkblue;
/*将外层容器转换成弹性盒模型*/
display: flex;
}
ul li{
width: 200px;
height: 100px;
border: 1px solid darkgreen;
background: darkgreen;
margin: 10px;
list-style: none;
text-align: center;
line-height: 100px;
color: white;
font-size: 30px;
}
</style>
</head>
<body>
<!--弹性盒模型容器中的项目默认在主轴上排列
子元素默认都排列在主轴上，不换行
如果项目总宽度小于容器宽度，就正常排列，按照设置的宽度
如果项目总宽度大于容器宽度，那么子元素就均分容器宽度，设置宽度无效-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>5</li>
</ul>
</body>
</html>
主轴方向
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
margin: 0 auto;
width: 1100px;
height: 300px;
border: 2px solid darkblue;
/*将外层容器转换成弹性盒模型*/
display: flex;
flex-direction: row;
}
ul li{
width: 200px;
height: 100px;
border: 1px solid darkgreen;
background: darkgreen;
margin: 10px;
list-style: none;
text-align: center;
line-height: 100px;
color: white;
font-size: 30px;
}
</style>
</head>
<body>
<!--弹性盒模型容器中的项目默认在主轴上排列
子元素默认都排列在主轴上，不换行
如果项目总宽度小于容器宽度，就正常排列，按照设置的宽度
如果项目总宽度大于容器宽度，那么子元素就均分容器宽度，设置宽度无效-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>5</li>
</ul>
</body>
</html>
主轴上的排列方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
margin: 0 auto;
width: 1100px;
height: 300px;
border: 2px solid darkblue;
/*将外层容器转换成弹性盒模型*/
display: flex;
/*flex-direction: row;*/
/*justify-content: space-around; 均分*/
justify-content: space-between; /* 挨着左右两端均分*/
}
ul li{
width: 150px;
height: 100px;
border: 1px solid darkgreen;
background: darkgreen;
/*margin: 10px;*/
border: 2px solid palevioletred;
list-style: none;
text-align: center;
line-height: 100px;
color: white;
font-size: 30px;
}
</style>
</head>
<body>
<!--弹性盒模型容器中的项目默认在主轴上排列
子元素默认都排列在主轴上，不换行
如果项目总宽度小于容器宽度，就正常排列，按照设置的宽度
如果项目总宽度大于容器宽度，那么子元素就均分容器宽度，设置宽度无效-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>5</li>
</ul>
</body>
</html>
交叉轴上的对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
margin: 0 auto;
width: 1100px;
height: 300px;
border: 2px solid darkblue;
/*将外层容器转换成弹性盒模型*/
display: flex;
/*flex-direction: row;*/
/*justify-content: space-around; 均分*/
justify-content: space-between; /* 挨着左右两端均分*/
align-items: center;
flex-wrap: wrap; /*换行*/
}
ul li{
width: 200px;
height: 100px;
border: 1px solid darkgreen;
background: darkgreen;
/*margin: 10px;*/
border: 2px solid palevioletred;
list-style: none;
text-align: center;
line-height: 100px;
color: white;
font-size: 30px;
}
</style>
</head>
<body>
<!--弹性盒模型容器中的项目默认在主轴上排列
子元素默认都排列在主轴上，不换行
如果项目总宽度小于容器宽度，就正常排列，按照设置的宽度
如果项目总宽度大于容器宽度，那么子元素就均分容器宽度，设置宽度无效-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
多根轴线的对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
margin: 0 auto;
width: 1100px;
height: 300px;
border: 2px solid darkblue;
/*将外层容器转换成弹性盒模型*/
display: flex;
/*flex-direction: row;*/
/*justify-content: space-around; 均分*/
justify-content: space-between; /* 挨着左右两端均分*/
align-items: center; /*居中对齐弹性盒*/
flex-wrap: wrap; /*换行*/
align-content: space-around; /*多根轴线中间平分*/
}
ul li{
width: 200px;
height: 100px;
border: 1px solid darkgreen;
background: darkgreen;
/*margin: 10px;*/
border: 2px solid palevioletred;
list-style: none;
text-align: center;
line-height: 100px;
color: white;
font-size: 30px;
}
</style>
</head>
<body>
<!--弹性盒模型容器中的项目默认在主轴上排列
子元素默认都排列在主轴上，不换行
如果项目总宽度小于容器宽度，就正常排列，按照设置的宽度
如果项目总宽度大于容器宽度，那么子元素就均分容器宽度，设置宽度无效-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论