Flex弹性布局
元素沿着哪个方向排列,哪个方向就是主轴。另外一个就是交叉轴,并不是x轴就是主轴,y轴就是交叉轴。
四个顶点分别是主轴/交叉轴的开始和结束。还有一个主轴和交叉轴的交叉点
中间就是每个item,mian size和cross size不要理解为宽高,分别是占主轴和交叉轴的空间,主轴和交叉不是固定的沿着主轴方向就是主轴空间,反之就是交叉轴空间
flex-direction属性
如果父级div宽度不够,子div设置了宽度,flex布局会自动的压缩每个子div,比如父级300px宽度,子div为100px,四个子元素横向从左到右排列,这时并不会超出父div宽度,自适应修改每个子div宽度为75px
flex-warp属性
设置这个属性并不会再自动压缩每个item宽度,设置warp他就会换行
相反方向换行换列,比如说本应该换到左下角第一个加上reserve换到左上角第一个。
flex-flow属性
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局</title>
<style>
#div0 {
width: 300px;
background-color: violet;
display: flex;
/* flex-direction: row;
flex-wrap: wrap-reverse; */
flex-flow: row wrap;
}
#div0 div {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="div0">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
justify-content
如果上边宽度为380,设置了换行,那么在父元素div最右侧会空出80px的间隙。
添加
justify-content: space-around;
如果要上下间距还是可以使用盒子模型里的内外间距的方式
aligin-item属性
就是设置元素在交叉轴的对其方式。
<style> #div0 { width: 400px; background-color: violet; display: flex; /* flex-direction: row; flex-wrap: wrap-reverse; */ flex-flow: row wrap; justify-content: space-around; height: 400px; align-items: center; } #div0 div { width: 100px; height: 100px; background-color: yellow; } </style>
aligin-content属性
与aligin-items相似,区别在于:
aligin-items如果主轴为x轴,设置换行,交叉轴上有两行,这时设置交叉轴剧中,这时他会将将交叉轴上的每一行当作单独的item居中。
但是aligin-content则会将交叉轴上的几行看成一个整体来居中