css 一些布局合集

1.五个元素在同一行显示，并且每个元素在小格子里上下左右居中对齐：

如图所示：不要在意细节！

代码如下：

/* 最外层 */
.container {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

/* 子元素 */
.item {
    width:20%;
    height:100%;
    display:flex;
    justify-content: center;
    align-items:center;
}

2.一行中两个view元素，分别占一半，且居中显示：

代码如下：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.view1 .view2 {
  flex:1;
  width: 50%;
}

3.一行中两个元素两端对齐：

如图所示：

代码如下：

.container {
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
}

4.一行中一个元素在最右边：

如图所示：

代码如下：

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