问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

flex布局多个子元素如何既有左对齐也有右对齐

头像
edenliyu
    751819

    我需要在一个flexbox下面放置多个子项目，默认情况下都是居左放置的,但需要改变某一个或者多个子项目的属性，放他们可以居右对齐，或者居中，实现多个项目既有左对齐也有右对齐的效果。如下图，1，4左对齐，2右对齐，3居中。求指教。
    图片描述

        <div class="flex-box">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">3</div>
    </div>
    htmlflexbox
    阅读 38.6k
    4 个回答
    得票最新
    头像
    zollero
      3.8k2824
      ✓ 已被采纳

      写了个例子?，宽度我是写死的，你可以根据需求自己定义宽度：

      <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        body {
            width: 800px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #000;
        }
        .flex-box {
            display: flex;
            justify-content: space-between;
        }
        .flex-item {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        .center {
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="flex-box">
        <div class="flex-box flex-item">
            <div class="flex-item">1</div>
            <div class="flex-item">4</div>
        </div>
        <div class="flex-item center">2</div>
        <div class="flex-item">3</div>
    </div>
</body>
</html>

      效果截图：

      clipboard.png

      头像
      peterzhang
        1313

        1.可以将1、4由另一个div包裹，再由这个div和1、3作为容器的项目进行space-between对齐

        2.如果需要点击某一个项目，使其靠到左边或者右边，剩余的space-between对齐
        可以构建一个div作为容器的第一个项目，这个项目中定义1、2、3、4这么四个子元素，他们的display设置为none。当点击外面相应数字的div时，将被点击的div的display设为none，将我们构建的div内的相应数字的div的display设为block即可。

        方案1：

        html部分
<div id="container">
          <div class="group">
                <div class="items">
                      1
                </div>
                <div class="items">
                      4
                </div>
          </div>
          <div class="items">
                3
          </div>
          <div class="items">
                2
          </div>
    </div>

css部分
#container {
        display:flex;
        height:100px;
        
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        
        border: 1px solid blue;
        
    }


.items {
        flex:1 1 0;  //绝对项目2、3 相对于group的占比；绝对项目1、4相对彼此的占比
        border:1px solid red;
    }


#container > .items { //3、2两个项目的最大和最小尺寸相对于容器的百分比设置
        min-width:10%;
        max-width:20%;
    }



.group {
        display: flex;
        flex-direction:row;
        
        flex:2 2 0; //绝对项目group相对于2、3的占比
        
        min-width:20%;
        max-width:40%;
    }

        结果：
        结果

        方案2：需要用到js，不做赘述。

        头像
        alpha007
          521915

          目前最简单也容易理解的方法，使用 margin:auto; 自动撑开：

          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .flex-box {
            display: flex;
            border: 1px solid red;
            width: 500px;
        }
    
        .flex-item {
            border: 1px solid red;
            width: 15%;
        }
    
        .flex-item:nth-child(3) {
            margin-left: auto;
            margin-right: auto;
        }
    
        .flex-item:nth-child(3) {
            margin-left: auto;
        }
    </style>
    
</head>
<body>

    <div class="flex-box">
        <div class="flex-item">1</div>
        <div class="flex-item">4</div>
        <div class="flex-item">3</div>
        <div class="flex-item">2</div>
    </div>
    
</body>
</html>
          头像
          w_bottle
            2
            新手上路，请多包涵

            justify-content: space-between

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题