css常用布局和flex的使用

一个div内有三个子div, 左右是固定宽度，中是剩余宽度

html:

<div class="container">
  <div class="left">左侧内容</div>
  <div class="center">中间内容</div>
  <div class="right">右侧内容</div>
</div>

css:

.container {
  display: flex;
}

.left, .right {
  width: 100px; /* 固定宽度，可以根据需要调整 */
}

.center {
  flex: 1; /* 占据剩余宽度 */
}

一个div内有两个子div, 这两个子div 均与分布

html:

<div class="parent">
  <div class="child">子div 1</div>
  <div class="child">子div 2</div>
</div>

css:

.parent {
  display: flex;
  justify-content: space-between;
}

.child {
  /* 如果需要，可以为子div添加样式 */
}

一个div中有图片+文字。 这两个都要垂直居中

html:

<div class="container">
  <img src="path/to/image.jpg" alt="图片描述" class="image">
  <span class="text">文字内容</span>
</div>

css:

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.image {
  margin-right: 10px; /* 如果需要，可以调整图片与文字之间的间距 */
}

.text {
  /* 如果需要，可以为文字添加样式 */
}

绝对定位下的居中：

.element {
    position: absolute; /* 使用绝对定位 */
    left: 50%; /* 元素左边缘位于父元素的水平中心 */
    transform: translateX(-50%); /* 使用负的左偏移来使元素水平居中 */
}

外层div 相对位置 内层div 绝对位置：

html:
 

<div class="outer">
  <div class="inner">内层内容</div>
</div>

css:

.outer {
  position: relative; /* 外层div相对定位 */
  width: 300px;
  height: 200px;
  background-color: lightblue;
}

.inner {
  position: absolute; /* 内层div绝对定位 */
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 使用transform居中对齐 */
  background-color: lightcoral;
  padding: 10px;
}

同时让一个div内的元素水平和垂直居中：

<view  style="width: 50px;display: flex;align-items: center;justify-content: center;"><van-icon name="points" /></view>

padding 后导致宽度超过限制，该怎么写：保持宽度不变又向内padding？

div {
  box-sizing: border-box;
  padding: 10px; /* 适当调整为您需要的 padding 值 */
}

上中下有三个div 上下的div都是固定高度，中间的div是剩余高度，用flex该怎么写

 

.container {
  display: flex;
  flex-direction: column;
  height: 300px; /* 设置容器总高度，可根据实际需要调整 */
}

.top {
  height: 50px; /* 上面div固定高度 */
  background-color: #f0f0f0;
}

.middle {
  flex: 1; /* 中间div占据剩余空间 */
  background-color: #e0e0e0;
}

.bottom {
  height: 100px; /* 下面div固定高度 */
  background-color: #d0d0d0;
}