0
点赞
收藏
分享

微信扫一扫

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;
}

举报

相关推荐

0 条评论