flex布局,flex-direction, justify content, align-content
目录
flex-direction
justify content：
flex-wrap
align-items
align-content
flex-flow
flex:1
align-self
order属性定义项目排列顺序
已知html文件为：
1
2
3
通过给父盒子添加display:flex,使得能给span这样的行内元素添加高和宽
因为对于父容器div来说，有多个子项目span，为了让span们在一行平分，添加flex：1在div span里
flex本来就能默认将盒子放一行使用，子元素的float，clear和vertical-align属性会失效
flex-direction
row默认是主轴方向，column是侧轴
- row-reverse,从右到左而且顺序也倒过来
- 要像块级元素一样按照列来：把主轴设置为y轴 flex-direction:column
justify content：
space-around就是平均分
但是如果要先两边贴边，再平分剩余空间，用space-between
flex-wrap
设置子元素是否换行
默认情况下项目排在一条线上：flex-wrap:nowrap;
改成flex-wrap:wrap
align-items
针对只有一行情况，对于侧轴的元素，可以实现：
flex-start, center(对于侧轴也居中对齐)，stretch（用的少，没设置宽度时候拉到容器高度）
同时设置：justify-content:center 以及align-items:center可以实现水平和纵向同时垂直居中
align-content
针对换行情况下
实现flex-start,即第二行和第二行开始的地方对齐
实现space-between 同样贴着边情况下的平均分配
实现space-around,整个平均，距离边也有距离
flex-flow
flex-flow: column wrap;
(简写flex-direction:column和 flex-wrap:wrap)
flex-flow:row wrap
flex:1
如果想等分剩余部分
这种写法就是对于一行的在section里面的三个div盒子，左边和右边的div固定了，中间的盒子不管屏幕怎么移动会随着屏幕的缩小放大而等比例缩小放大
平均分的写法：
p {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 100px auto;
}
p span {
flex: 1;
}
1
2
3
不等分的情况
p span {
flex: 1;
/* 各自占了1/3，原因是没有宽度 */
}
p span:nth-child(2) {
flex: 2;
background-color: green;
}
1
2
3
align-self
利用align-self调整几个span里的特定元素位置：
选中第三个span元素使得它沉在侧轴底部
注意这里的选中用的nth-child(3)
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
/* align-items:flex-end;但是只想让三个盒子里的最后一个这样 */
}
div span {
width: 150px;
height: 100px;
background-color: purple;
margin-right: 5px;
}
div span:nth-child(3) {
align-self: flex-end;
}
order属性定义项目排列顺序
1 数值越小，排列越靠前默认为0
2 和z-index不一样
在上述程序中想把2放1前面
div span:nth-child(2) {
order:-1;
}默认都是0，第二个孩子改为-1，-1在0前面，所以这样第二个孩子会出现在第一个孩子前面