首页新闻找找看学习计划

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 | 高人七级 |园豆:41262 | 2017-02-14 11:20

有效果,但如果是这样布局,就不行了,如图:

求解

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

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

dudu | 园豆:41262 (高人七级) | 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 | 园豆:41262 (高人七级) | 2017-02-14 11:41
其他回答(1)
0

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

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

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

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

希望有代码,谢谢

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

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

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

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

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

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

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