Flex弹性盒子

Flex弹性盒子

​ 弹性盒子能更好的用于页面的布局

使用方法：在父级元素样式添加一个 display : flex ;

.flex-container {
	display: flex;
	background-color: DodgerBlue;
}
.flex-container > div {
	background-color: #f1f1f1;
	margin: 10px;
	padding: 20px;
	font-size: 30px;
}

flex 弹性盒子有以下几个常用的配置项

flex-direction 让子元素按方式排序

.flex-container {
	display: flex;
    /* 垂直排列（正序） */
  	flex-direction: column;
    /* 垂直排序（反序） */
    flex-direction: column-reverse;
    /* 水平排列（正序） */
    flex-direction: row;
    /* 水平排序（反序） */
    flex-direction: row-reverse;
    /* 会根据子元素设置得width进行水平排列（必要时换行） */
    flex-wrap: wrap;
}
.flex-container>div {
    width: 20px;
    background-color: white;
}

justify-content 设置子元素水平方向对齐方式

.flex-container {
  	display: flex;
    /* 让子元素水平中心对齐 */
  	justify-content: center;
    /* 让子元素水平在开头对齐 */
    justify-content: flex-start;
    /* 让子元素水平在尾部对齐 */
    justify-content: flex-end;
    /* 让子元素水平居中对齐，元素之间有空格 */
    justify-content: space-around;
    /* 让子元素水平之间有等距空格，优先在首尾两侧展示 */
    justify-content: space-between;
}

align-items 设置子元素垂直方向对齐方式

.flex-container {
  	display: flex;
  	height: 200px;
    /* 让子元素在垂直方向中心对齐 */
  	align-items: center;
    /* 让子元素在垂直顶部对齐 */
    align-items: flex-start;
    /* 让子元素在垂直底部对齐 */
    align-items: flex-end;
    /* 让子元素拉伸到父元素的高度 */
    align-items: stretch;
}