1.给父盒子添加 display:flex ,其子元素就拥有了行内块的特点,在一行内显示并且可以设置宽度和高度.
示例代码:
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
display: flex;
margin: 100px auto 0;
width: 1200px;
height: 200px;
background-color: pink;
}
h1 {
width: 200px;
height: 80px;
background-color: green;
}
p {
width: 200px;
height: 80px;
background-color: red;
}
span {
width: 200px;
height: 80px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<h1></h1>
<p></p>
<span></span>
</div>
</body>
</html>
示例图片:
2子元素默认从左开始依次排列,可以通过justify-content属性来设置子元素的排列方式.
居中排列: justify-content: center ;
.box {
display: flex;
/* 居中排列 */
justify-content:center ;
margin: 100px auto 0;
width: 1200px;
height: 200px;
background-color: pink;
}
示例图片:
沿主轴均匀排列,空白间距均分在盒子两侧 : justify-content: space-around;
.box {
display: flex;
/* 沿主轴均匀排列,空白间距均分在盒子两侧 */
justify-content: space-around;
margin: 100px auto 0;
width: 1200px;
height: 200px;
background-color: pink;
}
示例图片:
沿主轴均匀排列,空白间距均分在盒子两侧 : justify-content: space-around;
.box {
display: flex;
/* 沿主轴均匀排列,空白间距均分在相邻盒子之间 */
justify-content: space-between;
margin: 100px auto 0;
width: 1200px;
height: 200px;
background-color: pink;
}
示例图片:
沿主轴均匀排列,子盒子与父盒子之间间距相等 : justify-content: space-evenly;
display: flex;
/* 沿主轴均匀排列,子盒子与父盒子之间间距相等 */
justify-content: space-evenly;
margin: 100px auto 0;
width: 1200px;
height: 200px;
background-color: pink;
}
示例图片:
3.可以给子元素设置flex属性,修改弹性盒子伸缩比
/* flex 属性只占用父盒子剩余尺寸,
span标签的宽度固定,并不会受到影响
flex的属性值表示子盒子所占父盒子剩余尺寸的比值,
例如:h1 所占剩余尺寸的1/3,p所占剩余尺寸的2/3.*/
h1 {
flex: 1;
height: 80px;
background-color: green;
}
p {
flex: 2;
height: 80px;
background-color: red;
}
span {
width: 200px;
height: 80px;
background-color: blue;
}
示例图片:
4.当父盒子的宽度小于子盒子的宽度之合时,给父盒子添加 flex-wrap: wrap;属性可以实现自动换行
display: flex;
/* 自动换行 */
flex-wrap: wrap;
/* 沿主轴均匀排列,子盒子与父盒子之间间距相等 */
justify-content: space-evenly;
margin: 100px auto 0;
width: 1200px;
height: 200px;
background-color: pink;
}
h1 {
width: 800px;
height: 800px;
background-color: green;
}
p {
width: 200px;
height: 80px;
background-color: red;
}
span {
width: 1000px;
height: 80px;
background-color: blue;
}
示例图片:
4.1子元素在竖直方向的布局可以通过align-content属性来设置,其主要属性值有 start,space-around,
space-between,space-evenly.用法和justify-content一样.
例如:
.box {
display: flex;
/* 自动换行 */
flex-wrap: wrap;
/* 从上开始依次排列 */
align-content: start;
margin: 100px auto 0;
width: 1200px;
height: 200px;
background-color: pink;
}
示例图片:
