使用格式进行布局, 会非常容易调整.
整体布局
.container {
display: flex;
flex-direction: row;
}
关于排列方式, 包括:
- row: 水平从左往右
- row-reverse: 水平从右往左
- colum: 垂直从上到下
- colum-reverse: 垂直从下到上
空间增长
flex-grow: 1;
设置水平对齐的方式
justify-content: flex-start;
关于排列方式, 包括:
- flex-start: 起点对齐, 即左对齐
- flex-end: 右对齐
- center: 居中对齐
- space-between: 两端对齐
- space-around: 环绕对齐, 左侧右侧的空白均完全相等
内部控件对齐
align-items: flex-start;
- flex-start: 顶端对齐
- flex-end: 底端对齐
- center: 垂直居中对齐
- stretch: 垂直拉伸对齐, 一般可以将height设置为auto
- baseline: 文字底部基线对齐
控件居中方法
.photo {
display: block;
widows: 90%;
margin-left: auto;
margin-right: auto;
}
更多资料可以查看: Flex 布局语法教程
