当前位置: 首页 > Web前端 > HTML

Tips-在flex布局中将其中一个元素放在右边或左边

时间:2023-03-28 18:36:54 HTML

flexjustify-content属性定义项目在主轴上的对齐方式。.box{justify-content:flex-start|弹性端|中心|间隔|space-around;}flex-start(default):leftjustifyflex-end:rightjustifycenter:centerspace-between:两个对齐,项目之间的间距相等。space-around:每个项目两边的间距相等。因此,项目之间的间距是项目与边框之间的间距的两倍。但是如果一个元素需要从布局中分离出来并且需要单独正确呢?使用margin-left:auto;margin的概念是给元素加上间隔,比如margin-left:50px;margin-left:auto的原理是计算当前整个可用空间,然后把这么多空间安排在元素的左侧,这导致将元素一直推到右侧。.flex-box{display:flex;width:300px;li{宽度:50px;高度:50px;背景:红色;&:last-child{背景:黄色;左边距:自动;}}}