首页 新闻 会员 周边

flex布局的一个问题

0
悬赏园豆：10 [已解决问题] 解决于 2017-10-18 15:25

问题描述：

在div   box里，item_1和item_2实现左排列，item_3实现右排列，求解。

意思就是怎样使一个子元素有与其他子元素不一样的对齐方式？

希望有代码可以参考一下，谢谢

少爷zwx的主页 少爷zwx | 初学一级 | 园豆：159
提问于：2017-02-14 11:06
< >
分享
最佳答案
0

试试 .item_3{margin-left:auto;} ，参考自 Right-aligning flex item?

收获园豆：10
dudu | 高人七级 |园豆：30979 | 2017-02-14 11:20

有效果，但如果是这样布局，就不行了，如图：

求解

少爷zwx | 园豆：159 (初学一级) | 2017-02-14 11:25

@少爷zwx: 建议提供一下你的css代码

dudu | 园豆：30979 (高人七级) | 2017-02-14 11:26

@dudu: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flex布局方式</title>
    <style>
        .box{
            width:500px;
            height:100px;
            background-color:#f1f1f1;
            display:flex;
            flex-direction:row;
        }
        .box div{
            width:50px;
            height:50px;
            background-color:orange;
            margin:5px;
        }
    </style>  
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>
少爷zwx | 园豆：159 (初学一级) | 2017-02-14 11:31

@少爷zwx: 给item_3加个order：

.box .item_3{
      margin-left:auto;
      order:99;
}
dudu | 园豆：30979 (高人七级) | 2017-02-14 11:41
其他回答(1)
0

弄个选择器单独选中它给样式啊.

比如你这个是最后一个可以用last选择器找他的最后一个子元素.

吴瑞祥 | 园豆：29449 (高人七级) | 2017-02-14 11:08

选择器我知道，最后一个元素item_3是右排列，要什么属性可以做到？

希望有代码，谢谢

支持(0) 反对(0) 少爷zwx | 园豆：159 (初学一级) | 2017-02-14 11:12

@少爷zwx: 有浮动不行吗.

支持(0) 反对(0) 吴瑞祥 | 园豆：29449 (高人七级) | 2017-02-14 11:32

@吴瑞祥: flex布局是种全新的布局，用浮动是无效的

支持(0) 反对(0) 少爷zwx | 园豆：159 (初学一级) | 2017-02-14 11:35

@少爷zwx: 学到了.看dudu的应该是对的

支持(0) 反对(0) 吴瑞祥 | 园豆：29449 (高人七级) | 2017-02-14 11:38
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。