移动端flex图标和文字上下结构布局-CSS布局指南

2023-10-13 18:20:59

Flex布局的优势

简单、灵活 ：Flex布局使用简单的语法，便于快速构建布局，且适应性强，可轻松调整元素的位置和大小。
响应式设计 ：Flex布局与响应式设计完美契合，可自动适应不同屏幕尺寸，无需为不同的设备编写不同代码。
对齐和排列 ：Flex布局提供多种对齐方式和排列方式，可以轻松实现元素的垂直或水平排列、对齐或居中。
布局方向 ：Flex布局支持水平和垂直两个方向，可轻松改变元素的布局方向，以满足不同的设计需求。

移动端Flex图标和文字上下结构布局指南

确定布局方向 ：首先确定布局方向，是水平排列还是垂直排列，然后根据方向选择对应的Flex布局属性。
设置父元素的Flex属性 ：父元素通常是一个容器元素，设置其display属性为flex或inline-flex。
设置子元素的Flex属性 ：设置子元素的flex属性，如flex-grow、flex-shrink和flex-basis，以控制子元素的伸缩和对齐方式。
调整子元素的顺序 ：使用order属性可以调整子元素在父元素中的顺序。
设置间距 ：使用margin和padding属性控制子元素之间的间距。
响应式设计 ：使用媒体查询来实现响应式设计，以适应不同屏幕尺寸。

示例代码

<div class="container">
  <div class="item">
    <img src="icon.png" alt="图标">
    <p>文字</p>
  </div>
  <div class="item">
    <img src="icon2.png" alt="图标">
    <p>文字</p>
  </div>
  <div class="item">
    <img src="icon3.png" alt="图标">
    <p>文字</p>
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
}

.item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.item img {
  margin-right: 10px;
}

@media (max-width: 768px) {
  .container {
    flex-direction: row;
  }
}