flex布局

flex作用

*能用 Flex 来实现元素的水平居中，两端对齐和垂直居中。

flex常用语法

多个元素在一行

.ly{
display:flex;
}

多个元素水平居中对齐

.ly {
display: flex;
justify-content: space-between;
}

多行多个元素水平两端对齐

.ly {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

多个元素在一行，某个元素占据剩余部分

.ly {
display: flex;
}
// 给占据剩余部分的元素加该类名
.ly__item--fill {
flex-grow: 1;
}

多个元素水平居右对齐

.ly {
display: flex;
justify-content: flex-end;
}

多个元素垂直居中

.ly {
display: flex;
align-items: center;
}

多个元素水平垂直居中对齐

.ly {
display: flex;
justify-content: center;
align-items: center;
}

---

justify-content控制块级元素水平方向的布局，align-items控制垂直方向
text-align控制块级元素中内容的对齐方式