flex弹性盒子模型（代码实例）
程序员文章站
2022-07-02 20:12:07
flex弹性盒子模型（代码实例）
flex弹性盒子模型（代码实例）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex弹性盒子模型 flex-direction flex-wrap</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.hd{
width: 80%;
border: 4px solid coral;
/*height: 500PX;*/
margin: 0 auto;
/*用flex实现浮动 用在父级上面
* 定义了父级里面的子元素（项目）布局是flex布局的形式
* */
display: flex;
/*与float浮动不同的是flex（弹性）布局没有脱离文档流，
* 可以撑起父元素的高度,实现子元素的均分父级元素
* 当项目宽度超过父级，那么给项目加的宽度无效
* */
/*flex-direction: column-reverse;*/
/*默认所有项目在一条轴线上，但是flex-wrap可以实现换行
* nowrap(默认)：不换行
* wrap：换行，第一行在上面
* wrap-reverse:换行，第一行在下方
* */
flex-wrap: wrap;
/*添加这个属性后，当项目宽度超过父级时会实现换行，子元素按它的实际
* 宽度排列
* */
}
.hd>p{
width: 180px;
height: 200px;
background: cornflowerblue;
/*float: left;*/
/*可以float浮动
但是脱离文档流不能撑起父元素的高度*/
border: 2px solid chartreuse;
box-sizing: border-box;
}
</style>
</head>
<body>
<p class="hd">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</p>
</body>
</html>