1.弹性布局,解决高度塌陷的问题
2.弹性布局只对他的直接子元素控制,子元素的子元素不控制
3.弹性布局有主轴概念,当x轴为主轴,y为侧轴,默认主轴的方向从左到右。
flex-direction: row/row-reverse;从左到右/从右到左
当y轴为主轴时侧轴为x轴,默认方向是从上到下。
flex-direction: column/column-reverse 从上到下,从下到上。
4.当子元素的宽度大于父元素的宽度是会压缩子元素宽度,从而使他放在一行中去。
比如父元素框800px,子元素框200px,有10个子元素,他会按比例缩小宽度放在同一行。默认是这样的
5.如果项换行,就使用flex-wrap: wrap;设置换行,这样又牵扯到如果主轴是x轴侧轴是y轴,根据侧轴如何进行分布
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parament{
width: 900px;
height: 800px;
border: 1px solid #333;
margin: 0 auto;
/* 设置为弹性容器,只对他的直接子元素child管用,间接的不管用 */
display: flex;
/* 设置主轴方向 */
flex-direction: row;
/* justify-content:设置主轴内容的分布情况
center:居中
flex-start:默认向主轴开始的方向靠拢
flex-end:向主轴结束的方向靠拢
space-around:平均分布两端的距离是中间距离的一半
space-between:平均分布两端没有间距
space-evenly:所有的间距都一样大
*/
justify-content: space-evenly;
/*
align-items 设置靠侧轴分布
flex-start像侧轴的开始靠拢
flex-end 向侧轴的结束方向进行靠拢
center 侧轴的中间分布
stretch 默认是拉伸,拉伸到和父元素一样高,因为子元素设置了高度,所以不会拉伸
*/
align-items: center;
/* 设置换行flex-wrap
nowrap 默认值不换行
wrap 设置换行
*/
flex-wrap: wrap;
/* 设置侧轴的多行分布align-content
flex-end 多行内容往侧轴的结束靠拢
flex-start 多行内容往侧轴的开始靠拢
center 多行居中
space-around 平均分布,两边有间距,间距是中间的一半
space-between 平均分布,两边没有间距
space-evenly 平均分布,所有间距一致
*/
align-content: space-evenly;
}
.child{
width: 200px;
height: 200px;
}
.c1{
background-color: cadetblue;
}
.c2{
background-color: aqua;
}
.c3{
background-color: coral;
}
</style>
</head>
<body>
<div class="parament">
<div class="child c1">1</div>
<div class="child c2">2</div>
<div class="child c3">3</div>
<div class="child c1">1</div>
<div class="child c2">2</div>
<div class="child c3">3</div>
<div class="child c1">1</div>
<div class="child c2">2</div>
<div class="child c3">3</div>
<div class="child c1">1</div>
<div class="child c2">2</div>
<div class="child c3">3</div>
</div>
</div>
</div>
</body>
</html>