237-CSS Flexbox模型布局的简单使用

.div1 {
  display: flex;
  flex-wrap: wrap;
}

.div1-1,
.div1-2,
.div1-3 {
  flex: 1;
}

.div1-4 {
  flex: 0 0 100%;
}

/* 可选：为更好的可视效果添加一些样式 */
.div1 > div {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 5px;
}

.div1-4 input[type="text"] {
  margin-top: 5px;
}

display: flex; 属性应用于 .div1 容器，使其子元素（div1-1、div1-2、div1-3、div1-4）自动从左到右排列。对于 div1-1、div1-2 和 div1-3，使用了 flex: 1; 属性，使它们平均分配可用空间。对于 div1-4，使用了 flex: 0 0 100%; 属性，使其占满整行并开始新行。

div-1\div-2\div-3 的内部元素，靠左, 元素内容从左到右排列，没有空间

.div1 {
  display: flex;
  flex-wrap: wrap;
}

.div1-1,
.div1-2,
.div1-3 {
  flex: 0 0 auto; /* 防止缩小 */
  margin-right: 0; /* 移除右侧边距 */
}

.div1-4 {
  flex: 0 0 100%;
}

/* 可选：为更好的可视效果添加一些样式 */
.div1 > div {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 0; /* 移除外边距 */
}

.div1-4 input[type="text"] {
  margin-top: 5px;
}

div-4的内部元素，底部对齐:

.div1 {
  display: flex;
  flex-wrap: wrap;
}

.div1-1,
.div1-2,
.div1-3,
.div1-4 {
  display: flex;
  flex-wrap: nowrap; /* 防止内部元素换行 */
}

.div1-1,
.div1-2,
.div1-3 {
  flex: 0 0 auto; /* 防止缩小 */
  margin-right: 0; /* 移除右侧边距 */
}

.div1-4 {
  flex: 0 0 100%;
  align-items: flex-end; /* 内部元素底部对齐 */
}

/* 可选：为更好的可视效果添加一些样式 */
.div1 > div {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 0; /* 移除外边距 */
}

.div1-4 input[type="text"] {
  margin-top: 5px;
}