css布局一行排几个元素

最新推荐文章于 2024-07-11 11:23:22 发布

最新推荐文章于 2024-07-11 11:23:22 发布 · 3.1k 阅读

文章标签：

#布局 #flex #css

其他专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用Flex布局实现特定的设计效果，包括水平排列、居中对齐等技巧，并提供了一个具体的例子来展示如何设置div元素的样式。

要想这样的效果：

用flex实现：

首先要在外层(div)使用display:flex; 在确定，布局方向(水平或是垂直)，水平使用flex-direction: row; 要使里面的元素都在中央(middle),这在用align-items: center;

在声明一层(div)，如手机号码与图标，可以这样

<div style="flex: 3 1 auto;padding-left: 60px;">
  <span >手机号码</span>
  <img src="../../static/img/user/user_icon/ok.png" style="margin-left: 40px">
</div>

即整体代码为：

<div style="margin-left: 60px; margin-right: 90px">
  <div style="padding-top: 60px;">
    <span style="font-size: 16px;font-weight: bold;">安全设置</span>
  </div>

  <div style="margin: 30px 0"></div>
  <div style="display: flex; flex-direction: row;align-items: center;height: 50px;background-color: #eeeeee;">
    <div style="flex: 3 1 auto;padding-left: 60px;">
      <span >手机号码</span>
      <img src="../../static/img/user/user_icon/ok.png" style="margin-left: 40px">
    </div>
    <span style="flex: 5 1 auto;">绑定的手机号码:176xxxxx61</span>
    <a href="javascript:void(0)" @click="" style="margin-right: 60px;text-decoration:none;">修改</a>
  </div>
</div>